欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程>jquery教程

目录导航

jQuery+Superfish制作下拉菜单

美国HS机房 发布于 2013-06-08  
jquery教程

最早接触Superfish还是整Drupal时的下拉菜单,那时只知道Superfish是Drupal的一个Module,用来制作类似下图的菜单:

 jQuery+Superfish制作下拉菜单-图片1
jQuery+Superfish制作下拉菜单-图片1

直到今天才知道Superfish是Joel Birch写的一个用来制作下拉菜单的jQuery插件。发现用Superfish来制作下拉菜单真的很方便而好很好用,而且还可以通过Superfish提供的参数来控制下拉菜单的不同效果,而且他没有层级限制,换句话说可以通过Superfish来写你想要的层级菜单。功能如些强大,而且好用,所以把joel Birch的Superfish稍加整理,贴上来与大家分享,因为像我这样不会js的朋友还是蛮好多的,有时用CSS制作下拉菜单那是极其命苦的事情,借助jQuery和相关插件,嘿嘿,那就相当的容易多了....

具备的参数

使用jQuery配合Superfish制作下拉菜单需要具备以下几个参数

  1. 项目中需要有jQuery版本库,如果你没有的话可以到这里下载;
  2. 下载Superfish插件——Superfish;
  3. 需要把上面两个js引入你的项目中

导入jQuery库和Superfish插件

<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/superfish.js"></script>

为了让菜单一个默认的样式,大家还可以到superfish下载superfish.css样式文件,可以直接调用

<link rel="stylesheet" href="css/superfish.css" />

备注:如果在你的项目中使用jQuery配合Superfish制作下拉菜单,个人建议直接在项目中使用Joel Birch为你提供的superfish.css样式,他或许不是你喜欢的风格,但你可以在用的主样式中覆盖他或者直拉在superfish.css样式中修改。另我一点,要确保你的项目中你上面的代码块一样调用了制作菜单所需的js,并按照你自己项目的相对路径设置。

准备工作就绪后,你就可以在你的文档中写结构了

HTML Markup

<ul class="sf-menu">

</ul> </ul>

</ul>

本来是需要给菜音写CSS样式的,但是此处我直接调用了superfish.css样式没做任何修改。如今HTML结构写好了,CSS样式也完成了,应该需要的库和插件也调入了,最后为了让菜单生效,还需要让你的菜单调用superfish。具体操作如下:

本文出自零度科技转载请注明出处:http://www.ldisp.com/a/jquery/2013/1602.shtml

上一篇:jQuery textSlider 文字滚动插件
下一篇:jQuery 1.9不支持$.browser 怎么判断浏览器类型和版本

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

0

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理