SuperFish一款基于jQuery的级联下拉菜单

32 sec read

Superfish的简介:Superfish是Suckerfish菜单样式的加强版。两者都是基于jQuery,结合现有纯CSS级联下拉菜单,还增加了以下这些网站管理员急需的功能。

1.Superfish样式在IE 6支持悬停(hover属性),增加的默认类为”sfHover”,你也可以改变类名。

2.鼠标移动的延时功能。为了更方便解决鼠标存在问题的朋友,默认延时为800毫秒,你也可以更改延时时间。

3.子菜单以动画显示。显示是是淡入淡出效果。淡入淡出的效果(如速度)也是可以自己设定的。默认为正常(normal)

4.菜单和子菜单可设定为显示或不显示。

5.支持hoverIntent插件,Superfish自动查看是否含有hoverIntent插件,在有hoverIntent插件的情况下执行hoverIntent而忽视淡入淡出效果。如果基于某种原因在你使用superfish时不想使用hoverIntent,将disableHI设置为“ true”。

6.显示是否含有子菜单,可动过菜单添加一张小图片,你也可用通过改变“autoArrows”值来设定是否自动弹出子菜单。

7.阴影效果,仅支持最新浏览器。在IE6下没什么效果。

8.可突出显示当前所在页

Superfish的用法

1.制作一个纯CSS目录

2.将下面内容添加到你的网站

//link to the CSS files for this menu type
<link rel=”stylesheet” type=”text/css” media=”screen” href=”superfish.css” />
 
// link to the JavaScript files (hoverIntent is optional)
<script type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js“></script>
<script type=”text/javascript” src=”hoverIntent.js”></script>
<script type=”text/javascript” src=”superfish.js”></script>
 
// initialise Superfish
<script type=”text/javascript”>
 
    $(document).ready(function() {
        $(‘ul.sf-menu’).superfish({
            delay:       1000,                            // one second delay on mouseout
            animation:   {opacity:’show’,height:’show’},  // fade-in and slide-down animation
            speed:       ‘fast’,                          // faster animation speed
            autoArrows:  false,                           // disable generation of arrow mark-up
            dropShadows: false                            // disable drop shadows
        });
    });
 
</script>

效果请看本网站上部分导航栏

官方网址:http://users.tpg.com.au/j_birch/plugins/superfish/

打赏作者
微信支付标点符 wechat qrcode
支付宝标点符 alipay qrcode

C语言学习:size_t

在学习C语言的时候,遇到了一个新的数据类型size_t,截止目前也没有完全理清这个类似的具体场景及出现的原因。
44 sec read

C语言学习:main()函数的正确写法

C语言虽然是一门古老的语言,但是其标准一直在完善,所以很多以前支持的语法在到当前已经不能在使用了。 C语言的版
41 sec read

Scipy数学函数的Scala实现

最近在推进项目的时候,遇到需要将线下的Python代码转化成线上的集群代码,由于机器代码环境是Scala,所以
4 min read

2 Replies to “SuperFish一款基于jQuery的级联下拉菜单”

  1. 你想说什么呢?请教:我用的是inove主题,没有什么代码知识,网上虽然有很多superfish的教程,但都说的不完整,我看你的导航菜单用上了superfish的,你有空能给我个完整的么?就是把代码放到哪个文件夹,然后再放到哪行代码下,我整了几天了,还是没整好。 可以的话,发到我的邮箱里。

  2. superfish生成的下拉菜单被select遮挡,请问怎么解决呢?

发表评论

电子邮件地址不会被公开。 必填项已用*标注