Author: | christabor |
---|---|
Views Total: | 10,780 views |
Official Page: | Go to website |
Last Update: | July 14, 2015 |
License: | MIT |
Preview:

Description:
A responsive navigation solution which uses input:checked pseudo selector to reveal a drawer menu sliding from the left or right hand side of the screen. You can change the breakpoint through media queries in the CSS.
How to use it:
Load the core stylesheet menu.css in the head
section.
<link rel="stylesheet" type="text/css" href="menu.css">
Create a checkbox based menu toggle.
<input type="checkbox" id="mobile-menu-toggle" class="mobile-menu-toggle mobile-menu-toggle-button">
Create a standard navigation menu from a nav list.
<ul id="plain-menu" class="mobile-toggleable-menu mobile-left"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Portfolio</a></li> </ul>
Replace the mobile-left with mobile-right to reveal the drawer menu on the right side.
<ul id="plain-menu" class="mobile-toggleable-menu mobile-right"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Portfolio</a></li> </ul>
Create a toggle icon.
<label class="mobile-left mobmenu-toggle" for="mobile-menu-toggle">+</label>
Style the drawer menu whatever you like.
.mobile-toggleable-menu { background-color: #333; color: #fff; display: block; width: 100%; height: 40px; padding: 0; } .mobmenu-toggle { background-color: orange; color: #fff; font-size: 35px; text-decoration: none; text-align: center; font-weight: bold; height: 50px; line-height: 50px; } .mobile-toggleable-menu li { display: inline-block; padding: 0; margin: 0; height: 40px; line-height: 40px; } .mobile-toggleable-menu li a { height: 100%; width: 100%; display: inline-block; border-bottom: 1px solid #444; text-decoration: none; color: #fff; padding: 0 20px; } .mobile-toggleable-menu li a:hover { background-color: #222; color: orange; } .mobmenu-toggle:hover { background-color: darkOrange; }
lite and functional, thx m8!