jQuery+Superfish制作下拉菜单

时间:2022-05-30 18:43:39

superfish制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单。

官方帮助文档:

http://users.tpg.com.au/j_birch/plugins/superfish/#getting-started

  1. Begin with a working pure CSS dropdown menu based on nested unordered lists. For each li:hover selector in your CSS, add an equivalent li.sfHover selector. Use display:none rather than left:-9999em to hide submenus. To make this step easy, there are cross-browser CSS files for a variety of menu types available in the download section of this site.
    <link href="superfish.css" rel="stylesheet" media="screen">
  2. Link to the superfish.js file (after including jQuery) using a script tag in the head of your document.
    <script src="jQuery.js"></script>
    <script src="superfish.js"></script>
  3. Call superfish() on the containing ul element.
    <script>
    
    	jQuery(document).ready(function() {
    jQuery('ul.sf-menu').superfish();
    }); </script>

    There are many options available to customise your menu. You can find out about them in the Options tab of this site.

这是国内整理文件。

http://blog.chinaunix.net/uid-26615074-id-3078698.html

jQuery+Superfish制作下拉菜单的更多相关文章

  1. jquery实现多级下拉菜单

    支持多种浏览器,体验效果:http://keleyi.com/keleyi/phtml/jqmenu/4.htm 多级菜单,理论上支持无限多的层级,文件结构非常简单的,以下是完整代码: <!DO ...

  2. 制作下拉菜单&lpar;PopupList&rpar;

    怎样判断是否应当使用下拉菜单 下拉菜单,就是将一系列的选项隐藏,通过单击某一个控件将会弹出一个包含这些选项的列表,在其中选择想要的选项.这样做不但可以节省屏幕空间,也可以让用户在进行选择时更加方便快捷 ...

  3. CSS3制作下拉菜单

    导航菜单其实是没有什么可说的,制作方法到处可见,今天这个案例本来不只是一个导 航,还有一个搜索表单的,可是为了偷懒,把搜索表单部分去掉了,就变成了一个CSS3 制作的下拉菜单.在这个导航中主要两点,一 ...

  4. js和jQuery写简单下拉菜单

    1.jQuery写法 <head> <meta http-equiv="Content-Type" content="text/html; charse ...

  5. 转:drupal使用superfish建立下拉菜单

    参考地址:1. http://www.drupalla.com/project/superfish 2.http://drupalchina.cn/node/1798 但是按照这个做出来,我的主菜单和 ...

  6. JQuery设置获取下拉菜单选项的值 多实例

    分享下JQuery如何设置获取下拉菜单某个选项的值,多种方法,值得收藏. JQuery获取和设置Select选项 获取Select :获取select 选中的 text :$(“#ddlRegType ...

  7. 基于jquery网站左侧下拉菜单

    网站左侧下拉菜单jQuery代码.这是一款蓝色风格的适合做后台下拉菜单代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="container"& ...

  8. css用hover制作下拉菜单

    首先我们的需求就是 制作一个鼠标移动到某个区域就会有下拉菜单的弹出,这样会有更多的子类内容,示例代码如下: <!DOCTYPE html> <html lang="en&q ...

  9. Html5&plus;Css3制作下拉菜单的三种方式

    一.渐变式改变ol的高度 1.外部为ul标签,在每个li里嵌套一个ol列表2.设置外部li左浮动,内部ol标签绝对定位,外部li标签相对定位3.设置ol的高为0,溢出隐藏4.外部li标签:hover ...

随机推荐

  1. ShareSDK短信验证码集成详细步骤

    1.这里使用的是ShareSDK网的短信验证码SDK  官网 http://www.mob.com 先去http://www.mob.com/#/reg 注册成为开发者 填写相应的信息,邮箱账号,然后 ...

  2. &num; 图解TCP&sol;IP读书笔记(五)

    第五章.IP协议相关技术 IP旨在让最终目标主机收到数据包,但是在这一过程中仅仅有IP是无法实现通信的,因此还有需要作为为IP的辅助的各种协议支持. 协议 作用 特点 DNS(Domain Name ...

  3. &num;&num;&num;学习《C&plus;&plus; Primer》- 3

    点击查看Evernote原文. #@author: gr #@date: 2014-10-04 #@email: forgerui@gmail.com Part 3: STL泛型算法(第10章) 一. ...

  4. linux下自动同步internet时间

    linux下很简单直接一句即可: ntpdate time.nist.gov ntp后面参数为internet时间服务器url或ip即可. 但是ntpdate命令需要root特权,如果做成自动运行每次 ...

  5. 【LaTeX排版】LaTeX论文排版&amp&semi;lt&semi;三&amp&semi;gt&semi;

    A picture is worth a thousand words(一图胜千言).图在论文中的重要性不言而喻,本文主要解说图的制作与插入. 1.图像的插入     图像能够分为两大类:位图和向量图 ...

  6. Logstash利用GeoIP库显示地图以及通过useragent显示浏览器(四)

    我们通过Logstash收集的Nginx Access log中已经包含了客户端IP的数据(remote_addr),但是只有这个IP还不够,要在Kibana的显示请求来源的地理位置还需要借助GeoI ...

  7. HTML----网页基础和基本标签

    网页分类: 1.静态网页:所有内容全写死,都写在源代码中,若修改必须修改源代码,后缀为.html或htm 2.动态网页:内容大部分来自于数据库,可以修改,后缀为.aspx(c#).jsp(java). ...

  8. FFmpeg源代码简单分析:avcodec&lowbar;encode&lowbar;video&lpar;&rpar;

    ===================================================== FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码结构图 - 解码 F ...

  9. 素数筛选法&lpar;prime seive&rpar;

    素数筛选法比较有名的,较常用的是Sieve of Eratosthenes,为古希腊数学家埃拉托色尼(Eratosthenes 274B.C.-194B.C.)提出的一种筛选法.详细步骤及图示讲解,还 ...

  10. innerHTML和innerText区分

    示例代码:<div id="test"> <span style="color:red">test1</span> test ...