HTML
<div class="outer">
<input type="checkbox" id="slide-checkbox" class="slide-checkbox" role="button">
<label for="slide-checkbox" class="slide-toggle" onclick="">
<span class="menu-icon"></span>
</label>
<div class="slide">
<ul class="nav">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
<div class="content">
<h1>Responsive navigation</h1>
<p>Resize this window to see it in action!</p>
<p>Changes will happen When the screen (browser window) gets smaller than 680px</p>
<p>Resize this window to see it in action!</p>
<p>Changes will happen When the screen (browser window) gets smaller than 680px</p>
</div>
</div>
</div>
CSS
.outer {
overflow: hidden;
}
.slide {
background: #f9f9f9;
padding: 20px;
}
.content {
margin-top: 30px;
}
.nav {
width: 100%;
margin: 0 0 20px 0;
padding: 5px 0;
background: #a25f5e;
border-radius: 3px;
overflow: hidden;
}
.nav li {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
.nav li a {
display: block;
padding: 5px 20px;
text-decoration: none;
color: #f9f9f9;
}
.slide-toggle {
float: right;
cursor: pointer;
position: relative;
z-index: 1;
display: none;
margin: 10px 20px 0 0;
background-color: #a25f5e;
height: 30px;
width: 38px;
border-radius: 3px;
text-align: center;
}
.menu-icon {
cursor: pointer;
border-radius: 1px;
height: 2px;
width: 26px;
background: white;
position: relative;
-webkit-transition: background 300ms ease-in-out;
-moz-transition: background 300ms ease-in-out;
-o-transition: background 300ms ease-in-out;
-ms-transition: background 300ms ease-in-out;
transition: background 300ms ease-in-out;
}
.menu-icon:before,
.menu-icon:after {
content: '';
-webkit-transition: transform 300ms ease-in-out;
-moz-transition: transform 300ms ease-in-out;
-o-transition: transform 300ms ease-in-out;
-ms-transition: transform 300ms ease-in-out;
transition: transform 300ms ease-in-out;
position: absolute;
background: white;
width: 100%;
height: 100%;
left: 0;
}
.menu-icon:before {
top: -6px;
}
.menu-icon:after {
bottom: -6px;
}
.slide-toggle,
.slide-toggle:active,
.slide-toggle:focus {
border: none !important;
outline: none !important;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.slide-checkbox {
position: absolute;
top: -9999px;
left: -9999px;
}
.slide-checkbox:checked ~ .slide-toggle .menu-icon:before {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0;
display: inline-block;
}
.slide-checkbox:checked ~ .slide-toggle .menu-icon:after {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 0;
display: inline-block;
}
.slide-checkbox:checked ~ .slide-toggle .menu-icon {
background-color: transparent;
}
@media handheld, only screen and (max-width: 680px) {
.slide-toggle {
display: flex;
justify-content: center;
align-items: center;
}
.slide {
-webkit-transition: -webkit-transform 500ms ease;
-moz-transition: -moz-transform 500ms ease;
-o-transition: -o-transform 500ms ease;
transition: transform 500ms ease;
}
.slide,
.nav {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-webkit-perspective: 1000;
-moz-perspective: 1000;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
.slide-checkbox:checked ~ .slide {
-webkit-transform: translateX(70%) scale(1);
-moz-transform: translateX(70%) scale(1);
-ms-transform: translateX(70%) scale(1);
-o-transform: translateX(70%) scale(1);
transform: translateX(70%) scale(1);
}
.nav {
height: 100%;
background: #a25f5e;
border-radius: 0;
width: 70%;
position: absolute;
left: 0;
top: 0;
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-ms-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
.nav li {
float: none;
}
.nav li a {
border-bottom: 1px solid #FFFFFF;
padding: 12px 12px;
}
.nav li:last-child a {
border-bottom: none;
}
}