`
wbj0110
  • 浏览: 1602536 次
  • 性别: Icon_minigender_1
  • 来自: 上海
文章分类
社区版块
存档分类
最新评论

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

阅读更多

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/

分享到:
评论

相关推荐

    jquery.superfish.js下载

    SuperFish一款基于jQuery的级联下拉菜单 用法请看以下链接: http://blog.csdn.net/cheung1021/article/details/6700524

    superfish-1.4.8 jquery下拉菜单组件

    `Superfish` 是一个功能丰富的 jQuery 插件,专为创建响应式、易自定义的下拉菜单而设计。这个组件版本为 `1.4.8`,适用于创建水平或垂直布局的菜单,且具有避免被页面中的 `&lt;SELECT&gt;` 标签遮挡的特性。开发者可以...

    下拉菜单-JQUERY

    本文将深入探讨如何利用jQuery来创建功能丰富的下拉菜单。 一、jQuery简介 jQuery是由John Resig在2006年创建的一个开源项目,它的核心理念是"Write Less, Do More",即用更少的代码实现更多的功能。jQuery通过封装...

    jquery.superfish.js导航菜单插件制作无限极菜单

    jQuery Superfish插件是一款强大的、可扩展的导航菜单解决方案,尤其适用于创建具有无限级深度的下拉菜单。这篇文章将详细介绍如何使用jQuery Superfish插件来构建这种菜单。 首先,我们需要了解jQuery Superfish的...

    jquery.hoverIntent.js下载

    SuperFish一款基于jQuery的级联下拉菜单 使用方法: http://blog.csdn.net/cheung1021/article/details/6700524 jquery.superfish.js下载: http://download.csdn.net/source/3531532

    jquery 下拉菜单特效

    此外,还可以通过jQuery插件,如`bootstrap`或`superfish`,快速实现更专业、功能更强大的下拉菜单。 在提供的压缩包文件"dropdown"中,可能包含了示例代码、CSS样式和预览页面,供学习者参考和实践。通过下载并...

    superfish_1.4.8_能挡住下拉表单的CSS+JS下拉菜单.rar

    "Superfish 1.4.8" 是一个流行的JavaScript库,专门用于创建具有高级功能的下拉菜单。这个压缩包包含的资源可以帮助开发者构建出能够覆盖(或“挡住”)其他表单元素的CSS和JavaScript驱动的下拉菜单。下面我们将...

    Jquery网站导航级联菜单(Jquery1.8.1)

    jquery 网站导航菜单 横排下拉菜单 竖排下拉菜单

    jquery superfish插件菜单

    **jQuery Superfish插件**是一种广泛使用的JavaScript库,专门用于创建功能丰富、响应式的下拉菜单。这个插件是基于jQuery框架开发的,为网站的导航菜单提供了许多高级功能,如动画效果、悬停延迟、多级菜单支持等。...

    多级下拉菜单:superfish

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

    基于jquery的菜单

    标题中的"superfish-1.4.8"指的是Superfish插件,这是一个流行的jQuery菜单插件,它提供了多种可定制的下拉菜单效果。Superfish的特点在于其平滑的过渡效果、对触摸设备的支持以及防止鼠标悬停问题的能力,使菜单在...

    jquery实现的多级下拉菜单导航

    在网页设计中,导航栏是用户与网站交互的重要部分,尤其在内容丰富的...此外,还可以考虑使用现有的jQuery插件,如`superfish`或`mmenu`,它们提供了更多功能和配置选项,能快速搭建出更加完善的多级下拉菜单导航系统。

    jQuery 下拉菜单

    5. **插件开发**:jQuery社区提供了许多预封装的下拉菜单插件,如`bootstrap-nav`、`superfish`等。这些插件通常具有自定义配置选项和扩展功能,可以快速实现复杂的下拉菜单效果。 6. **响应式设计**:在移动设备上...

    来自国外的30个基于jquery的Web下拉菜单

    10. **Superfish**:这是一个流行的jQuery下拉菜单插件,支持多级菜单和各种动画效果。 11. **Animated Drop Down Menu with jQuery**:为下拉菜单添加动画效果,提升用户体验。 12. **jQuery Menu: Dropdown, ...

    基于jQuery实现的动态弹性多级下拉菜单效果.zip

    这个“基于jQuery实现的动态弹性多级下拉菜单效果”项目,旨在帮助开发者创建交互性强且响应迅速的菜单系统。下面将详细阐述jQuery在实现这一功能时涉及的关键知识点。 首先,jQuery是一个轻量级的JavaScript库,它...

    jquery插件-分级导航菜单 下拉菜单

    jQuery作为一个轻量级的JavaScript库,提供了丰富的插件来增强网页的交互性,其中包括用于创建下拉分级导航菜单的插件。在你提供的资源中,有三个jQuery插件:Superfish Menu、ddsMothMenu和Accordion Menu,它们都...

    jQuery实现的二级下拉菜单特效源码 菜单简易实用.zip

    本资源“jQuery实现的二级下拉菜单特效源码 菜单简易实用.zip”提供了一种使用jQuery编写的二级下拉菜单的实现方式,旨在帮助开发者快速构建高效且美观的菜单系统。 在jQuery中实现二级下拉菜单,主要涉及以下几个...

    superfish:Superfish是jQuery插件,可在现有的多级下拉菜单中添加可用性增强功能

    jQuery Superfish下拉菜单插件 我们最喜欢的水上超级英雄来自他在银河系中的定居之旅,注入了迄今未见的惊人新力量。 在他的现代化身中(戴着相当漂亮的斗篷),Superfish致力于使下拉菜单/弹出菜单能够在大小不同的...

    三款不错的jquery导航菜单

    Superfish是一款广泛使用的jQuery导航菜单插件,它提供了许多高级特性,如下拉子菜单、悬停效果和无障碍访问。Superfish的亮点在于其良好的可定制性,你可以调整菜单的样式、动画效果和交互行为。它还具有防止鼠标...

    jquery二级菜单

    7. **插件使用**:jQuery生态系统中有许多现成的二级菜单插件,如Superfish, Dropkick等,它们提供预设的样式和交互行为,可以快速搭建出专业级别的二级菜单。 通过以上步骤,我们可以创建一个基本的jQuery二级菜单...

Global site tag (gtag.js) - Google Analytics