cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div id="page">  
  <div class="wrap">
    <header id="header" class="row cf">
      <nav id="top-nav" class="dropdown cf">
        <ul class="dropdown menu">
          <li><a href="#">Contact Us</a></li>
          <li><a href="#">Account</a>
            <ul class="sub-menu">
              <li><a href="#">Preferences</a></li>
              <li><a href="#">Sign out</a></li>
            </ul>
          </li>
          <li><a href="#">Cart (2 items)</a></li>
        </ul>
      </nav>
      <h1>Responsive Menu</h1>
      <button id="primary-nav-button" type="button">Menu</button>
      <nav id="primary-nav" class="dropdown cf">
        <ul class="dropdown menu">
          <li class='active'><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Blog</a></li>
          <li><a href="#">Store</a>
            <ul class="sub-menu">
              <li><a href="#">Latest Products</a></li>
              <li><a href="#">Shirts</a>
                <ul class="sub-menu">
                  <li><a href="#">Men's</a>
                    <ul class="sub-menu">
                      <li><a href="#">S</a></li>
                      <li><a href="#">M</a></li>
                      <li><a href="#">L</a></li>
                      <li><a href="#">XL</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Women's</a></li>
                </ul>
              </li>
              <li><a href="#">Toys</a>
                <ul class="sub-menu">
                  <li><a href="#">3+</a></li>
                  <li><a href="#">10+</a></li>
                  <li><a href="#">15+</a></li>
                </ul>
              </li>
              <li><a href="#">Books</a></li>
            </ul>
          </li>
          <li><a href="#">Social</a>
            <ul class="sub-menu">
              <li><a href="#">Twitter</a></li>
              <li><a href="#">Facebook</a></li>
              <li><a href="#">RSS</a></li>
            </ul>
          </li>
        </ul>
      </nav><!-- / #primary-nav -->
    </header>
  </div>
  <div class="wrap">
    <div id="content" class="row cf">
      <div id="main">
        <h2>A jQuery + CSS Multi-level Responsive Menu</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec pretium lacus. Cras viverra, orci at porttitor condimentum, augue turpis auctor nisl, nec pellentesque enim est ac quam.</p>
      </div>
    </div>
  </div>
</div><!-- / #page -->
            
          
!
            
              body {
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.25;
  margin: 0;
  padding: 0;
  background: #f5f5f5;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Micro Clearfix */
.cf:before, 
.cf:after {
	content: '';
	display: table;
	visibility: hidden;
}

.cf:after {
	clear: both;
}

.cf {
	*zoom: 1;
}

.wrap {
  text-align: center;
}

.row {
  max-width: 800px;
  margin: 0 auto;
  text-align: left;
  overflow: hidden;
  width: 96%;
}

#header {
  overflow: visible;
  position: relative;
}

#header h1 {
  margin: 5px 0;
}

#primary-nav-button {
  background: transparent;
  display: none;
  border: 1px solid #aaa;
  position: absolute;
  bottom: 5px;
  right: 0;
  padding: 0;
  text-decoration: none;
  color: #333;
  text-align: center;
  font-weight: bold;
  font-size: 0;
}

#primary-nav-button:hover {
  background: rgba(0,0,0,0.05);
}

#primary-nav-button.selected {
  background: rgba(0,0,0,0.1);
}

#primary-nav-button:before {
  /* content: '☰'; */
  content: '\2261';
  display: block;
  font-size: 36px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.05;
  height: 1em;
  width: 1em;
  color: inherit;
  speak: none;
}

.menu li {
  float: left;
  margin-right: 10px;
  position: relative;
}

.menu li:last-child {
  margin-right: 0;
}

.menu .sub-menu li {
  width: 100%;
}

.menu li a {
  display: block;
  text-decoration: none;
}

#top-nav li a {
  color: #8CC152;
  padding: 5px 0;
}

#top-nav .sub-menu {
  background: #fff;
}

#top-nav .sub-menu li a {
  padding: 5px;
}

#top-nav .sub-menu li > a:hover,
#top-nav .sub-menu li.selected > a {
  background: #8CC152;
  color: #000;
}

#primary-nav li a {
  color: #333;
  font-weight: bold;
  padding: 10px;
}

#primary-nav li.active > a,
#primary-nav li > a:hover,
#primary-nav li.selected > a {
  background: #8CC152;
  color: #000;
}

