How to Add a Drop Down Menu to Your Web Page

Superfish jQuery Plugin
The more I use jQuery, the more I like it!

Today’s tip is how to use a jQuery plugin called Superfish to create a drop-down menu on your web page.

You can download the plugin and find more documentation for it here.

Once you’ve downloaded the plugin, you should move the css, images and js files to your website in the proper folders.

Add this code to the top of your web page in the head section:

<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/hoverIntent.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript">

  jQuery(function(){
    jQuery('ul.sf-menu').superfish();

  });

</script>

Now, you just need to build your menu with an unordered list in html and give the top ‘ul’ tag the class of ‘sf-menu’ like so:

<ul class="sf-menu">
  <li class="current">
    <a href="#a">menu item 1</a>
    <ul>
      <li>
        <a href="#aa">menu item inside a menu item</a>
      </li>
      <li>
        <a href="#ab">menu item</a>
        <ul>
          <li><a href="#">menu item three levels deep</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">another menu item</a>
  </li>
</ul>

Most of this example I pulled straight from the downloaded code for the plugin.

Building these types of menus with jQuery is certainly a lot easier than it used to be with plain javascript.

If you are curious where the name came from, I *think* Superfish is the jquery version of the original Suckerfish drop-down menu. Suckerfish was a drop-down menu built in javascript. I think it got it’s name from the example used for the first drop-down menu a ‘A List Apart‘.

1 thought on “How to Add a Drop Down Menu to Your Web Page”

  1. Pingback: Superfish jQuery Drop-Down Menu Not Working | webtips.cindycullen.com

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top