Convert Unordered List to Select Navigation with jQuery

If you have an list of links in an unordered list, it’s easy to convert them to a select dropdown with this little chunk of code below. This will allow your navigation to work with or without JavaScript as they will gracefully degrade to an unordered list of links.

Add this to your JavaScript file…

$('ul.faux-select').each(function() {
	var list = $(this),
		select = $(document.createElement('select')).insertBefore($(this).hide());
	$('<li', this).each(function() {
		var ahref = $(this).children('a'),
			target = ahref.attr('target'),
			option = $(document.createElement('option'))
				.appendTo(select)
				.val(ahref.attr('href'))
				.html(ahref.html())
				.click(function() {
					if (option.val().length == 0) return;
					if (target === '_blank') {
						window.open(ahref.attr('href'));
					} else {
						window.location.href = ahref.attr('href');
					}
				});
		if (ahref.attr('class') === 'dlspb-selected') {
			option.attr('selected', 'selected');
		}
	});
});

You can then reference it by just adding the class “faux-select” to any UL that you want to convert.

This is a modification from the helpful script by Reigel.