- 浏览: 3420790 次
- 性别:
- 来自: 珠海
文章分类
- 全部博客 (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 1811ECharts详细说明 http://elang0705.it ... -
jQuery Backstretch动态设置背景图片插件
2016-05-29 02:41 1563原文: http://www.2cto.com/kf/2014 ... -
自动 CSS 回归测试工具 BackstopJS
2016-05-03 09:48 1218http://www.oschina.net/p/backst ... -
用CSS开启硬件加速来提高网站性能
2016-04-19 09:06 1211http://www.cnblogs.com/PeunZhan ... -
css3旋转的大风车动画特效
2016-04-18 16:26 1281http://www.oschina.net/code/sni ... -
CSS实现垂直居中的常用方法
2016-04-15 13:32 1012http://my.oschina.net/agileai/b ... -
固定大小的div 自适应显示图片
2016-04-13 10:29 1451http://www.oschina.net/code/sni ... -
pageSwitch-支持121种过渡效果的JavaScript页面切换插件
2016-04-10 01:25 1606介绍: http://www.htmleaf.com/jQue ... -
CSS3效果或插件收集
2016-04-09 14:17 1637资源网站: 懒人之家 http://www.lanrenzh ... -
Dropzone JS 使用指南(文件拖拽上传)
2016-04-08 13:25 4424JavaScript 文件拖拽上传插件 dropzone.js ... -
纯CSS3多层云彩变换动画特效
2016-04-06 14:13 1015原文: http://hovertree.com/h/bjaf ... -
如何将页脚固定在页面底部
2016-04-05 10:36 1023http://www.w3cplus.com/css/css- ... -
纯CSS实现箭头,圆点, 三角形
2016-03-30 13:44 2047http://my.oschina.net/u/2362038 ... -
[HTML5]Notification桌面提醒功能
2016-03-23 21:20 996[HTML5]Notification桌面提醒功能 http: ... -
css3总结笔记
2016-03-18 11:50 540http://my.oschina.net/u/2460148 ... -
html上传图片之前在网页预览实现
2016-03-16 10:40 1038HTML5之FileReader的使用 http://blog ... -
20 个 CSS 高级技巧汇总
2016-03-16 10:11 1025http://my.oschina.net/u/2460148 ... -
CSS实现垂直居中的常用方法
2016-03-15 17:12 1047详细过程见原文http://www.cnblogs.com/y ... -
Jquery获取窗口高度
2016-03-15 12:48 961http://my.oschina.net/moks/blog ... -
三种三栏网页宽度自适应布局方法
2016-03-15 09:42 973http://my.oschina.net/zhangxuma ...
相关推荐
**jQuery树型多级手风琴菜单代码详解** 在网页设计和开发中,为了提高用户体验和界面的可操作性,常常会使用到各种交互效果,其中树型多级手风琴菜单是一种常见的导航元素。本篇文章将深入解析一款基于jQuery实现的...
在实现多级手风琴菜单时,主要涉及以下几个核心知识点: 1. **DOM操作**:jQuery提供了一系列方法来操作HTML元素,如`$(selector)`用于选择元素,`$(element).hide()`和`$(element).show()`用于隐藏和显示元素,`$...
在网页设计中,jQuery...要创建一个兼容主流浏览器的jQuery多级手风琴菜单,我们首先需要引入jQuery库。你可以通过CDN链接或者将jQuery库文件下载到本地项目中引用。例如,可以使用以下HTML代码引入jQuery: ```html ...
在网页设计中,jQuery竖直手风琴菜单是一种常见的交互元素,它允许用户通过点击菜单项来展开或收缩子菜单,以节省空间并提供良好的用户体验。这种效果在内容丰富的网站中特别受欢迎,因为它使得导航更加直观和高效。...
本篇文章将详细介绍如何使用jQuery实现这种多级手风琴菜单,并解析提供的代码资源。 **1. jQuery基础** jQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。通过使用...
《jQuery多级目录手风琴菜单详解》 在网页设计中,为了呈现层次分明、易于浏览的导航结构,多级目录手风琴菜单是一种常见且实用的解决方案。jQuery库以其简洁高效的特点,成为了实现此类功能的首选工具。本文将深入...
在多级手风琴菜单中,jQuery可以用于监听用户的点击事件,触发相应的子菜单展开或收起,以及处理其他动态交互功能。例如,使用`.click()`函数来绑定点击事件,使用`.slideToggle()`方法实现平滑的展开和关闭效果。 ...
6. **遍历和数据操作(Traversal and Data Operations)**:在处理多级手风琴菜单时,可能需要遍历DOM树并操作数据,例如关闭所有其他打开的面板,只保留当前被点击的面板展开。 在实际应用中,你可以根据需要...
【jQuery实现垂直手风琴菜单列表特效】 在网页设计中,手风琴菜单是一种常见的交互元素,它通过折叠和展开的方式展示子菜单项,既节省空间又方便用户浏览。本项目是基于JavaScript库jQuery实现的一个垂直手风琴菜单...
"jQuery多级下拉垂直手风琴代码"就是一个典型的示例,它利用jQuery的功能来创建一种特殊的导航菜单,即多级下拉垂直手风琴效果。这种效果使得用户能够在一个有限的空间内浏览层次分明的大量信息,提高用户体验。 ...
以下是一个简单的jQuery手风琴菜单实现示例: ```html <!DOCTYPE html> <title>jQuery手风琴菜单 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> .accordion { width: 200px; } ...
该多级手风琴菜单完全使用CSS来制作,它通过将不同的子菜单进行分组,制作出多级菜单的效果。 该多级手风琴菜单通过在checkbox元素上使用:checked伪元素来制作。如果需要一些好看的动画效果,可以实用插件中提供的...
也分享过几款手风琴下拉菜单,可以在手风琴菜单栏目下查看。今天要分享的是一款飘带样式的垂直手风琴下拉菜单,恰好是两者的结合,效果非常不错。 下面我们一起来看看如何实现这款漂亮的jQuery飘带式手风琴下拉...
在垂直手风琴菜单中,jQuery负责监听用户的交互事件,如点击菜单项,然后触发相应的响应,如展开或收起子菜单。 手风琴效果是指菜单项被点击时,其相邻的子菜单会以折叠或展开的方式动态显示。在多级下拉菜单中,...
本资源"jQuery实现树型多级折叠手风琴菜单特效源码.zip"提供了使用jQuery创建树型多级折叠菜单的示例代码,这种菜单常用于网站导航,尤其在需要展示层次结构丰富内容时非常实用。 首先,让我们深入理解jQuery树型...
在这个“jQuery手风琴菜单.rar”压缩包中,包含了一个实现这一功能的jQuery插件或者代码示例。 在网页设计中,手风琴菜单通常由一系列可折叠的面板组成,每个面板都有一个标题,点击标题时,对应的面板内容会展开或...
在本项目中,jQuery被用来实现手风琴菜单的动态效果,如滑动展开和收缩。 **前端开发**是构建网页或Web应用的主要环节,主要关注用户与网站之间的交互。jQuery苹果风格的手风琴菜单是前端开发中的一个重要实践,它...
在本资源中,我们主要探讨的是使用jQuery库来创建一个具有3D效果的垂直多级手风琴菜单,且该菜单允许用户筛选特定的菜单项。这个特效源码可以帮助开发者在网页设计中添加互动性和视觉吸引力,使得用户界面更加直观...