Author: | Alexxx666 |
---|---|
Views Total: | 2,964 views |
Official Page: | Go to website |
Last Update: | August 18, 2018 |
License: | MIT |
Preview:

Description:
A mobile-friendly and fully responsive navigation that uses JavaScript and CSS3 to convert the horizontal menu into a toggleable dropdown list when the screen size is less than a specific breakpoint.
How to use it:
Create a normal site navigation like this:
<nav> <div id="menu_button_wrapper"> <div id="menu_button"> Menu <div id="hamburger"> <span></span> <span></span> <span></span> </div> </div> <div class="clearfix"></div> </div> <ul id="menu_list"> <li class="current_page"><a href="#">Home</a></li> <li><a href="#">Audio</a></li> <li><a href="#">Video</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contacts</a></li> </ul> </nav>
Load the core JavaScript at the end of the document.
<script src="js/script.js"></script>
Style the navigation.
nav { font-family: Helvetica; text-align: right; text-transform: uppercase; background-color: #222; } nav ul { width: 90%; max-width: 1024px; margin: 0 auto; list-style-type: none; } nav ul li { display: inline-block; } nav ul li a { color: #9d9d9d; font-weight: bold; text-decoration: none; display: inline-block; padding: 1em; box-sizing: border-box; } nav ul li a:hover { color: white; } .current_page { background-color: black; } .current_page a { color: white; } #menu_button_wrapper { display: none; } .hidden { display: none; }
Responsive CSS styles for smaller screens.
@media (max-width: 760px) { #menu_button_wrapper { display: block; padding: 1em; color: #9d9d9d; border-bottom: 1px solid #101010; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.1); box-shadow: 0 1px 0 rgba(255,255,255,.1); margin-bottom: .5em; } #menu_button { box-sizing: border-box; float: right; padding: .5em 1em; border: 1px solid #333; border-radius: 5px; color: white; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #menu_button:hover { cursor: pointer; background-color: #333; } #hamburger { float: right; padding-top: .15em; } #menu_button span { display: block; background-color: #fff; width: 1.2em; height: .15em; border-radius: 1px; margin-bottom: .2em; } nav ul { width: 100%; margin: 0 auto; padding: 0; box-sizing: border-box; } nav ul li { display: block; } nav ul li a { width: 100%; } }
Changelog:
08/18/2018
- completely rewrote