Scott Granneman

panorama-024.jpg

How to Turn an Unordered List Into Dropdown Navigation

On this page…

    To see what we're going to ultimately create (although we're not using the code on these sites), take a look at the navigation on these sites that WebSanity has done:

    On this page we'll learn how to take an unordered (bulleted) list & turn it into a website's navigation. That's in fact what's going in all the examples above: each of those is just a plain ol' list that has been turned into useful, fast navigation using a combination of HTML, CSS, & JavaScript.

    Note that the following code is based on "Navigation menu with jQuery and nested unordered list", but it has been modified quite a bit.

    HTML

    Create a standard HTML5 webpage. For the content, create some paragraphs with Lorem Ipsum or use the content on my HTML & CSS Test Page. For the navigation, use this at the top of the <body>:

    <ul id="nav"> 
  <li>
    <a href="#">About</a> 
    <ul> 
      <li><a href="#">Mission</a></li>
      <li><a href="#">History</a></li>
      <li><a href="#">Organization</a></li>
      <li><a href="#">Board</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Visit</a> 
    <ul> 
      <li><a href="#">Things to See & Do</a></li>
      <li><a href="#">Hours, Directions, Prices</a></li>
      <li><a href="#">Daily Schedule</a></li>
      <li><a href="#">Services</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Animals</a> 
    <ul> 
      <li><a href="#">About the Animals</a></li>
      <li><a href="#">Veterinary Services</a></li>
      <li><a href="#">Food & Nutrition</a></li>
      <li><a href="#">Science & Research</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Events</a> 
    <ul> 
      <li><a href="#">Calendar</a></li>
      <li><a href="#">Rent the Zoo</a></li>
      <li><a href="#">Birthday Parties</a></li>
    </ul>
  </li>
  <li>
    <a href="#">Membership</a> 
    <ul> 
      <li><a href="#">Benefits & Membership Levels</a></li>
      <li><a href="#">Gift Memberships</a></li>
      <li><a href="#">Join or Renew</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>
  </li>
</ul>

    Go ahead & look at your webpage so far. Instead of navigation, you should see a fairly long nested unordered list at the top of the page. Let's fix that.

    CSS

    First let's set the default font for the page (I know, I know—not exciting, but this is just a demo):

    html {
  font-family: Verdana, sans-serif;
  font-size: 16px;
}

    And now here's the CSS for the overall list:

    #nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

    And now the first tier of the list/navigation:

    #nav li {
  float: left;
  display: block;
  background: #4B4B4B;
  position: relative;
  z-index: 500;
  margin: 0 1px;
}

#nav li a {
  display: block;
  padding: 6px 5px 0 5px;
  font-weight: 700;
  height: 20px;
  text-decoration: none;
  color: #fff;
  text-align: center;
}

    And now the second tiers of the list/navigation. Note that our CSS hides these by default while absolutely positioning them so that they appear (when they do finally appear) directly under their parents, the first tier items.

    #nav ul {
  position: absolute;
  left: 0;
  display: none;
  margin: 0 0 0 -1px;
  padding: 0;
  list-style: none;
}

#nav ul li {
  float: left;
  border-top: 1px solid #fff;
  width: 100%;
  white-space: nowrap;
}

#nav ul a {
  display: block;
  height: 15px;
  padding:  6px 5px;
  color: #fff;
  text-align: left;
}

    And now the links, which have their underlines removed & a color applied, so they look less like links in a list & more like buttons in navigation:

    #nav a:hover {
  text-decoration: none;
  background-color: #F86808;
}

    JavaScript

    To get the second tier to appear, we use JavaScript, specifically jQuery.

    jQuery

    For information on integrating jQuery, follow the instructions at Adding jQuery to Your Projects.

    From list to navigation

    Now for the JavaScript that specifically turns our list into dropdown navigation. On the webpage that originally gave me the code for this task, the author provided this code (I've cleaned & reformatted it1):

    <script>
    $(document).ready(function () {
        $('#nav li').hover(
        function () {
            //show submenu
            $('ul', this).slideDown("fast");
        }, function () {
            //hide submenu
            $('ul', this).slideUp("fast");
        });
    });
</script>

    That code uses the jQuery slideDown & slideUp methods, which are unnecessary and, frankly, slow. To see what I'm talking about, feel free to try it out.

    Instead, use this:

    <script>
    $(document).ready(function () {
        $('#nav li').hover(
        function () {
            //show submenu
            $('ul', this).show();
        }, function () {
            //hide submenu
            $('ul', this).hide();
        });
    });
</script>

    Instead of slideDown we use show; instead of slideUp we use hide. show & hide are instantaneous (so we don't need the "fast"), so things are much more responsive for the user, which is always a good thing.

    1. I found this nice tool to format & prettify JavaScript: jsbeautifier. It's quite nice. I haven't tested its prettified HTML, so I have no idea if it's good or not. ↩

    WebSanity Top Secret