/ Published in: JavaScript
Adds a select navigation dropdown based off Twitters Bootstrap nav bar for use with mobile devices
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
/* -------------------------------------------------------- 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(); }); })();