Author: | netsession |
---|---|
Views Total: | 8,517 views |
Official Page: | Go to website |
Last Update: | November 4, 2016 |
License: | MIT |
Preview:

Description:
A pure CSS multi-level dropdown navigation that will be converted into a mobile-friendly toggle menu in small screens.
How to use it:
Create a multi-level dropdown navigation from a nested nav list as this:
<nav> <ul> <li class="current"><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Service</a></li> <li class="has_children"><a href="#">Contact</a> <ul> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Email</a></li> </ul> </li> <li><a href="#">Portfolio</a></li> </ul> </nav>
Create a menu toggle button using checkbox input and label.
<label class="toggle" for="toggle">☰ <span>Menu</span></label> <input class="toggle" id="toggle" type="checkbox">
The main CSS styles for the dropdown navigation on desktop.
nav ul ul { display: none; } nav ul ul li { float: none; } nav li { float: left; } nav li a { text-decoration: none; display: inline-block; margin: 10px 20px 5px 0; padding: 8px 10px; } nav li a:link, nav li a:visited { color: #646565; background: #e8e9eb; } nav li a:link:hover, nav li a:visited:hover { color: black; } nav li:hover ul { display: inline-block; position: absolute; } input.toggle, label.toggle { display: none; } label.toggle { font-weight: 900; font-size: 1.2em; padding: 10px 20px; }
Convert the dropdown navigation into to a toggle menu when the screen size is less than 960px.
@media (max-width: 960px) { nav { display: none; } input.toggle, .toggle span { display: none; } input[type=checkbox]:checked ~ nav, label.toggle { display: block; cursor: pointer; } nav li { float: none; } nav li:hover ul { display: block; position: relative; } nav li ul { display: block; } nav li ul li { margin-left: 20px; } nav li a { display: block; margin-left: 20px; } }