New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/greedy-navigation-responsive-navigation-menu/
Greedy Navigation - Responsive navigation menu
Download Demo
Greedy Navigation is a responsive navigation menu that stacks items into a dropdown menu when they overflow
When the user resizes the window the nav will shrink, any overflowing items will be removed from the visible list and get prepended to a list of vertically stacked items that are hidden. The user is notified of this action by a count badge next to a hamburger icon at the end of the menu, which acts as a dropdown trigger button for the hidden list.
1. INCLUDE CSS AND JS FILES
<link href="greedynav.css" rel="stylesheet" type="text/css" > <script src="greedynav.js"></script>
2. HTML
<nav class='greedy'> <h1>GreedyNav</h1> <ul class='links'> <li><a href='#'>navbar</a></li> <li><a href='#'>that</a></li> <li><a href='#'>handles</a></li> <li><a href='#'>overflowing</a></li> <li><a href='#'>menu</a></li> <li><a href='#'>elements</a></li> <li><a href='#'>effortlessly</a></li> </ul> <button>MENU</button> <ul class='hidden-links hidden'></ul> </nav>
Share