Return to Snippet

Revision: 59031
at August 14, 2012 12:31 by robjacoby


Updated Code
/* --------------------------------------------------------	
	Responsible navigation
   --------------------------------------------------------	*/	
(function() {

    var $mainNav    = $('.navbar .nav'),
    responsibleNav = '<option value="" selected>Navigate...</option>';

    // Responsive nav
    $mainNav.find('li').each(function() {
      var $this   = $(this),
      $link = $this.children('a'),
      depth   = $this.parents('ul').length - 1,
      indent  = '';

      if( depth ) {
        while( depth > 0 ) {
          indent += ' - ';
          depth--;
        }
      }

      if ($link.text())
        responsibleNav += '<option ' + ($this.hasClass('active') ? 'selected="selected"':'') + ' value="' + $link.attr('href') + '">' + indent + ' ' + $link.text() + '</option>';

    }).end().after('<select class="nav-responsive">' + responsibleNav + '</select>');

    $('.nav-responsive').on('change', function() {
      window.location = $(this).val();
    });
			
  })();

Revision: 59030
at August 14, 2012 12:22 by robjacoby


Initial Code
/* --------------------------------------------------------	
	Responsible navigation
   --------------------------------------------------------	*/	
	
	(function() {

		var $mainNav    = $('.navbar .nav'),
			responsibleNav = '<option value="" selected>Navigate...</option>';

		// Responsive nav
		$mainNav.find('li').each(function() {
			var $this   = $(this),
				$link = $this.children('a'),
				depth   = $this.parents('ul').length - 1,
				indent  = '';

			if( depth ) {
				while( depth > 0 ) {
					indent += ' - ';
					depth--;
				}
			}

			if ($link.text())
				responsibleNav += '<option ' + ($this.hasClass('active') ? 'selected="selected"':'') + ' value="' + $link.attr('href') + '">' + indent + ' ' + $link.text() + '</option>';

		}).end().after('<select class="nav-responsive">' + responsibleNav + '</select>');

		$('.nav-responsive').on('change', function() {
			window.location = $(this).val();
		});
			
	})();

Initial URL


Initial Description
Adds a select navigation dropdown based off Twitters Bootstrap nav bar for use with mobile devices

Initial Title
Responsible Navigation

Initial Tags


Initial Language
JavaScript