Jquery superfish menus plug-in

From http://www.electrictoolbox.com/jquery-superfish-menus-plugin /#

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 and in the next jquery post I show how I cache the parts of the menuthat are initially hidden with JavaScript so they don't need to be downloaded every page load. this latter aspect is very useful if it's a large menu structure.

Download superfish

There's an entry at the jquery website for the superfish plug-in with a download link here. also visit thesuperfish website itself for more examples and full documentation for the effects possible. I 've used the superfish menu with my own skin on the revised version of the healthy. co. NZ website; this new version will be made live in a few weeks.

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

<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 youclick through to this post to view it in a web browser.

Make menu vertical make menu horizontal

• Item 1»
• Item 2»
• Item 3»

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 ve changed the colors and fonts etc.