Responsible Navigation


/ Published in: JavaScript
Save to your folder(s)

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


Copy this code and paste it in your HTML
  1. /* --------------------------------------------------------
  2. Responsible navigation
  3.   -------------------------------------------------------- */
  4. (function() {
  5.  
  6. var $mainNav = $('.navbar .nav'),
  7. responsibleNav = '<option value="" selected>Navigate...</option>';
  8.  
  9. // Responsive nav
  10. $mainNav.find('li').each(function() {
  11. var $this = $(this),
  12. $link = $this.children('a'),
  13. depth = $this.parents('ul').length - 1,
  14. indent = '';
  15.  
  16. if( depth ) {
  17. while( depth > 0 ) {
  18. indent += ' - ';
  19. depth--;
  20. }
  21. }
  22.  
  23. if ($link.text())
  24. responsibleNav += '<option ' + ($this.hasClass('active') ? 'selected="selected"':'') + ' value="' + $link.attr('href') + '">' + indent + ' ' + $link.text() + '</option>';
  25.  
  26. }).end().after('<select class="nav-responsive">' + responsibleNav + '</select>');
  27.  
  28. $('.nav-responsive').on('change', function() {
  29. window.location = $(this).val();
  30. });
  31.  
  32. })();

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.