simongehrig.de/scss-grid
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added Menu Mixins:

Browse Source 
Desktop vertical
Desktop vertical
Tablet/Phone Fullscreen
Toggle Button
This commit is contained in:
Simon Gehrig
2017-02-22 01:21:17 +01:00
parent 6d9ce3dacc
commit 5cafe3670b
24 changed files with 946 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/layout/menus/horizontal/horizontal.html
+180
View File
@@ -0,0 +1,180 @@
<head>
<link rel="stylesheet" type="text/css" href="horizontal.css">
</head>
<body>
<div class="header">
<input id="navcheck" type="checkbox" name="menu">
<label class="navbar" for="navcheck">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</label>
<ul class="nav">
<li><a href="#">Item</a>
<ul>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a>
<ul>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a>
<ul>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item</a>
<ul>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
<li><a href="#">Sub Item</a>
<ul>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
<li><a href="#">Sub Sub Item</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="content"></div>
</body>
examples/layout/menus/horizontal/horizontal.scss
+21
View File
@@ -0,0 +1,21 @@
@import "../../../../_framework";
body {
background-color: #d9ffd9;
font-family: Calibri, sans-serif;
.header {
//transform: rotate(-1deg);
#navcheck {
@include toggle-tablet(100px, #ffd9d9, #806c80) {
@include menu-fullscreen-phone(100px, 20px, #806c80, #ffd9d9, #d9ffd9, #6c8080)
}
}
.nav {
font-weight: 700;
letter-spacing: 1px;
font-size: 20px;
@include menu-horizontal-desktop(20px, #806c80, #ffd9d9, #d9ffd9, #6c8080);
}
}
}