jQuery select and go menu

by

A small jQuery select (or drop down) and go menu that is SEO, accessible and can be broken link checked.

This is probably 5 years out of date, but there may still be old school people that like to use drop down menus for navigation especially within Intranets.

I wouldn’t recommend using drop down menus as there are a number of usability problems with drop down menus.

There are a number of problems associated with this type of navigation you might not be aware of which are easy to overcome.

  • rely on JavaScript: use progressive enhancement instead
  • are not normal links which search engines ignore and can’t be checked: make it a normal link first

This quick little script that you are free to use on your site without any restrictions takes into account all of these problems.

Every select and go menu is first laid out in plain HTML as a list of links:

<ul class="select-n-go">
	<li><a href="http://www.google.com.au/">Google</a></li>
	<li><a href="http://www.bing.com/">Bing</a></li>
</ul>

This can be broken link checked, followed by search engines and works without JavaScript. A little bit of jQuery detects this list, makes it into a select and go menu and hides the original list.

$(document).ready(function(){
	$('ul.select-n-go').each(function(){
		var form = '</pre>
<form class="select-n-go" action="#"><select title="Select and go">'; $(this).find('li a').each(function(){ form += '</select>
<select title="Select and go"><option value="' + $(this).attr('href') + '">' + $(this).text() + '<\/option>'; }); form += '<\/select></option></select><input class="go-btn" type="submit" value="Go" />
<select title="Select and go"><option value="' + $(this).attr('href') + '"><\/form>'; $(this).after(form); $('form.select-n-go').live('submit', function(e){ document.location = $(this).find('option:selected').val(); e.preventDefault(); }); $(this).hide(); // the original list is now hidden }); });</option></select>
 
</form>

You will need to style the non-JavaScript enabled list of links and the JavaScript result (the drop down and button).

Leave a Comment