• 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.将下面内容添加到你的网站

    [html] view plaincopyprint?
    //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/

    原文出处:http://www.biaodianfu.com/superfish-jquery.html

  • 相关阅读:
    PowerDesigner导出word表结构
    Java
    Java
    Java
    Java
    Java
    Java
    Java
    Java
    Java
  • 原文地址:https://www.cnblogs.com/sovf/p/3295437.html
Copyright © 2020-2023  润新知