java 手风琴二级菜单_jQuery多级手风琴菜单实例讲解
手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验。本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单。
HTML
首先在head间引用jQuery和插件。
接着,在body间写上菜单主体代码,HTML代码将由一系列无序列表组成。
- 首页
- 服务
- 案例
- 文章
- XHTML/CSS
- Javascript/Ajax/jQuery
- Cookies
- Event
- Games
- Images
- PHP/MYSQL
- 前端观察
- HTML5/移动WEB应用
- 关于
CSS
当然,我们要为这个无序列表加上样式,让它非常简洁的呈现在屏幕上。
.nav {width: 213px; padding: 40px 28px 25px 0;}
ul.nav {padding: 0; margin: 0; font-size: 1em; line-height: 0.5em; list-style: none;}
ul.nav li {}
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 { margin: 0; padding: 0;display: none;}
ul.nav ul li { margin: 0; padding: 0; clear: both;}
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: '[-]'
});
});
Accordion提供以下选项设置:
speed:数字毫秒,设置菜单展开和关闭的时间。
closedSign:当下级菜单关闭时,显示于菜单旁边的内容,可以是任意html或者text。
openedSign:当下级菜单展开时,显示于菜单旁边的内容,可以是任意html或者text。
注意,如果你想菜单初始载入时就展开的话,可以在对应要展开的li上加class="active"。
是不是看完这篇文章,有没有想把自己原来的菜单抛弃了,那就赶紧行动吧,使自己的网站焕然一新。
java 手风琴二级菜单_jQuery多级手风琴菜单实例讲解相关推荐
- dota是java中的_用java开发dota英雄最华丽的技能(实例讲解)
爱java 爱dota,突发奇想想用java开发dota操作最华丽的英雄之一的卡尔的技能,因为本人系小白,代码不足的地方还请包涵,有同样爱好的同学欢迎一起研究学习. 先把我的代码呈上 import j ...
- 地下城英雄 java_用java开发dota英雄最华丽的技能(实例讲解)
爱java 爱dota,突发奇想想用java开发dota操作最华丽的英雄之一的卡尔的技能,因为本人系小白,代码不足的地方还请包涵,有同样爱好的同学欢迎一起研究学习. 先把我的代码呈上 import j ...
- 【26天高效学习Java编程】Day19:60 多个实例讲解,彻底搞懂Java 多线程 【可查阅,可复习,可面试】
本专栏将从基础开始,循序渐进,由浅入深讲解Java的基本使用,希望大家都能够从中有所收获,也请大家多多支持. 专栏地址:26天高效学习Java编程 相关软件地址:软件地址 所有代码地址:代码地址 如果 ...
- Java JUC之Atomic系列12大类实例讲解和原理分解
http://blog.csdn.net/xieyuooo/article/details/8594713 在java6以后我们不但接触到了Lock相关的锁,也接触到了很多更加乐观的原子修改操作,也就 ...
- java spring 事务传播_spring事务传播机制实例讲解
天温习spring的事务处理机制,总结如下 对于SQL事务的概念以及ACID性质,可以参见我的另一篇博文 http://kingj.iteye.com/admin/blogs/1675011 spri ...
- JAVA设计模式面试小考点之 适配器模式(实例讲解)
又到了小葵花妈妈课堂开课的时间啦.今儿让我们来学习一下是适配器模式. 定义 适配器模式,即定义一个包装类,用于包装不兼容接口的对象 其实不看定义,故名思意就知道适配器就是适配不同的接口之间的中间件.生 ...
- java 方法signature,基于微信签名signature获取(实例讲解)
微信分享的签名算法微信也写有,主要是调用接口需要使用服务器(微信官方文档是这么说的,试了下前端居然特么也可以),不过微信的access_token和jsapi_ticket是有使用次数限制的,所以还是 ...
- 多级手风琴下拉菜单插件metisMenu.js
下载地址 metisMenu.js是一个纯JavaScript导航菜单插件,可以帮助你创建响应式,动画,手风琴/下拉菜单导航.主要特色光滑的折叠/展开动画.启用AJAX.兼容的桌面和移动.事件处理程序 ...
- 手风琴式折叠html,基于jQuery实现以手风琴方式展开和折叠导航菜单
本章节分享一段代码实例,它实现了手风琴方式展开和折叠导航菜单效果. 代码实例如下: 代码实例如下: 脚本之家 dl{width:150px;} dl,dd{margin:0;} dt{ backgro ...
最新文章
- C#学习笔记(四):数组
- mysql 切换数据库方案
- nginx的请求接收流程(二)
- #138. 类欧几里得算法
- js br不生效_前端标注工具-AILabel.js
- BizTalk 开发系列(四十) BizTalk WCF-SQL Adapter读取SQL Service Broker消息
- c语言计算成绩大于90为优秀,输入一个分数,如小于60分,则输出不及格;如大于60小于85,输出良好;85分以上则为优秀。 用c语言编写...
- 编译win10的WSL2内核(windows subsystem linux)
- QQ for linux(ubuntu) 下载安装教程
- js读取excel时间格式转换
- 小程序 — 关于图片Base64转换及空间大小问题
- 双荧光素酶报告(Dual-Luciferase Reporter)实验介绍
- 3dmax入门学习丨3dmax如何做人物建模
- (Unity)太空大战笔记
- html 限制每行字数,毕业论文每行字数的设置
- 教您正确选择一款合适您的家用路由器
- 5月16日第壹简报,星期一,农历四月十六
- 从十亿光年到0.1飞米:从宇宙到细胞,从宏观到微观
- P2600 [ZJOI2008]瞭望塔(半平面交)
- PCB生产工艺流程一:PCB分类的三大要点
热门文章
- 3.1.3 操作系统覆盖技术与交换技术的思想
- c语言快速排序案例,什么是快速排序?C语言数组快速排序例子
- 源码网站都有哪些_一个网站都包括哪些费用?
- 显卡在电脑什么位置_DIY组装电脑教程,新手也能学会自己组装电脑
- 密码学 / 什么是数字签名
- Qt / 如何解决移动了 Qt 的项目,但是 Qt 在原目录下生成编译文件的问题
- C/C++位域结构深入解析
- mysql 安装_源码安装mysql
- ireport修改jrxml中的sql语句_SQL中的create table与insert into语句
- 安卓访问mysql的源码_【原创源码】安卓数据库简单操作demo