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

This presented a couple of problems because, similar to an issue touched on in my last clog, the widgets needed to be inserted dynamically and that’s usually easier said than done. After a little bit of digging into how the widgets function, I was able to make them seemingly load normally on-the-fly.

Dynamic Facebook Share Button

Facebook share buttons are created in a couple of pieces. I started with the default widget code supplied by Facebook:

<a type="button_count" name="fb_share"
  href="http://www.facebook.com/sharer.php">Share</a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Understanding how to make this work dynamically first means understanding what exactly this code does. The <a> tag is clearly a link to Facebook’s share service where users can submit our page. The <script> tag loads a JavaScript object named FB.Share.

Failed Insertion

If you were to try inserting these bits of code dynamically, you’d discover in no time flat that it just won’t work. For example, this might look like a good idea, but it’s useless:

$("#somediv").append('<a type="button_count" name="fb_share" '+
  'href="http://www.facebook.com/sharer.php">Share</a>');
$("#somediv").append('<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" '+
  'type="text/javascript"></script>');

And you may even try it a little more manually by directly modifying the DOM:

a = document.createElement('a');
a.type='button_count';
a.name='fb_share';
a.href='http://www.facebook.com/sharer.php';
a.innerHTML = 'Share';
document.getElementById('somediv').appendChild(a);

s = document.createElement('script');
s.type='text/javascript';
s.src='http://static.ak.fbcdn.net/connect.php/js/FB.Share';
document.getElementById('somediv').appendChild(s);

But you’ll be disappointed by the results. A working solution required a little more digging.

Successful Buttonization

I opened Facebook’s JavaScript file and started sniffing around. Their code is designed to initialize all buttons on the page just once, which makes perfect sense. So the solution is to add the <a> tag as per the above but then manually force FB.Share to re-execute, thus turning our dynamically added link into a button. The required function call is rather simple:

if (typeof(FB.Share) != 'undefined') {// make sure it exists
  // FB.Share.onFirst();
  // *** UPDATE: 17 Aug 2011 - Thanks to zr0ck who informed
  // FB has modified their Share script ***
  // FB.Share.onFirst() no longer exists; you must now instead call:
  FB.Share.renderPass();
}

Just execute that after you’ve inserted your <a> link and it’ll become a pretty Facebook button.

Multiple Buttons Per Page

The above solution works splendidly, assuming that you use it on a URL specific to the content you’re sharing because FB.Share will by default use the address of the current page when adding to the user’s wall. However, if you are on a listing page where there are multiple content posts and the URL is not specific to any one of them (e.g., http://videosift.com), then every dynamic button you add will reference the same address.

Facebook provides a straightforward method for you to specify an alternate URL than the current one, which is to add a u variable to the query string of the link:

<a type="button_count" name="fb_share"
  href="http://www.facebook.com/sharer.php?u=SOMEURL">

However that method doesn’t work with our dynamic buttonizing for whatever reason. A little more sniffing through the FB.Share code reveals exactly how it determines what URL to use:

FB.Share {
//...
getUrl:function(a){return a.getAttribute('share_url')||window.location.href;}
//...
}

Aha- it checks for an attribute named share_url. So all we have to do is add that attribute to our link et voila, we’re in business!

<a type="button_count" name="fb_share"
  href="http://www.facebook.com/sharer.php" share_url="SOMEURL">

Dynamic Tweetmeme Retweet Button

Fortunately, the retweet button was much less involved than the FB share button, but also require just a little bit of digging. As described on tweetmeme’s widget page, the following is the code you’d typically want to use on a web page:

<script type="text/javascript">
tweetmeme_url = 'http://yoururl.com';
</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

As with the FB widget, attempting to insert this code into the DOM on-the-fly just results in failure. (I’ll spare you the sample broken code.) So I cracked open the button’s js code and investigated how it worked.

It turns out tweetmeme doesn’t use a lot of JS tomfoolery to make their widgets work. Instead, they insert a simple <iframe> and allow that to do all work, which makes it easy for us because all we have to do is insert the same type of iframe and we’re in business. So we did something like the following and it worked like a charm:

$("#somediv").append('<iframe frameborder="0" scrolling="no" height="61" width="50"
  src="http://api.tweetmeme.com/button.js?url='+SOMEURL+'"></iframe>');

Enjoy!