- 浏览: 3361858 次
- 性别:
- 来自: 珠海
文章分类
- 全部博客 (1633)
- Java (250)
- Android&HTML5 (111)
- Struts (10)
- Spring (236)
- Hibernate&MyBatis (115)
- SSH (49)
- jQuery插件收集 (55)
- Javascript (145)
- PHP (77)
- REST&WebService (18)
- BIRT (27)
- .NET (7)
- Database (105)
- 设计模式 (16)
- 自动化和测试 (19)
- Maven&Ant (43)
- 工作流 (36)
- 开源应用 (156)
- 其他 (16)
- 前台&美工 (119)
- 工作积累 (0)
- OS&Docker (83)
- Python&爬虫 (28)
- 工具软件 (157)
- 问题收集 (61)
- OFbiz (6)
- noSQL (12)
最新评论
-
HEZR曾嶸:
你好博主,这个不是很理解,能解释一下嘛//左边+1,上边+1, ...
java 两字符串相似度计算算法 -
天使建站:
写得不错,可以看这里,和这里的这篇文章一起看,有 ...
jquery 遍历对象、数组、集合 -
xue88ming:
很有用,谢谢
@PathVariable映射出现错误: Name for argument type -
jnjeC:
厉害,困扰了我很久
MyBatis排序时使用order by 动态参数时需要注意,用$而不是# -
TopLongMan:
非常好,很实用啊。。
PostgreSQL递归查询实现树状结构查询
http://www.helloweba.com/view-blog-175.html
手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验。本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单。
Demo: http://www.helloweba.com/demo/multi_menu/
Download: http://www.helloweba.com/demo/down/multi_menu.rar
HTML
首先在head间引用jQuery和插件。
接着,在body间写上菜单主体代码,HTML代码将由一系列无序列表组成。
CSS
当然,我们要为这个无序列表加上样式,让它非常简洁的呈现在屏幕上。
ul {
list-style: none
}
.nav {
width: 213px;
padding: 40px 28px 25px 0;
font-family: "Microsoft yahei", Arial, Helvetica, sans-serif;
}
ul.nav {
padding: 0;
margin: 0;
font-size: 1em;
line-height: 0.5em;
list-style: none;
}
ul.nav li {
}
ul.nav ul {
margin: 0;
padding: 0;
display: none;
}
ul.nav ul li {
margin: 0;
padding: 0;
clear: both;
}
/*第一级*/
ul.nav li a {
line-height: 10px;
font-size: 14px;
padding: 10px 5px;
color: #000;
display: block;
text-decoration: none;
font-weight: bolder;
}
ul.nav li a:hover {
background-color: #675C7C;
color: white;
}
/*第二级*/
ul.nav ul li a {
padding-left: 20px;
font-size: 12px;
font-weight: normal;
}
ul.nav ul li a:hover {
background-color: #D3C99C;
color: #675C7C;
}
/*第三级*/
ul.nav ul ul li a {
color: silver;
padding-left: 40px;
}
ul.nav ul ul li a:hover {
background-color: #D3CEB8;
color: #675C7C;
}
ul.nav span {
float: right;
}
jQuery
调用accordion插件,设置相关属性,一个漂亮的手风琴效果就完成了。
可以看出,区分多级,其实是靠css的背景等信息来区分的。
Accordion提供以下选项设置:
speed:数字毫秒,设置菜单展开和关闭的时间。
closedSign:当下级菜单关闭时,显示于菜单旁边的内容,可以是任意html或者text。
openedSign:当下级菜单展开时,显示于菜单旁边的内容,可以是任意html或者text。
注意,如果你想菜单初始载入时就展开的话,可以在对应要展开的li上加class="active"。
声明:本文为原创文章,helloweba.com和作者拥有版权,如需转载,请注明来源于helloweba.com并保留原文链接,否则视为侵权。
手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验。本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单。
Demo: http://www.helloweba.com/demo/multi_menu/
Download: http://www.helloweba.com/demo/down/multi_menu.rar
HTML
首先在head间引用jQuery和插件。
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/accordion.js"></script>
接着,在body间写上菜单主体代码,HTML代码将由一系列无序列表组成。
<ul class="nav"> <li><a href="http://www.helloweba.com">首页</a></li> <li><a href="#">服务</a></li> <li><a href="#">案例</a></li> <li><a href="#">文章</a></a> <ul> <li><a href="#" target="_blank">XHTML/CSS</a></li> <li><a href="#">Javascript/Ajax/jQuery</a> <ul> <li><a href="#">Cookies</a></li> <li><a href="#">Event</a></li> <li><a href="#">Games</a></li> <li><a href="#">Images</a></li> </ul> </li> <li><a href="#" target="_blank">PHP/MYSQL</a></li> <li><a href="#" target="_blank">前端观察</a></li> <li><a href="#" target="_blank">HTML5/移动WEB应用</a></li> </ul> </li> <li><a href="#">关于</a></li> </ul>
CSS
当然,我们要为这个无序列表加上样式,让它非常简洁的呈现在屏幕上。
ul {
list-style: none
}
.nav {
width: 213px;
padding: 40px 28px 25px 0;
font-family: "Microsoft yahei", Arial, Helvetica, sans-serif;
}
ul.nav {
padding: 0;
margin: 0;
font-size: 1em;
line-height: 0.5em;
list-style: none;
}
ul.nav li {
}
ul.nav ul {
margin: 0;
padding: 0;
display: none;
}
ul.nav ul li {
margin: 0;
padding: 0;
clear: both;
}
/*第一级*/
ul.nav li a {
line-height: 10px;
font-size: 14px;
padding: 10px 5px;
color: #000;
display: block;
text-decoration: none;
font-weight: bolder;
}
ul.nav li a:hover {
background-color: #675C7C;
color: white;
}
/*第二级*/
ul.nav ul li a {
padding-left: 20px;
font-size: 12px;
font-weight: normal;
}
ul.nav ul li a:hover {
background-color: #D3C99C;
color: #675C7C;
}
/*第三级*/
ul.nav ul ul li a {
color: silver;
padding-left: 40px;
}
ul.nav ul ul li a:hover {
background-color: #D3CEB8;
color: #675C7C;
}
ul.nav span {
float: right;
}
jQuery
调用accordion插件,设置相关属性,一个漂亮的手风琴效果就完成了。
$(function(){ $(".nav").accordion({ speed: 500, closedSign: '[+]', openedSign: '[-]' }); });
可以看出,区分多级,其实是靠css的背景等信息来区分的。
Accordion提供以下选项设置:
speed:数字毫秒,设置菜单展开和关闭的时间。
closedSign:当下级菜单关闭时,显示于菜单旁边的内容,可以是任意html或者text。
openedSign:当下级菜单展开时,显示于菜单旁边的内容,可以是任意html或者text。
注意,如果你想菜单初始载入时就展开的话,可以在对应要展开的li上加class="active"。
声明:本文为原创文章,helloweba.com和作者拥有版权,如需转载,请注明来源于helloweba.com并保留原文链接,否则视为侵权。
发表评论
-
echart使用记录
2016-06-22 09:24 1757ECharts详细说明 http://elang0705.it ... -
jQuery Backstretch动态设置背景图片插件
2016-05-29 02:41 1523原文: http://www.2cto.com/kf/2014 ... -
自动 CSS 回归测试工具 BackstopJS
2016-05-03 09:48 1178http://www.oschina.net/p/backst ... -
用CSS开启硬件加速来提高网站性能
2016-04-19 09:06 1168http://www.cnblogs.com/PeunZhan ... -
css3旋转的大风车动画特效
2016-04-18 16:26 1232http://www.oschina.net/code/sni ... -
CSS实现垂直居中的常用方法
2016-04-15 13:32 965http://my.oschina.net/agileai/b ... -
固定大小的div 自适应显示图片
2016-04-13 10:29 1420http://www.oschina.net/code/sni ... -
pageSwitch-支持121种过渡效果的JavaScript页面切换插件
2016-04-10 01:25 1565介绍: http://www.htmleaf.com/jQue ... -
CSS3效果或插件收集
2016-04-09 14:17 1588资源网站: 懒人之家 http://www.lanrenzh ... -
Dropzone JS 使用指南(文件拖拽上传)
2016-04-08 13:25 4300JavaScript 文件拖拽上传插件 dropzone.js ... -
纯CSS3多层云彩变换动画特效
2016-04-06 14:13 961原文: http://hovertree.com/h/bjaf ... -
如何将页脚固定在页面底部
2016-04-05 10:36 984http://www.w3cplus.com/css/css- ... -
纯CSS实现箭头,圆点, 三角形
2016-03-30 13:44 2006http://my.oschina.net/u/2362038 ... -
[HTML5]Notification桌面提醒功能
2016-03-23 21:20 935[HTML5]Notification桌面提醒功能 http: ... -
css3总结笔记
2016-03-18 11:50 500http://my.oschina.net/u/2460148 ... -
html上传图片之前在网页预览实现
2016-03-16 10:40 1003HTML5之FileReader的使用 http://blog ... -
20 个 CSS 高级技巧汇总
2016-03-16 10:11 963http://my.oschina.net/u/2460148 ... -
CSS实现垂直居中的常用方法
2016-03-15 17:12 1007详细过程见原文http://www.cnblogs.com/y ... -
Jquery获取窗口高度
2016-03-15 12:48 926http://my.oschina.net/moks/blog ... -
三种三栏网页宽度自适应布局方法
2016-03-15 09:42 932http://my.oschina.net/zhangxuma ...
相关推荐
这一款jQuery多级折叠手风琴菜单特效代码,通常用于网站后台管理系统左侧菜单,切换效果平滑好看。
兼容主流浏览器的jQuery多级手风琴菜单
jQuery实现多级手风琴树形下拉菜单,随意添加多级菜单,非常流行的样式哦,简单易用,带动画滑动,没有其他三方控件。
这是一款类似于目录菜单的jQuery多级目录手风琴菜单。该jQUery手风琴菜单每个目录下都可以带有多级的子目录,点击后可以展开。
这是一款简单但实用的多级垂直手风琴下拉列表菜单。该多级手风琴菜单完全使用CSS来制作,它通过将不同的子菜单进行分组,制作出多级菜单的效果。
代码简介:jQuery多级下拉垂直手风琴代码是一款通过将不同的子菜单进行分组,制作出多级菜单的效果。
该多级手风琴菜单完全使用CSS来制作,它通过将不同的子菜单进行分组,制作出多级菜单的效果。 该多级手风琴菜单通过在checkbox元素上使用:checked伪元素来制作。如果需要一些好看的动画效果,可以实用插件中提供的...
有兴趣刚需的可以自己下载,非常实用的jquery代码,可以完美运行,有能力的还可以二次修改!
也分享过几款手风琴下拉菜单,可以在手风琴菜单栏目下查看。今天要分享的是一款飘带样式的垂直手风琴下拉菜单,恰好是两者的结合,效果非常不错。 下面我们一起来看看如何实现这款漂亮的jQuery飘带式手风琴下拉...
jQuery实现3D手风琴垂直多级菜单特效源码 可筛选菜单项.zip
jQuery实现树型多级折叠手风琴菜单特效源码.zip
jquery手风琴效果,竖向下拉菜单导航,效果很流畅,推荐大家下载!
主要介绍了jQuery实现多级手风琴菜单,菜单效果更有特色,需要的朋友可以参考下
这是一款通过将不同的子菜单进行分组,制作出扁平风格多级菜单效果的jQuery垂直手风琴多级下拉菜单代码。
今天我们要为大家介绍一款非常实用的jQuery多级展开手风琴竖向菜单,与之前介绍的手风琴菜单不同的是,它虽然没有艳丽的外观,但是他支持多级展开,用起来非常方便,多层级的支持,也让这款手风琴菜单变得更加实用。
这是一款使用jQuery和css3制作的效果超酷的jQuery和css3垂直手...该手风琴折叠菜单插件将css背景渐变、过渡、旋转等各种动画元素结合起来,形成效果非常酷的手风琴菜单。演示地址:http://www.jq22.com/jquery-info3743
jQuery手风琴菜单,折叠效果流畅,推荐下载!