jQuery菜单插件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文件

<script src="Jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="superfish.js" type="text/javascript"><!--mce:1--></script>

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

<ul class="sf-menu">
 <li><a href="#aa">menu item that is quite long</a></li>
 <li class="current">
    <a href="#ab">menu item →</a>
<ul>
 <li class="current"><a href="#">menu item</a></li>
 <li><a href="#aba">menu item</a></li>
 <li><a href="#abb">menu item</a></li>
</ul>
</li>
</ul>

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

  $(document).ready(function(){
  $("ul.sf-menu").superfish({
    hoverClass:  'sfHover', //当鼠标掠过时的class
    pathClass:   'overideThisToUse', // 激活的菜单项的class
    pathLevels:  1,    // 菜单级数
    delay:     800,    // 下拉菜单在鼠标离开时自动隐藏时间。默认是800毫秒
    animation:   {opacity:'show'}, // 动画效果，参考Jquery的动画jQuery's .animate()
    speed:     'normal',  // 动画速度， 参考Jquery的动画jQuery's .animate()
    dropShadows:  true,   // 阴影效果，关闭用‘false'
    onInit:    function(){},  // 初始化的回调函数
    onBeforeShow: function(){}, // 子菜单显示前回调函数
    onShow:    function(){}, // 子菜单显示时回调函数
    onHide:    function(){}  // 子菜单隐藏时回调函数
  });
 });

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • 分享14个很酷的jQuery导航菜单插件

    分享14个很酷的jQuery导航菜单插件

    导航按钮是网站的非常重要的一部分,因其将网站的所有部分而集中一处,jQuery导航菜单插件在其中扮演重要的角色. 本文介绍了14个很酷的jQuery导航菜单插件,它们够漂亮.简单,并且完全兼容各种类型的web浏览器. 1.Facets Navigation Demo | Download 2.Rocking & Rolling Demo | Download 3.Garage Door Menu Demo | Download 4.Little Boxes Menu Demo | Downloa

  • jquery插件之easing 动态菜单

    很简单的一个效果插件,但不是经常用,怕忘了,以后在用又要去看文档,所以现在把笔记写下来,方便以后 复制代码 代码如下: <script> $(function(){ $.easing.def="easeInQuad";//设置默认效果 var callback=function (){ alert("ok"); } $("#t1").animate({ "top":600 },{duration: 3000, ea

  • 学习从实践开始之jQuery插件开发 菜单插件开发

    学习从实践开始之jQuery插件开发 菜单插件开发

    虽然这不是多么高深的技术,但对于新手来说还是颇有难度.如果你是一个新手,我希望你能从本文中学到东西:如果你是高手,我希望你能留下你宝贵的意见和建议 一.要做什么插件? 我想要实现一个可以在网站或WEB应用系统中使用,可以灵活的定制外观.简单.易于使用.方便扩展.稳定的菜单插件.它可以被用在网站主导航条上,亦可以用在管理后台. 二.想要的效果是什么? 平时菜单处于收起状态,当鼠标移入显示其下级菜单,以此类推:可以方便的使用html标签设置菜单的结构,也可以使用数组动态生成. 三.设计一下功能 对图

  • jquery实现右键菜单插件

    jquery实现右键菜单插件

    今天开发一个项目的时候需要一个模拟鼠标右键菜单的功能.也就是在网页点击鼠标右键的时候不是弹出系统的菜单而是我们制定的内容.这样可以拓展右键的功能.实现过程不多说了,写出来的代码和效果如下: js部分: 复制代码 代码如下: //创建右键菜单 var epMenu={     create:function(point,option){         var menuNode=document.getElementById('epMenu');         if(!menuNode){   

  • 15款优秀的jQuery导航菜单插件分享

    15款优秀的jQuery导航菜单插件分享

    1. Apple Menu Style 2. Color Fading Menu 3. Animated Drop Down Menu 4. Random Link Color 5. Scrollable 6. Moo Tool Homepage like 7. Animated Menu 8. jqDock Menu 9. Sliding jQuery Menu 10. CSS Mac Book Menu 11. Kwicks 12. Fading Menu with Content Repl

  • 基于jQuery插件实现环形图标菜单旋转切换特效

    feature.presenter.1.5.css body { margin: 0; font-family: Tahoma; } .feature-presenter { position: absolute; } .feature-presenter-icon { background-color: white; text-align: center; transition: transform 0.7s cubic-bezier(0.445, 0.05, 0.55, 0.95); -we

  • 使用jquery菜单插件HoverTree仿京东无限级菜单

    使用jquery菜单插件HoverTree仿京东无限级菜单

    效果图: 看了上面效果图,你或许已经明白为什么是仿京东菜单.如果还不明白,请访问http://list.jd.com/list.html?cat=9987,653,655 看看左上的菜单.当然这个HoverTree菜单的功能更加强大,可以实现无限级菜单. HTML代码: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>HoverTree - jquery菜单插件</title> <base t

  • jQuery菜单插件用法实例

    本文实例讲述了jQuery菜单插件用法.分享给大家供大家参考.具体如下: 这里要分享的是一个菜单插件,在http://plugins.jquery.com/keleyi/ 看到的,使用找个插件可以制作页面底部向上弹出的菜单,不一定在页底,还有多种其他方式. jQuery菜单插件js文件: /*! * Keleyi(jQuery Menu) * version: 0.1.6 * Copyright (c) 2013 KeLeyi */ (function ($) { $.fn.keleyi = f

  • jQuery多级弹出菜单插件ZoneMenu

    ZoneMenu是一个菜单jQuery插件,只需占用页面上的一个小区域,却可以实现多级菜单. 完整HTML文件代码: 复制代码 代码如下: <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ZoneMenu- jquery plugin<

  • jQuery菜单插件superfish使用指南

    下载地址:http://plugins.jquery.com/project/Superfish 文档说明:http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started Superfish的一些特点及效果: 使用纯Css实现动态效果,跨浏览器,支持最烂浏览器IE6 可设置下拉菜单在鼠标离开时自动隐藏时间.默认是800毫秒 支持淡入淡出动画 支持键盘响应 对含有子菜单的母菜单自动加入提示箭头 支持阴影效果,但需要有好的浏览器支

  • jQuery验证插件validation使用指南

    在网站开发过程中,有时我们需要验证用户输入的信息是否符合我们的要求,所以我们会对用户提交的数据进行验证.验证分两次进行,一次是在客户端,一次是在服务端.客户端的验证可以提升用户的体验. jquery验证插件有很多,实现的功能也基本相同.本文介绍的只是jquery验证插件中的一种jquery.validate jquery.Validation是一款优秀的jquery插件,它能对客户端表单进行验证,并且提供了许多可以定制的属性和方法,良好的扩展性. 1.jquery.validate插件功能 简单

  • JQuery右键菜单插件ContextMenu使用指南

    JQuery右键菜单插件ContextMenu使用指南

    插件下载地址: http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.js 压缩版: http://www.trendskitchens.co.nz/jquery/contextmenu/jquery.contextmenu.r2.packed.js Jquery主页:   http://jquery.com/ 通过此插件可以在不同的html元素内建立contextmenu,并且可以自定义样式. 复制代码

  • jQuery背景插件backstretch使用指南

    一.backstretch插件功能 优化网站外观.主要用于设置页面背景图片,也可以设置html元素的背景图片.背景图片可以设置多张,在间隔时间内循环显示. 注 但是在设置背景图片时,如果图片过大,网站使用的资源又受到限制时,应压缩图片的大小.不然图片的加载会非常缓慢.我测试了官方网站的demo,图片都比较大,有的图片在400kb以上,在虚拟空间中打开网站,图片加载有点慢. 插件demo的截图效果不明显,所以不在本文贴出,大家可以去官方看demo演示,或在本文的下面,也有我测试这个插件的用例,可以

  • jQuery滚动条插件nanoscroller使用指南

    jQuery滚动条插件nanoscroller使用指南

    网站在展示信息时,如果信息量过大,解决方法主要有三种.1.分页,将信息分页显示.2.整页显示,但是页面过长,影响浏览体验.3.使用滚动条,而默认滚动条样式太单一,用户体验不友好.所以我们需要美化滚动条. 美化滚动条最简单的方式就是使用jquery插件,本文介绍的就是jquery插件中的滚动条插件nanoscroller. 官方展示,样式可自定义 1.nanoscroller插件功能 对内容实现滚动功能 2.nanoscroller官方地址 http://jamesflorentino.githu

  • jQuery提示插件alertify使用指南

    jQuery提示插件alertify使用指南

    1.alertify插件功能 主要实现提示功能,用于代替js中的alert,confirm,prompt,显示友好的提示框 2.alertify使用方法 1.使用的文件 主要使用三个文件,两个css(alertify.core.css,alertify.default.css),用于设置提示框的样式.一个js(alertify.min.js或alertify.js),用于实现提示框的功能. 2.实现提示框代码 alertify使用非常简单,主要步骤为:初始化(初始化alertify)->绑定(绑

  • jQuery标签编辑插件Tagit使用指南

    jQuery标签编辑插件Tagit使用指南

    一.Tagit插件功能 提高网站交互性,增加用户体验.至于其它的功能,还真没有.用一个input text就可以替换了它.但是text没有输入提示功能,而tagit拥有这个功能.官方示例如下图: 将关键词标签化,成为一个整体.方便删除与浏览. 二.Tagit官方地址 http://aehlke.github.io/tag-it/ 官方地址上有使用说明,也有用例.用例的颜色搭配也可以选择.不过选来选去也就是这几种,Tagit插件使用jqueryui,所以jqueryui提供的样式也兼容.jquer

随机推荐