Select Menu JS Pattern

This is the same pattern as the non JS select menu. The only difference is that javascript, specifically jQuery, is being use to create the html for the select menu.

This keeps you from having to maintain 2 separate list of links. Something that's not so difficult with only a few links, but increasingly more difficult as the number of links increases.


The html is the same as the unordered list part of the regular select menu pattern.

  <ul id="demo-nav">
    <li><a href="">Back to Post</a></li>
    <li><a href="top-nav.html">Top-Nav</a></li>
    <li><a href="priority.html">Priority</a></li>
    <li><a href="select.html">Select Menu</a></li>
    <li class="current"><a href="select-js.html">Select Menu JS</a></li>

The jQuery

The css for this variation of the pattern is exactly the same as the non JS pattern. Instead here's the jQuery used to create the html for the select menu.

The code comes from a post by Chris Coyier on CSS-Tricks

$(function() {
  // Create the dropdown base
  $("<select id='select-menu'/>").appendTo("nav");
  // Create default option "Select"
  $("<option />", {
    "selected"  :  "selected",
    "value"     :  "",
    "text"      :  "Select"
  }).appendTo("nav select");
  // Populate dropdown with menu items
  $("nav a").each(function() {
    var el = $(this);
    $("<option />", {
      "value"   :  el.attr("href"),
      "text"    :  el.text()
    }).appendTo("nav select");
  $("nav select").change(function() {
    window.location = $(this).find("option:selected").val();


See the tips for the Select Menu for when you might want to use this pattern in general. Whether or not you choose to use the jQuery above to create the select menu is another matter.

Unless you're sure your visitors won't be using javacript, it makes sense to use it to create the select menu. You'll likely have more than a few links to want to choose this pattern in the first place and we all know how easy it is to forget to update something.