jQuery Superfish Menus Plug-in

本文介绍如何利用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.

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值