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
Responsive Horizontal Nav Menu with jQuery and CSS

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">

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="//"></script> 

5. The jQuery script to detect the window resize event and put the overflowing menu items into the dropdown list.

window.onresize = 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.hide();
  while (navItemWidth > windowWidth) {
    navItemWidth -= $navItems.last().width();
  navItemMoreLeft = $('#nav .more').offset().left;
  navOverflowWidth = $('#overflow').width();  
  offset = navItemMoreLeft + navItemMoreWidth - navOverflowWidth;
    'left': offset

This awesome jQuery plugin is developed by iamscottfreeman. For more Advanced Usages, please check the demo page or visit the official website.