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.

0 0 votes
Article Rating
in JavaScript, jQuery
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Scott
Scott
5 years ago

Hello, I enjoyed this topic and it works well for links. Have you ever done this with checkboxes in like this?

 
Advertising