.downarrow {
  	background: none;
  display: inline-block;
	  padding: 0;
  	text-align: center;
  min-width: 3px;
}

.sub-menu .downarrow {
  position: absolute;
  right: 0;
  padding-right: 10px;
}

.downarrow:before {
  content: '\25be';
  color: inherit;
  display: block;
	  font-family: sans-serif;
	  font-size: 1em;
  line-height: 1.1;
	  width: 1em;
  	height: 1em;
}

.menu .sub-menu {
  display: none;
  position: absolute;
  left: 0;
  max-height: 1000px;
}

.menu .sub-menu.hide {
  display: none;
}

#primary-nav .sub-menu {
  background: #A0D468;
  min-width: 150px;
  z-index: 200;
}

#primary-nav .sub-menu li {
  border-bottom: 1px solid #7cb142;
}

#primary-nav .sub-menu li:last-child {
  border-bottom: 0;
}

#primary-nav .sub-menu .downarrow:before {
  content: '\25b8';
}

#primary-nav.mobile {
  display: none;
  position: absolute;
  top: 100%;
  background: #A0D468;
  width: 100%;
}

#primary-nav.mobile li {
  width: 100%;
  margin: 0;
  border-bottom: 1px solid #7cb142;
}

#primary-nav.mobile li.selected > a {
  border-bottom: 1px solid #7cb142;
}

#primary-nav.mobile li:last-child {
  border: none;
}

#primary-nav.mobile li a {
  padding: 5%;
}

#primary-nav.mobile .sub-menu li a {
  padding-left: 7%;  
}

#primary-nav.mobile .sub-menu .submenu li a {
  padding-left: 9%;  
}

#primary-nav.mobile .sub-menu .sub-menu .sub-menu li a {
  padding-left: 11%;  
}

#primary-nav.mobile .sub-menu {
  float: left;
  position: relative;
  width: 100%;
}

.mobile .downarrow,
.mobile .sub-menu .downarrow {
  position: absolute;
  right: 0;
  padding-right: 5%;
}

#primary-nav.mobile .sub-menu .downarrow:before {
  content: '\25be';
}
#primary-nav-button.mobile {
  display: inline-block;
}
  
}
            
          
!
            
              /**
 * jquery.responsive-menu.js
 * jQuery + CSS Multi Level Responsive Menu
 */

