The Superfish jQuery plug-in creates Suckerfish style flyout menus from HTML unordered lists and is very easy to use. It can work entirely with CSS alone but the jQuery bits add some enhancements. This post demonstrates how simple it is to use.
Download Superfish
There’s an entry at the jQuery website for the Superfish plug-in with a download link here. Also visit the Superfish website itself for more examples and full documentation for the effects possible.
Example HTML
Here’s an example <ul> list that will be turned into a nice menu with Superfish.
<ul class="sf-menu">
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Subitem 1.1</a>
<ul>
<li><a href="#">Subitem 1.1.1</a></li>
<li><a href="#">Subitem 1.1.2</a></li>
<li><a href="#">Subitem 1.1.3</a></li>
</ul>
</li>
<li><a href="#">Subitem 1.2</a></li>
<li><a href="#">Subitem 1.3</a></li>
<li><a href="#">Subitem 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 2</a>
<ul>
<li><a href="#">Subitem 2.1</a></li>
<li><a href="#">Subitem 2.2</a></li>
<li><a href="#">Subitem 2.3</a></li>
<li><a href="#">Subitem 2.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a>
<ul>
<li><a href="#">Subitem 3.1</a></li>
<li><a href="#">Subitem 3.2</a></li>
<li><a href="#">Subitem 3.3</a></li>
<li><a href="#">Subitem 3.4</a></li>
</ul>
</li>
</ul>
Implementing Superfish
All you need to do to transform the above into a nice menu layout is add the following to the <head> section of your HTML template, where X.Y.Z are the appropriate version numbers and /path/to is replaced with the actual paths to the files:
<script language="javascript" src="/path/to/jquery-X.Y.Z.min.js"></script>
<link rel="stylesheet" type="text/css" href="/path/to/superfish.css" />
<link rel="stylesheet" type="text/css" href="/path/to/superfish-vertical.css" />
<script language="javascript" src="/path/to/superfish.js"></script>
<script language="javascript">
$(document).ready(function() {
$('ul.sf-menu').superfish();
});
</script>
superfish-vertical.css is only required if you want vertical menus instead of horizontal ones. You can also combine the CSS from these files into your main sylesheet instead if that is preferred or if you need to make a number of modifications for colors etc (like I did with healthy.co.nz)
Working example
Finally, here’s a working example using the above HTML, Javascript and CSS. This will not work if you are viewing this in an RSS reader (in which case you’ll just see the raw <UL> list); in this case make sure you click through to this post to view it in a web browser.
Conclusion
That’s all for this post. As I mentioned at the startof this post the next jQuery post looks at how I’ve implemented this with caching of the submenus; and once the new version of the healthy.co.nz website goes live I’ll write another superfish post looking at how I’ve changed the colors and fonts etc.