jQuery Superfish Menus Plug-in

最新推荐文章于 2025-09-07 22:29:54 发布

转载最新推荐文章于 2025-09-07 22:29:54 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/javashi/archive/2010/01/23/1654575.html

文章标签：

#javascript #ViewUI

本文介绍如何利用Superfish jQuery插件从HTML无序列表中创建美观的下拉菜单。该插件易于使用，可以通过纯CSS实现基本功能，并通过jQuery增强效果。文章提供了具体的HTML示例代码以及如何在网页中引入Superfish所需的文件。

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

Make menu vertical Make menu Horizontal

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.

转载于:https://www.cnblogs.com/javashi/archive/2010/01/23/1654575.html