AWM Creative

jQuery Pop Menu

Published in jQuery by Aaron

I can’t tell you how long I’ve been trying to figure this out. I’ve been researching the jQuery pop menu for a long time and it seems to be popular on a lot of web sites. I thought it wouldn’t be hard to figure out but it turns out it was more difficult than expected. There weren’t many resources out there for this, so I decided to figure out the pop menu myself.

The Menu

So what is a pop menu? Actually, I’m not really sure if this is the “official” name for it, so I gave it that name myself. What’s really cool about these menus is that you can apply them to a single link. Here’s what happens:

• Menu pops up when a link is clicked.
• When the main menu link is clicked again the menu will disappear.
• If you click anywhere on the web page the menu will also disappear.

Here are some “pop menu” examples:

Used on AOL, Google, Facebook, and Yahoo! (These are expanded for show).

The trickiest part for me was figuring out how to close the menu if you clicked anywhere on the web page. After I figured out the basic concept the menu turned out to be a lot less complicated than I had originally thought. I came up with an easy solution with minimal code.

jQuery


<script type="text/javascript" language="javascript">
   $(document).ready(function(){
      $("a").click(function(event){
         $("ul.popOut").toggle();
         return false;
      });
      $("html").click(function(event){
         $("ul.popOut").hide();
      });
   });
</script>


The jQuery allows the menu to show and disappear. In order for this to work you will also need to download the jQuery Library.

As you can see, there are two click events. One of them shows the menu and the other hides it. Let’s take a look at the second click event.

This line of code $(“html”).click(function(event){ makes it possible to hide the menu while clicking anywhere on the page. That’s it and this was the hardest part to figure out!

CSS


body {
   font: 12px Arial, Helvetica, sans-serif;
}


Sets the global font styles.


a {
   color: #369;
   cursor: pointer;
   text-decoration: none;
}


In my XHTML, I’m using the <a></a> tags so I have to specify the cursor: pointer attribute to the link style.


a:hover {
   text-decoration: underline;
}


Adding the hover event for the main menu link.


ul.popMenu li {
   list-style: none;
}


The .popMenu class styles the main menu and the pop menu list style to none.


ul.popMenu ul.popOut {
   display: none;
   margin: 2px 0 0 0;
   padding: 0;
   width: 135px;
   background-color: #F4F4F4;
   border: solid 1px #DDD;
   border-bottom: none;
}


Above are the main pop menu styles. Nothing too special going on here.


ul.popMenu ul.popOut a {
   display: block;
   padding: 6px 15px 5px 15px;
   font: 11px Arial, Helvetica, sans-serif;
   color: #000;
   border-bottom: solid 1px #DDD;
}


Styles the links in the menu.


ul.popMenu ul.popOut a:hover {
   color: #FFF;
   text-decoration: none;
   background-color: #BAB;
}


The last part of the style, applies the hover.

(X)HTML


<ul class="popMenu">
   <li><a>More</a> <a><img src="images/icon_arrow.gif" alt="" /></a>
      <ul class="popOut">
         <li><a href="#">XHTML</a></li>
         <li><a href="#">CSS</a></li>
         <li><a href="#">jQuery</a></li>
      </ul>
   </li>
</ul>


The XHTML is pretty simple here. I used two standard lists with a class applied to each one. The pop menu is embedded in the main list so it still looks good when the CSS is disabled.

Well, that’s how it’s done. Not too much code to make this work, very light weight. What’s really great about the pop menu is that you can do a lot with it creatively. Be sure to check out the demo and source code below.

View Demo and Source Code

• Demo
• Source Code