Select Input/Combobox Based Navigation

select-navigation

What is it?

An easy way to build a simple menu using the select input element, also known as the combobox.

The HTML

The HTML is just about as basic as it gets, a simple select input element is all that’s needed. I’ve added a selected=selected to specify the default field and used target URLs for the values h to keep thing simple and clean.

1
2
3
4
5
6
7
<select id="selectNavigator">
  <option selected="selected">Choose your Destination</option>
  <option value="/resume/">Resume</option>
  <option value="/contact/">Contact</option>
  <option value="/portfolio/">Portfolio</option>
  <option value="/links/">Links</option>
</select>

The Javascript

Our simple function uses the window.location syntax to navigate to the url designated in each option elements value.

1
2
3
4
5
<script type="text/javascript">
    $("#selectNavigator").change(function (e) {
        window.location.href = this.options[this.selectedIndex].value;
    });
</script>

The Demo

Simple but effective an easy to use:

Prettying it up

The Chosen jQuery plugin from Harvest is a great way to improve your select box UI, and the search/autocomplete function is marvelous for longer lists of links.

We do have a slight problem with the various methods that can be used to select a destination, change just doesn’t quite cut it. Instead I’ve added a trigger so we can reliably be transported to the selected item.

Finally, I’ve used get_archives to fetch my WordPress archives.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script src="/js/chosen.jquery.min.js" /></script>
<link rel="Stylesheet" href="/js/chosen.css" />

<select id="fancyNavigate" class="chosen" data-placeholder="Browse My Archives">
  <option></option>
  <?php wp_get_archives( 'type=monthly&format=option&show_post_count=1' ); ?>
</select>
<a href="#" id="go" class="button-blue">Go!</a>

<script type="text/javascript">
    $("#go").click(function() {
      var locate = $('#fancyNavigate').val();
      $(location).attr('href',locate);
     return false;
    });
  $(".chosen").chosen();
</script>

Go!

This entry was posted in Snippets and Demos.