Superfish是一款Jquery插件,它能非常容易的建立复杂的多级下拉菜单,Superfish使用也非常普遍。你可能用Superfish实现多种菜单效果,鹭鹭设计室强烈推荐,本设计室博客导航菜单就是用Superfish实现。

下载地址:http://plugins.jquery.com/project/Superfish

文档说明:http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started

演示地址:http://www.chhua.com/yanshi/superfish.htm

Superfish的一些特点及效果:

  • 使用纯Css实现动态效果,跨浏览器,支持最烂浏览器IE6
  • 可设置下拉菜单在鼠标离开时自动隐藏时间。默认是800毫秒
  • 支持淡入淡出动画
  • 支持键盘响应
  • 对含有子菜单的母菜单自动加入提示箭头
  • 支持阴影效果,但需要有好的浏览器支持,如Firefox,chrome…最烂浏览器IE6就免了
  • 可选回调js函数

使用说明

Superfish是一款Jquery插件,它能非常容易的建立复杂的多级下拉菜单,Superfish使用也非常普遍。你可能用Superfish实现多种菜单效果,鹭鹭设计室强烈推荐,本设计室博客导航菜单就是用Superfish实现。
?

下载地址:http://plugins.jquery.com/project/Superfish

文档说明:http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started

Superfish的一些特点及效果:

  • 使用纯Css实现动态效果,跨浏览器,支持最烂浏览器IE6
  • 可设置下拉菜单在鼠标离开时自动隐藏时间。默认是800毫秒
  • 支持淡入淡出动画
  • 支持键盘响应
  • 对含有子菜单的母菜单自动加入提示箭头
  • 支持阴影效果,但需要有好的浏览器支持,如Firefox,chrome…最烂浏览器IE6就免了
  • 可选回调js函数

使用说明
1、1.首先,在页面中引入Jquery和Superfish文件

1
2
<span style="color: #339933"><</span>script src<span style="color: #339933">=</span><span style="color: #3366CC">"Jquery.js"</span> type<span style="color: #339933">=</span><span style="color: #3366CC">"text/javascript"</span><span style="color: #339933">><!--</span>mce<span style="color: #339933">:</span><span style="color: #CC0000">0</span><span style="color: #339933">--></</span>script<span style="color: #339933">></span>
<span style="color: #339933"><</span>script src<span style="color: #339933">=</span><span style="color: #3366CC">"superfish.js"</span> type<span style="color: #339933">=</span><span style="color: #3366CC">"text/javascript"</span><span style="color: #339933">><!--</span>mce<span style="color: #339933">:</span><span style="color: #CC0000">1</span><span style="color: #339933">--></</span>script<span style="color: #339933">></span>

2、2.其次,用ul li做菜单内容

1
2
3
4
5
6
7
8
9
10
11
<span style="color: #339933"><</span>ul <span style="color: #003366;font-weight: bold">class</span><span style="color: #339933">=</span><span style="color: #3366CC">"sf-menu"</span><span style="color: #339933">></span>
	<span style="color: #339933"><</span>li<span style="color: #339933">><</span>a href<span style="color: #339933">=</span><span style="color: #3366CC">"#aa"</span><span style="color: #339933">></span>menu <span style="color: #000066;font-weight: bold">item</span> that <span style="color: #000066;font-weight: bold">is</span> quite long<span style="color: #339933"></</span>a<span style="color: #339933">></</span>li<span style="color: #339933">></span>
	<span style="color: #339933"><</span>li <span style="color: #003366;font-weight: bold">class</span><span style="color: #339933">=</span><span style="color: #3366CC">"current"</span><span style="color: #339933">></span>
        <span style="color: #339933"><</span>a href<span style="color: #339933">=</span><span style="color: #3366CC">"#ab"</span><span style="color: #339933">></span>menu <span style="color: #000066;font-weight: bold">item</span> →<span style="color: #339933"></</span>a<span style="color: #339933">></span>
<span style="color: #339933"><</span>ul<span style="color: #339933">></span>
	<span style="color: #339933"><</span>li <span style="color: #003366;font-weight: bold">class</span><span style="color: #339933">=</span><span style="color: #3366CC">"current"</span><span style="color: #339933">><</span>a href<span style="color: #339933">=</span><span style="color: #3366CC">"#"</span><span style="color: #339933">></span>menu item<span style="color: #339933"></</span>a<span style="color: #339933">></</span>li<span style="color: #339933">></span>
	<span style="color: #339933"><</span>li<span style="color: #339933">><</span>a href<span style="color: #339933">=</span><span style="color: #3366CC">"#aba"</span><span style="color: #339933">></span>menu item<span style="color: #339933"></</span>a<span style="color: #339933">></</span>li<span style="color: #339933">></span>
	<span style="color: #339933"><</span>li<span style="color: #339933">><</span>a href<span style="color: #339933">=</span><span style="color: #3366CC">"#abb"</span><span style="color: #339933">></span>menu item<span style="color: #339933"></</span>a<span style="color: #339933">></</span>li<span style="color: #339933">></span>
