Responsive Horizontal Nav Menu with jQuery and CSS
File Size: | 2.37 KB |
---|---|
Views Total: | 31701 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A mobile-friendly horizontal navigation menu that automatically clips overflowing menu items and adds them into a dropdown list when not enough space is available.
How to use it:
1. Create a normal horizontal navigation using Html unordered list.
<ul id="nav"> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Works</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> <li><a href="#">Menu 6</a></li> <li><a href="#">Menu 7</a></li> <li><a href="#">Menu 8</a></li> <li><a href="#">Menu 9</a></li> <li><a href="#">Menu 10</a></li> ... <li class="more"> <span>...</span> <ul id="overflow"> </ul> </li> </ul>
2. Style the navigation menu.
nav { background: #DA4453; overflow: hidden; } nav ul { margin: 0 0 2em; } nav ul li { float: left; } nav ul li a, nav ul li span { display: block; background: #DA4453; color: #fff; text-decoration: none; padding: 1em; cursor: pointer; -webkit-transition-duration: .3s; transition-duration: .3s; } nav ul li a:hover, nav ul li span:hover { background: #ED5565; }
3. Style the dropdown list.
nav ul li.more { width: 3em; text-align: center; display: none; } nav ul li.more:hover ul#overflow { opacity: 1; visibility: visible; } nav #overflow { opacity: 0; visibility: hidden; position: absolute; text-align: left; -webkit-transition-duration: .3s; transition-duration: .3s; } nav #overflow li { float: none; } nav #overflow li a { background: #34BC9D; white-space: nowrap; } nav #overflow li a:hover { background: #46CFB0; }
4. Include the jQuery JavaScript library at the end of the document.
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
5. The jQuery script to detect the window resize event and put the overflowing menu items into the dropdown list.
window.onresize = navigationResize; navigationResize(); function navigationResize() { $('#nav li.more').before($('#overflow > li')); var $navItemMore = $('#nav > li.more'), $navItems = $('#nav > li:not(.more)'), navItemMoreWidth = navItemWidth = $navItemMore.width(), windowWidth = $(window).width(), navItemMoreLeft, offset, navOverflowWidth; $navItems.each(function() { navItemWidth += $(this).width(); }); navItemWidth > windowWidth ? $navItemMore.show() : $navItemMore.hide(); while (navItemWidth > windowWidth) { navItemWidth -= $navItems.last().width(); $navItems.last().prependTo('#overflow'); $navItems.splice(-1,1); } navItemMoreLeft = $('#nav .more').offset().left; navOverflowWidth = $('#overflow').width(); offset = navItemMoreLeft + navItemMoreWidth - navOverflowWidth; $('#overflow').css({ 'left': offset }); }
This awesome jQuery plugin is developed by iamscottfreeman. For more Advanced Usages, please check the demo page or visit the official website.