jQuery(function($) {
  $.fn.responsivenav = function(args) {
    // Default settings
    var defaults = {
      responsive: true,
      width: 480,                           // Responsive width
      button: $(this).attr('id')+'-button', // Menu button id
      animation: {                          // Menu animation
        effect: 'slide',                    // Accepts 'slide' or 'fade'
        show: 150,
        hide: 100
      },
      selected: 'selected',                 // Selected class
      arrow: 'downarrow'                    // Dropdown arrow class
    };
    var settings = $.extend(defaults, args);
    
    // Initialize the menu and the button
    init($(this).attr('id'), settings.button);
    
    function init(menuid, buttonid) {
      setupMenu(menuid, buttonid);
      // Add a handler function for the resize and orientationchange event
      $(window).bind('resize orientationchange', function(){ resizeMenu(menuid, buttonid); });
      // Trigger initial resize
      resizeMenu(menuid, buttonid);
    }
    
    function setupMenu(menuid, buttonid) {
      var $mainmenu = $('#'+menuid+'>ul');
      
      var $headers = $mainmenu.find("ul").parent();
      // Add dropdown arrows
      $headers.each(function(i) {
        var $curobj = $(this);
        $curobj.children('a:eq(0)').append('<span class="'+settings.arrow+'"></span>');
      });
      
      if ( settings.responsive ) {
        // Menu button click event
        // Displays top-level menu items
        $('#'+buttonid).click(function(e) {
          e.preventDefault();
          
          if ( isSelected($('#'+buttonid)) ) {
            // Close menu
            collapseChildren('#'+menuid);
            animateHide($('#'+menuid), $('#'+buttonid));
          } else {
            // Open menu
            animateShow($('#'+menuid), $('#'+buttonid));
          }
        });
      }
    }
    
    function resizeMenu(menuid, buttonid) {
      var $ww = document.body.clientWidth;
      
      // Add mobile class to elements for CSS use
      // instead of relying on media-query support
      if ( $ww > settings.width || !settings.responsive) {
        $('#'+menuid).removeClass('mobile');
        $('#'+buttonid).removeClass('mobile');
      } else {
        $('#'+menuid).addClass('mobile');
        $('#'+buttonid).addClass('mobile');
      }
      
      var $headers = $('#'+menuid+'>ul').find('ul').parent();
      
      $headers.each(function(i) {
        var $curobj = $(this);
        var $link = $curobj.children('a:eq(0)');
        var $subul = $curobj.find('ul:eq(0)');
        
        // Unbind events
        $curobj.unbind('mouseenter mouseleave');
        $link.unbind('click');
        animateHide($curobj.children('ul:eq(0)'));
        
        if ( $ww > settings.width  || !settings.responsive ) {
          // Full menu
          $curobj.hover(function(e) {
            var $targetul = $(this).children('ul:eq(0)');
            
            var $dims = { w: this.offsetWidth,
                          h: this.offsetHeight,
                          subulw: $subul.outerWidth(),
                          subulh: $subul.outerHeight()
                        };
            var $istopheader = $curobj.parents('ul').length == 1 ? true : false;
            $subul.css($istopheader ? {} : { top: 0 });
            var $offsets = { left: $(this).offset().left, 
                             top: $(this).offset().top
                           };
            var $menuleft = $istopheader ? 0 : $dims.w;
            $menuleft = ( $offsets.left + $menuleft + $dims.subulw > $(window).width() ) ? ( $istopheader ? -$dims.subulw + $dims.w : -$dims.w ) : $menuleft;
            $targetul.css({ left:$menuleft+'px', 
                           width:$dims.subulw+'px' 
                          });
            
            animateShow($targetul);
          },
          function(e) {
            var $targetul = $(this).children('ul:eq(0)');
            animateHide($targetul);
          });
        } else {
          // Compact menu
          $link.click(function(e) {
            e.preventDefault();

            var $targetul = $curobj.children('ul:eq(0)');
            if ( isSelected($curobj) ) {
              collapseChildren($targetul);
              animateHide($targetul);
            } else {
              //collapseSiblings($curobj);
              animateShow($targetul);
            }
          });
        }
      });
      
      collapseChildren('#'+menuid);
      
      if ( settings.responsive && isSelected($('#'+buttonid)) ) {
        //collapseChildren('#'+menuid);
        $('#'+menuid).hide();
        $('#'+menuid).removeAttr('style');
        $('#'+buttonid).removeClass(settings.selected);
      }
    }
    
    function collapseChildren(elementid) {
      // Closes all submenus of the specified element
      var $headers = $(elementid).find('ul');
      $headers.each(function(i) {
        if ( isSelected($(this).parent()) ) {
          animateHide($(this));
        }
      });
    }
    
    function collapseSiblings(element) {
      var $siblings = element.siblings('li');
      $siblings.each(function(i) {
        collapseChildren($(this));
      });
    }
    
    function isSelected(element) {
      return element.hasClass(settings.selected);
    }
    
    function animateShow(menu, button) {
      if ( !button ) { var button = menu.parent(); }
      
      button.addClass(settings.selected);
      
      if ( settings.animation.effect == 'fade' ) {
        menu.fadeIn(settings.animation.show);
      } else if ( settings.animation.effect == 'slide' ) {
        menu.slideDown(settings.animation.show);
      } else {
        menu.show();
        menu.removeClass('hide');
      }
    }
    
    function animateHide(menu, button) {
      if ( !button ) { var button = menu.parent(); }
      
      if ( settings.animation.effect == 'fade' ) {
        menu.fadeOut(settings.animation.hide, function() { 
          menu.removeAttr('style');
          button.removeClass(settings.selected);
        });
      } else if ( settings.animation.effect == 'slide' ) {
        menu.slideUp(settings.animation.hide, function() { 
          menu.removeAttr('style');
          button.removeClass(settings.selected);
        });
      } else {
        menu.hide();
        menu.addClass('hide');
        menu.removeAttr('style');
        button.removeClass(settings.selected);
      }
    }
  };
});

jQuery(function ($) {
  $('#primary-nav').responsivenav();
  $('#top-nav').responsivenav({responsive:false});
});
            
          
!
999px
Loading ..................

Console