万博体育ManBetX手机版

欢迎访问

云南万博信息技术有限公司官方网站,云南网站建设诚信品牌!

万博网络,云南万博信息技术有限公司

万博客服热线

DING HAO COLUMN 万博专栏

万博的一些分享
Sharing from Ding Hao

  • 万博服务
  • 1

多级下拉菜单:superfish的应用

来源:     2013年07月02日17:02
字号:T|T

superfish是一款可以制作多级下拉菜单的jquery插件,支持水平和垂直方向的菜单,下拉的菜单不会被标签select遮挡,支持动态下拉效果,如垂直向下伸展,支持阴影效果(IE6除外),用户可定制样式。

查看演示DEMO 下载源码

主要特性:

如何使用?

1、准备Javascript及插件和CSS样式文件。


2、XHTML。


一定要注意XHTML的结构,上述代码中“...”是限于篇幅,表示相同的代码结构重复n次。

3、应用superfish插件。

$(function(){
   $("ul.sf-menu").superfish();
});

superfish插件常用参数一览表

参数 描述 默认值
hoverClass 鼠标滑向菜单项的样式 'sfHover'
pathClass 设置当前项的样式,页面初始一个当前选中状态的样式 'overideThisToUse'
delay 鼠标离开下拉展开的菜单,等待关闭菜单的时间(毫秒) 800
animation 菜单展示效果 {opacity:'show'}
speed 设置菜单展开速度,可以为'slow','fast','normal' 'normal'
disableHI 设置为true时,则不支持hoverIntent插件 true

superfish插件还可以支持回调函数,支持hoverIntent插件,在有hoverIntent插件的情况下执行hoverIntent而忽视淡入淡出效果。如果基于某种原因在你使用superfish时不想使用hoverIntent,将disableHI设置为 "true"。

此外当遇到select标签时,为了不让下拉菜单被select遮挡,需要调用另一个插件:bgiframe,使用方法:

$("ul.sf-menu").superfish().find('ul').bgIframe({opacity:false});


客服中心
点击进行在线咨询

QQ咨询 咨询QQ:79929313 咨询QQ:88139574 咨询QQ:122790803

咨询热线:0871-63399840

客服热线:0871-63523332

客服中心 客服中心