<span style="color: #339933"></</span>ul<span style="color: #339933">></span>
<span style="color: #339933"></</span>li<span style="color: #339933">></span>
<span style="color: #339933"></</span>ul<span style="color: #339933">></span>

3、最后,创建初始化菜单并设置效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
   $<span style="color: #009900">(</span>document<span style="color: #009900">)</span>.<span style="color: #660066">ready</span><span style="color: #009900">(</span><span style="color: #003366;font-weight: bold">function</span><span style="color: #009900">(</span><span style="color: #009900">)</span><span style="color: #009900">{</span>
    $<span style="color: #009900">(</span><span style="color: #3366CC">"ul.sf-menu"</span><span style="color: #009900">)</span>.<span style="color: #660066">superfish</span><span style="color: #009900">(</span><span style="color: #009900">{</span>
       hoverClass<span style="color: #339933">:</span>    <span style="color: #3366CC">'sfHover'</span><span style="color: #339933">,</span>  <span style="color: #006600;font-style: italic">//当鼠标掠过时的class</span>
       pathClass<span style="color: #339933">:</span>     <span style="color: #3366CC">'overideThisToUse'</span><span style="color: #339933">,</span> <span style="color: #006600;font-style: italic">// 激活的菜单项的class</span>
       pathLevels<span style="color: #339933">:</span>    <span style="color: #CC0000">1</span><span style="color: #339933">,</span>       <span style="color: #006600;font-style: italic">// 菜单级数</span>
       delay<span style="color: #339933">:</span>         <span style="color: #CC0000">800</span><span style="color: #339933">,</span>       <span style="color: #006600;font-style: italic">// 下拉菜单在鼠标离开时自动隐藏时间。默认是800毫秒</span>
       animation<span style="color: #339933">:</span>     <span style="color: #009900">{</span>opacity<span style="color: #339933">:</span><span style="color: #3366CC">'show'</span><span style="color: #009900">}</span><span style="color: #339933">,</span>  <span style="color: #006600;font-style: italic">// 动画效果,参考Jquery的动画jQuery’s .animate()</span>
       speed<span style="color: #339933">:</span>         <span style="color: #3366CC">'normal'</span><span style="color: #339933">,</span>    <span style="color: #006600;font-style: italic">// 动画速度, 参考Jquery的动画jQuery’s .animate()</span>
       dropShadows<span style="color: #339933">:</span>   <span style="color: #003366;font-weight: bold">true</span><span style="color: #339933">,</span>     <span style="color: #006600;font-style: italic">// 阴影效果,关闭用‘false’</span>
       onInit<span style="color: #339933">:</span>        <span style="color: #003366;font-weight: bold">function</span><span style="color: #009900">(</span><span style="color: #009900">)</span><span style="color: #009900">{</span><span style="color: #009900">}</span><span style="color: #339933">,</span>   <span style="color: #006600;font-style: italic">// 初始化的回调函数</span>
       onBeforeShow<span style="color: #339933">:</span>  <span style="color: #003366;font-weight: bold">function</span><span style="color: #009900">(</span><span style="color: #009900">)</span><span style="color: #009900">{</span><span style="color: #009900">}</span><span style="color: #339933">,</span> <span style="color: #006600;font-style: italic">// 子菜单显示前回调函数</span>
       onShow<span style="color: #339933">:</span>        <span style="color: #003366;font-weight: bold">function</span><span style="color: #009900">(</span><span style="color: #009900">)</span><span style="color: #009900">{</span><span style="color: #009900">}</span><span style="color: #339933">,</span>  <span style="color: #006600;font-style: italic">// 子菜单显示时回调函数</span>
       onHide<span style="color: #339933">:</span>        <span style="color: #003366;font-weight: bold">function</span><span style="color: #009900">(</span><span style="color: #009900">)</span><span style="color: #009900">{</span><span style="color: #009900">}</span>   <span style="color: #006600;font-style: italic">// 子菜单隐藏时回调函数</span>
    <span style="color: #009900">}</span><span style="color: #009900">)</span><span style="color: #339933">;</span>
 <span style="color: #009900">}</span><span style="color: #009900">)</span><span style="color: #339933">;</span>