• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
The Electric Toolbox Blog

The Electric Toolbox Blog

Linux, Apache, Nginx, MySQL, Javascript and PHP articles

  • Applications
  • FCKEditor
  • Apache
  • Windows
  • Contact Us
Home / jQuery Superfish Menus Plug-in

jQuery Superfish Menus Plug-in

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.

Make menu vertical Make menu Horizontal
  • Item 1
    • Subitem 1.1
      • Subitem 1.1.1
      • Subitem 1.1.2
      • Subitem 1.1.3
    • Subitem 1.2
    • Subitem 1.3
    • Subitem 1.4
  • Item 2
    • Subitem 2.1
    • Subitem 2.2
    • Subitem 2.3
    • Subitem 2.4
  • Item 3
    • Subitem 3.1
    • Subitem 3.2
    • Subitem 3.3
    • Subitem 3.4

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.

Check Out These Related posts:

  1. Javascript and CSS file timestamps with PHP
  2. jQuery Facebox Basic Example
  3. Style HTML Anchor Titles with jQuery and CSS
  4. jQuery Superfish Menus Plug-in and Caching the menu

Filed Under: Javascript

Primary Sidebar

Categories

  • Apache
  • Applications
  • Article
  • Case Studies
  • Email Servers
  • FCKEditor
  • HTML And CSS
  • Javascript
  • Linux/Unix/BSD
  • Microsoft SQL Server
  • Miscellaneous Postings
  • MySql
  • Networking
  • Nginx Web Server
  • Offsite Articles
  • OSX
  • PHP
  • Quick Tips
  • RFC – Request for Comments
  • SilverStripe
  • VMWare
  • VPN
  • Windows
  • WordPress

Recent Posts

  • Vim Show Line Numbers
  • Add User To Group Linux
  • Chmod 777 Tutorial
  • How to Copy Directory Linux
  • Linux create user

Copyright © 2021. ElectricToolBox. All Rights Reserved.

  • Contact Us
  • Copyright Info
  • Privacy Policy
  • Sitemap