Added Menu Mixins:
Desktop vertical Desktop vertical Tablet/Phone Fullscreen Toggle Button
This commit is contained in:
@@ -11,29 +11,29 @@
|
||||
|
||||
<div class="wrap focus">
|
||||
<div class="inner">
|
||||
<div class="img-wrapper"><img src="http://lorempixel.com/400/400/city/1"></div>
|
||||
<p class="head">Off-Focus</p>
|
||||
<div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrap zoom">
|
||||
<div class="inner">
|
||||
<div class="img-wrapper"><img src="http://lorempixel.com/400/400/city/2"></div>
|
||||
<p class="head">Zoom</p>
|
||||
<div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrap shake">
|
||||
<div class="inner">
|
||||
<div class="img-wrapper"><img src="http://lorempixel.com/400/400/city/3"></div>
|
||||
<p class="head">Shake</p>
|
||||
<div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wrap all">
|
||||
<div class="inner">
|
||||
<div class="img-wrapper"><img src="http://lorempixel.com/400/400/city/4"></div>
|
||||
<p class="head">None</p>
|
||||
<div class="img-wrapper"><img src="http://lorempixel.com/400/400/"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -5,11 +5,16 @@
|
||||
background-color: #6ac88e;
|
||||
border-bottom: solid 40px #c86350;
|
||||
|
||||
@include absolute-span(0, 0, 0, 0);
|
||||
|
||||
.wrap {
|
||||
/*BASIC LAYOUT*/
|
||||
@include cols(4, 20);
|
||||
|
||||
.inner {
|
||||
background-color: #ffffff;
|
||||
padding: 20px 20px 40px 20px !important;
|
||||
box-shadow: 15px 15px 15px rgba(0, 0, 0, 0.4);
|
||||
|
||||
.head {
|
||||
font-family: sans-serif;
|
||||
@@ -24,10 +29,9 @@
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
border: solid thick #c86350;
|
||||
|
||||
img {
|
||||
width:100%; // make sure thins dont get wider than the parent cols element
|
||||
width: 100%; // make sure thins dont get wider than the parent cols element
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -68,7 +72,7 @@
|
||||
&.all {
|
||||
/*ALL EFFECTS*/
|
||||
.head {
|
||||
@include camera-focus($FOCUS-OUT, 0.5, 10, $EASE);
|
||||
@include camera-focus($FOCUS-OUT, 0.4, 10, $EASE);
|
||||
}
|
||||
|
||||
img {
|
||||
|
||||
@@ -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>
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,180 @@
|
||||
<head>
|
||||
<link rel="stylesheet" type="text/css" href="vertical.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>
|
||||
@@ -0,0 +1,26 @@
|
||||
@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-vertical-desktop(20px, 200px, #806c80, #ffd9d9, #d9ffd9, #6c8080);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user