RSS
 

Dynamic Drop-Down Navigation Menu Like Wired.com’s

24 Apr

A friend recently asked me for a tip on how to create a dynamic pop-up menu like the one used on the main navigation bar of Wired.com. It’s a pretty typical implementation of a menu that pops open when the user hovers over a navigation tab, but I thought I’d share the solution I came up with.

This is a screenshot of what the menu currently looks like at Wired.com:


And this is a screenshot of the menu I created:

I just used a bit of straightforward CSS and jQuery JavaScript to get it done. Below is the code and a functional demo for your viewing pleasure. Admittedly it’s not the most elegant solution, but it suffices and provides the bare essentials that can be tweaked to suit your liking.

CSS

#navbar {
  width: 100%;
  height: 25px;
  background: #000;
}

#navbar > ul {
  list-style: none;
}

#navbar > ul > li {
  float: left;
  display: inline-block;
}

#navbar > ul > li > a {
  display: block;
  color: #fff;
  padding: 5px 20px;
  text-align: center;
}

#navbar > ul > li > a:hover, #navbar > ul > li > a.open {
  background: #888;
}

#navbar .dropdown {
  display: none;
  position: absolute;
  margin-top: -2px;
  background: #fafafa;
  border: 3px solid #aaa;
  padding: 5px;
  padding-left: 0;
}

#navbar .dropdown ul {
  list-style-type: none;
  display: inline-block;
  float: left;
  margin: 0 0 0 5px;
  padding: 0;
}

#navbar .dropdown ul li {
  border-bottom: 1px solid #aaa;
  margin: 0;
  padding: 0;
}

/* would use :last-child but IE doesn't recognize it */
#navbar .dropdown ul li.last {
  border: 0;
}

#navbar .dropdown ul li a {
  display: block;
  min-width: 100px;
  padding: 3px 5px 3px 10px;
  margin: 1px 0;
  font-weight: normal;
  font-size: 0.85em;
}

#navbar .dropdown ul li a:hover {
  background: #eee;
}

HTML

<div id="navbar"> 
  <ul> 
    <li> 
      <a href="#">Apple</a> 
      <div class="dropdown"> 
        <ul> 
          <li><a href="#">Column A #1</a></li> 
          <li><a href="#">Column A #2</a></li> 
          <li><a href="#">Column A #3</a></li> 
          <li><a href="#">Column A #4</a></li> 
          <li class="last"><a href="#">Column A #5</a></li> 
        </ul> 
        <ul> 
          <li><a href="#">Column B #1</a></li> 
          <li><a href="#">Column B #2</a></li> 
          <li><a href="#">Column B #3</a></li> 
          <li><a href="#">Column B #4</a></li> 
          <li class="last"><a href="#">Column B #5</a></li> 
        </ul> 
      </div> 
    </li> 
    <li> 
      <a href="#">Banana</a> 
      <div class="dropdown"> 
        <ul> 
          <li><a href="#">Column A #1</a></li> 
          <li><a href="#">Column A #2</a></li> 
          <li><a href="#">Column A #3</a></li> 
          <li><a href="#">Column A #4</a></li> 
          <li class="last"><a href="#">Column A #5</a></li> 
        </ul> 
        <ul> 
          <li><a href="#">Column B #1</a></li> 
          <li><a href="#">Column B #2</a></li> 
          <li><a href="#">Column B #3</a></li> 
          <li><a href="#">Column B #4</a></li> 
          <li class="last"><a href="#">Column B #5</a></li> 
        </ul> 
      </div> 
    </li> 
    <li> 
      <a href="#">Cherry</a> 
      <div class="dropdown"> 
        <ul> 
          <li><a href="#">Column A #1</a></li> 
          <li><a href="#">Column A #2</a></li> 
          <li><a href="#">Column A #3</a></li> 
          <li><a href="#">Column A #4</a></li> 
          <li class="last"><a href="#">Column A #5</a></li> 
        </ul> 
        <ul> 
          <li><a href="#">Column B #1</a></li> 
          <li><a href="#">Column B #2</a></li> 
          <li><a href="#">Column B #3</a></li> 
          <li><a href="#">Column B #4</a></li> 
          <li class="last"><a href="#">Column B #5</a></li> 
        </ul> 
      </div> 
    </li> 
    <li> 
      <a href="#">Durian</a> 
      <div class="dropdown"> 
        <ul> 
          <li><a href="#">Column A #1</a></li> 
          <li><a href="#">Column A #2</a></li> 
          <li><a href="#">Column A #3</a></li> 
          <li><a href="#">Column A #4</a></li> 
          <li class="last"><a href="#">Column A #5</a></li> 
        </ul> 
        <ul> 
          <li><a href="#">Column B #1</a></li> 
          <li><a href="#">Column B #2</a></li> 
          <li><a href="#">Column B #3</a></li> 
          <li><a href="#">Column B #4</a></li> 
          <li class="last"><a href="#">Column B #5</a></li> 
        </ul> 
      </div> 
    </li> 
    <li> 
      <a href="#">Elephant</a> 
      <div class="dropdown"> 
        <ul> 
          <li><a href="#">Column A #1</a></li> 
          <li><a href="#">Column A #2</a></li> 
          <li><a href="#">Column A #3</a></li> 
          <li><a href="#">Column A #4</a></li> 
          <li class="last"><a href="#">Column A #5</a></li> 
        </ul> 
        <ul> 
          <li><a href="#">Column B #1</a></li> 
          <li><a href="#">Column B #2</a></li> 
          <li><a href="#">Column B #3</a></li> 
          <li><a href="#">Column B #4</a></li> 
          <li class="last"><a href="#">Column B #5</a></li> 
        </ul> 
      </div> 
    </li> 
  </ul> 
</div>

jQuery JavaScript

$("#navbar > ul > li > a").mouseover(function(){
  $("#navbar > ul > li > a").each(function(){
    $(this).removeClass('over open');
    $(this).next().removeClass('over').hide();
  });

  $(this).addClass('over open');
  $(this).next().show();
});
$("#navbar > ul > li > a").mouseout(function(){
  var a = $(this);
  a.removeClass('over');
  setTimeout(function(){
    if (a.hasClass('over') || a.next().hasClass('over')) return;
    a.removeClass('open');
    a.next().hide();
    }, 1000);
});
$("#navbar > ul > li > div.dropdown").mouseover(function(){
  $(this).addClass('over');
});
$("#navbar > ul > li > div.dropdown").mouseout(function(){
  var a = $(this);
  a.removeClass('over');
  setTimeout(function(){
    if (a.hasClass('over') || a.prev().hasClass('over')) return;
    a.prev().removeClass('open');
    a.hide();
    }, 1000);
});

Demonstration

 
 

77,394 views

Tags: , , , ,

Leave a Reply

 

 
  1. Jean-Michel DAIX - projet Web

    September 23, 2010 at 8:19 am

    The right CSS JQuery Wired Menu I was looking for. Thanks, you saved my project !

     
  2. George

    October 24, 2011 at 6:44 pm

    Excellent menu!
    Have one problem however.
    My dropdowns are created dynamically and may be of variable width. Item one could have 2 colums, item two may have 15 columns ect.
    How can i make the width to fit however many columns there may be?

     
  3. rommel

    October 24, 2011 at 7:05 pm

    George- It is actually already designed to allow you to insert dynamic contents, i.e., variable number of columns, variable items per column, variable width cells, etc.

    The only limitation the provided code has on size is to make each column a minimum of 100 pixels. Aside from that, it will grow to fit your contents. I’ve modified the “Durian” menu item in the demonstration so you can see an example drop-down.