allienworks
4/4/2015 - 2:31 PM

jQuery responsive <select> navigation – Transforms main nav to select element on small screens (Submenu's with a dash by Daryn St. Pierre -

jQuery responsive navigation – Transforms main nav to select element on small screens (Submenu's with a dash by Daryn St. Pierre - http://jsfiddle.net/bloqhead/Kq43X)

responsive-navigation.js
content_copyfile_download
jQuery('<select />').appendTo('.nav-main');

jQuery('<option />', {
    'selected': 'selected',
    'value'   : '',
    'text'    : 'Go to Page...'
}).appendTo('.nav-main select');

jQuery('.nav-main a').each(function() {
    var el = jQuery(this);
    if(el.parents('.sub-menu').length) {
        jQuery('<option />', {
            'value': el.attr('href'),
            'text':  '– ' + el.text()
        }).appendTo('.nav-main select');
    } else {
        jQuery('<option />', {
            'value': el.attr('href'),
            'text': el.text()
        }).appendTo('.nav-main select');
    }
});

jQuery('.nav-main select').change(function() {
    window.location = jQuery(this).find('option:selected').val();
});
without-submenus.js
content_copyfile_download
jQuery('<select />').appendTo('ul.menu');

jQuery('<option />', {
  'selected': 'selected',
  'value'   : '',
  'text'    : 'Menu'
}).appendTo('ul.menu select');
jQuery('ul.menu a').each(function() {
  var el = jQuery(this);
    jQuery('<option />', {
        'value': el.attr('href'),
        'text': el.text()
    }).appendTo('ul.menu select');
});

jQuery('ul.menu select').change(function() {
    window.location = jQuery(this).find('option:selected').val();
});