网站开发常用jQuery插件总结(十)菜单插件superfish
网站对于菜单的依赖其实并不是很大,我们完全可以不使用菜单来设计网站,显示网站内容。但是如果网站的分类太多,“也许”使用菜单作为网站导航可以使 用户 更方便的寻找内容。superfish插件就是用于实现菜单的功能。但是在使用superfish时,与自身网站整合、superfish样式设置是不可避免的。因为官方只给出了怎么使用插件,并且提供了一个简单的样式。如下图:
在我以前的使用中,superfish不符合我的需求,所以我对superfish的样式进行了修改。在本文中,我会提到怎样修改superfish的样式,只是简单的举个例子,不注重颜色的搭配。
一.superfish插件功能
实现下拉式菜单功能。主要用于水平菜单、垂直菜单。
二.superfish官方地址
http://users.tpg.com.au/j_birch/plugins/superfish/examples/vertical/
官方地址中有superfish插件的用例,用例很简单。但是在修改样式时确实有些问题,下文会提到样式的修改。
三.superfish使用方法
1.文件引用
如果是水平菜单,只需要引用下面四个文件。jquery文件,菜单的css样式文件与菜单的js功能文件。
<link rel="stylesheet" media="screen" href="../dist/css/superfish.css">
<script src="jquery.js"></script>
<script src="hoverIntent.js"></script>
<script src="superfish.js"></script>
如果是垂直菜单,还需要引用垂直菜单的样式文件。
<link rel="stylesheet" media="screen" href="superfish-vertical.css">
2.自定义样式。如果我们需要修改superfish样式,主要是修改superfish.css,我们也可以在当前页面覆盖superfish.css中存在的样式。在本例自定义样式中,修改了官方的颜色,去掉了阴影。如下:
body {
max-width: 40em;
font-family:微软雅黑;
}
#example{
margin-bottom:220px;
}
/**以下是自定义的菜单的样式**/
.sf-menu ul{
box-shadow:none;
}
.sf-menu li {
background: #dbeef7;
white-space: nowrap;
-webkit-transition: background .2s;
transition: background .2s;
font-size:14px;
}
.sf-menu a {
border:none;
padding: .75em 1em;
text-decoration: none;
zoom:;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
padding-top:6px;
padding-right:6px;
}
.sf-menu li:hover,.sf-menu li.sfhover{
background:#e6f1f6;
}
/**二级菜单**/
.sf-menu ul li {
background: #dbeef7;
}
/**三级菜单**/
.sf-menu ul ul li {
background: #dbeef7;
}
3.js代码。初始化菜单使用的js代码非常简单。只需要几句话就可以实现菜单功能。
function initsuperfish(){
//animation动画效果,delay:菜单显示的延迟时间。
//也可以简单的一句话实现 $('#example').superfish();
$('#example').superfish({
animation: {height:'show'},
delay: 1200
});
}
$(function(){
$('#horizontal').click(function(){;$('#example').removeClass('sf-vertical'); });
$('#vertical').click(function(){ $('#example').addClass('sf-vertical'); });
initsuperfish();
});
4.使用的html。superfish主要使用html源码ul来实现菜单的关联功能。html代码有点多,就不贴出来了。有兴趣的可以看下面的“菜单测试”。
修改后的样式为:
在线演示:菜单插件superfish
网站开发常用jQuery插件总结(十)菜单插件superfish的更多相关文章
- 网站开发常用jQuery插件总结(六)关键词说明插件cluetip
我们开发的网站,总有它一定的用途.如企业站用来宣传企业或展示产品,技术站用来分享自己的思路和经验.既然网站有了它的用途,那么就拥有了它本身的关键词(关键词说明网站的主要内容).例如企业站的关键词大部分 ...
- 网站开发常用jQuery插件总结(11)折叠插件Akordeon
实现折叠菜单,可以完全不使用插件.如果使用jquery的话,实现起来也比较简单,我们只需要定义折叠菜单的样式,然后使用jquery中的渐隐渐现就可以了.如果我们自己写折叠菜单,可以方便的使用我们自己的 ...
- 网站开发常用jQuery插件总结(七)背景插件backstretch
一.backstretch插件功能 优化网站外观.主要用于设置页面背景图片,也可以设置html元素的背景图片.背景图片可以设置多张,在间隔时间内循环显示. 注 但是在设置背景图片时,如果图片过大,网站 ...
- 网站开发常用jQuery插件总结(五)滚动条插件nanoscroller
网站在展示信息时,如果信息量过大,解决方法主要有三种.1.分页,将信息分页显示.2.整页显示,但是页面过长,影响浏览体验.3.使用滚动条,而默认滚动条样式太单一,用户体验不友好.所以我们需要美化滚动条 ...
- 网站开发常用jQuery插件总结(二)弹出层插件Lightbox_me
网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...
- 网站开发常用jQuery插件总结(二)弹出层插件Lightbox
网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...
- 网站开发常用jQuery插件总结(12)固定元素插件scrolltofixed
这个插件在前段时间用过一次,当时是改一个网站.要求顶部的菜单栏随着滚动条的滚动而固定.也大体写了一下,不过在文章中也只是提了一下,文章地址:jQuery插件固定元素位置. 在这篇文章中,再进行总结一下 ...
- 网站开发常用jQuery插件总结(八)标签编辑插件Tagit
一.Tagit插件功能 提高网站交互性,增加用户体验.至于其它的功能,还真没有.用一个input text就可以替换了它.但是text没有输入提示功能,而tagit拥有这个功能.官方示例如下图: 将关 ...
- 网站开发常用jQuery插件总结(15)上传插件blueimp
在介绍这个插件之前,先吐槽一下.这个插件功能很强大.带有的功能有:上传(单个文件或批量文件),自动上传或点击按钮上传,上传前缩略图显示,判断文件格式,上传前的文件操作,上传时进度条显示等功能.如果你用 ...
随机推荐
- windows下svn+apache搭建svn服务器
使用软件: apache_2.0.55-win32-x86-no_ssl.msi Setup-Subversion-1.5.3.msi TortoiseSVN-1.5.10.16879-win32-s ...
- 自己动手Jquery插件
最近Web应用程序中越来越多地用到了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提供了丰富的操作,但是,有时候 ...
- Kivy A to Z -- 怎样从python代码中直接訪问Android的Service
在Kivy中,通过pyjnius扩展能够间接调用Java代码,而pyjnius利用的是Java的反射机制.可是在Python对象和Java对象中转来转去总让人感觉到十分别扭.好在android提供了b ...
- 征服 Nginx + Tomcat【转】
征服 Nginx + Tomcat Server Architecture/Distributed nginxtomcatsessioncluster 2年前一直折腾Apache,现如今更习惯Ngi ...
- Android+OpenCV 摄像头实时识别模板图像并跟踪
通过电脑摄像头识别事先指定的模板图像,实时跟踪模板图像的移动[用灰色矩形框标识] ps:一开始以为必须使用OpenCV Manager,可是这样会导致还需要用户去额外安装一个apk,造成用户体验很差, ...
- Linux 设置系统时间和日期 API
嵌入式Linux 设置时间和日期 API ,它是busybox要提取的源代码. Linux设置时间和日期的步骤: 1. 设置系统时间和日期: 2. 该系统的时间和日期,同步到硬件. #include ...
- careercup-数学与概率 7.5
7.5 在二维平面上,有两个正方形,请找出一条直线,能够将这两个正方形对半分.假定正方形的上下两条边与x轴平行. 解法: 要将两个正方形对半分,这条线必须连接两个正方形的中心点.利用slope=(y1 ...
- 进程环境之main函数
C程序总是从main函数开始执行.main函数的原型是: int main( int argc, char *argv[] ); 其中,argc是命令行参数的数目,argv是指向参数的各个指针所构成的 ...
- j2ee学习笔记 javascript 学习
JavaScript 组成: ECMAScript + BOM + DOM Window对象是JS中的顶层对象 ECMAScript: 规定了一些语法,变量,for循环等等结构 BOM: Browse ...
- 导出EXCEL数据时防止数值变科学计数的办法
网上有很多说法,最简单直接正确的做法是判断一下是否为数值以及长度,然后给单元格加上以下CSS即可: mso-generic-font-family:auto; mso-font-charset:1 ...