jQuery多级手风琴菜单实例讲解


Posted in Javascript onOctober 22, 2015

手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验。本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单。

jQuery多级手风琴菜单实例讲解

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="//3water.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
当然,我们要为这个无序列表加上样式,让它非常简洁的呈现在屏幕上。

.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"。

是不是看完这篇文章,有没有想把自己原来的菜单抛弃了,那就赶紧行动吧,使自己的网站焕然一新。

Javascript 相关文章推荐
JavaScript之Object类型介绍
Apr 01 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
仅30行代码实现Javascript中的MVC
Feb 15 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
Oct 11 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
微信小程序 点击控件后选中其它反选实例详解
Feb 21 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
JS基于ES6新特性async await进行异步处理操作示例
Feb 02 Javascript
ant design vue中表格指定格式渲染方式
Oct 28 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
使用jquery插件qrcode生成二维码
Oct 22 #Javascript
JavaScrip调试技巧之断点调试
Oct 22 #Javascript
浅析JavaScript 调试方法和技巧
Oct 22 #Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
Oct 22 #Javascript
浅谈node.js中async异步编程
Oct 22 #Javascript
JS实现不使用图片仿Windows右键菜单效果代码
Oct 22 #Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 #Javascript
You might like
PHP新手上路(九)
2006/10/09 PHP
PHP中其实也可以用方法链
2011/11/10 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
用Laravel Sms实现laravel短信验证码的发送的实现
2018/11/29 PHP
js实现杯子倒水问题自动求解程序
2013/03/25 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
AngularJS的内置过滤器详解
2015/05/14 Javascript
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
jQuery使用方法
2017/02/04 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
深入理解Promise.all
2018/08/08 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
ant design 日期格式化的实现
2020/10/27 Javascript
vue中可编辑树状表格的实现代码
2020/10/31 Javascript
python和pyqt实现360的CLable控件
2014/02/21 Python
Python中的匿名函数使用简介
2015/04/27 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
python发送多人邮件没有展示收件人问题的解决方法
2019/06/21 Python
Pytorch对Himmelblau函数的优化详解
2020/02/29 Python
Linux内核的同步机制是什么?主要有哪几种内核锁
2013/01/03 面试题
2015年元旦促销方案书
2014/12/09 职场文书
教师考核评语大全
2014/12/31 职场文书
公积金具结保证书
2015/05/11 职场文书
新学期开学寄语2016
2015/12/04 职场文书
小组组名及励志口号
2015/12/24 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL