Convert UL to SELECT w/OPTGROUP

Converts a UL with list items into options in a SELECT - and works one level deep with nested lists. Original - Chris Coyier, CSS-tricks

HTML

<nav>

  <h1>Nav menu</h1><br/>

  <ul id="sitemap">
    <li><a href="www.google.com">Home</a></li>
    <li><a href="www.google.com">Small Business</a>
      <ul>
        <li><a href="www.google.com">Laptops</a></li>
        <li><a href="www.google.com">Workstations</a></li>
        <li><a href="www.google.com">Workstations</a></li>
        <li><a href="www.google.com">Printers</a></li>
        <li><a href="www.google.com">Mobile Phones</a></li>
      </ul>
    </li>
    <li><a href="www.google.com">Public Sector</a>
      <ul>
        <li><a href="www.google.com">State Government</a></li>
        <li><a href="www.google.com">Federal Government</a></li>
        <li><a href="www.google.com">Support and Drivers</a></li>
      </ul>
    </li>
    <li><a href="www.google.com">Large Enterprise</a>
      <ul>
        <li><a href="www.google.com">Services</a></li>
        <li><a href="www.google.com">Solutions</a></li>
      </ul>
    </li>
  </ul>

</nav>

CSS

ul li ul {
  padding-left: 20px;
}

.border {
  border: 1px solid red;
}

JavaScript

function sitemapCycle() {
  if (typeof(sitemapNode) === "undefined") sitemapNode = $("#sitemap");
  if ($(this).find("ul").length) {
    sitemapNode = $(sitemapNode).append('<optgroup label="' + $(this).children().first().text() + '" />').children().last();
    $(this).find("ul li").each(sitemapCycle);
    sitemapNode = $(sitemapNode).parent();
  } else {
    $(sitemapNode).append('<option value="' + $(this).children().attr("href") + '">' + $(this).text() + '</option>');
  }
}

var sitemapNode;

$("#sitemap").removeAttr("id").after('<select id="sitemap" />').children().each(sitemapCycle) /*.parent().remove()*/ ;

$("nav select").change(function() {
  window.location = $(this).find("option:selected").val();
});