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="http://www.jb51.net">首页</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"。

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

时间: 2015-10-20

基于jquery实现多级菜单效果

本文实例为大家分享了jquery实现多级菜单效果展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; font-size:14px; } ul,li{ list

jquery+CSS实现的多级竖向展开树形TRee菜单效果

本文实例讲述了jquery+CSS实现的多级竖向展开树形TRee菜单效果.分享给大家供大家参考.具体如下: 这里演示垂直的树形菜单,应用CSS和jquery技术来实现,显示在网页左侧比较合适,考虑到简洁,没有使用图片之类的作修饰.本效果兼容IE.火狐等主流浏览器. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css-nlevel-vshow-tree-codes/ 具体代码如下: <!DOCTYPE html> <hea

jquery实现多级下拉菜单的实例代码

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>jquery实现多级下拉菜

jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例

本文实例讲述了jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果.分享给大家供大家参考.具体如下: 这是一款核心基于jquery的多级导航菜单特效,横向向右依次展开菜单项,当然本菜单并不是完美的,因此没有怎么美化,另外包括子菜单的上级菜单中缺少一个菜单标记,这样用户有时候不知道哪个菜单中含有下级子菜单.不过添加这样一个标记似乎挺简单,你可以自己动手添加吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-right-show

jQuery插件cxSelect多级联动下拉菜单实例解析

随着电商的火爆,这多级联动下拉菜单体现的更加充分,最明显的就是地址的多级联动下拉选择,所以这里就简单的分享一下 jQuery cxSelect 多级联动下拉菜单 cxSelect 是基于 jQuery 的多级联动菜单插件,适用于省市.商品分类等联动菜单. 列表数据通过 AJAX 获取(需要在服务器环境运行),也可以使用变量自定义,数据内容使用 JSON 格式. 提供国内省市县数据(数据来源:basecss/cityData Date: 2014.03.31) 个人一直都有习惯,当有新知识点需要学

jquery 实现二级/三级/多级联动菜单的思路及代码

本文介绍使用jQuery的AJAX功能和asp.net来实现省市区的三级联动效果,其他二级.三级或多级联动也可以按照此方法完成. 文章中涉及到的数据表为City,为方便管理. 设计此表如下 ID:自增长字段 City_Name:城市名称 City_Code:城市代码 我们根据城市代码来查询省.市.区.城市代码结构大致如下: 内蒙古:150000,呼和浩特:150100,新城区:150101. 其他地区代码与此一样,省级为省级编号+0000,市级为省级编号+市级编号+00,地区为省级编号+市级编号

jquery 多级下拉菜单核心代码

jquery 复制代码 代码如下: $(document).ready(function(){ $("ul li").hover(function(){ $(this).find("ul:first").show();//鼠标滑过查找li下面的第一个ul然后显示: },function(){ $(this).find("ul:first").hide();//鼠标离开隐藏li下面d的ul: }) $("ul li ul li ul&qu

jQuery插件实现多级联动菜单效果

开发中,有好多地方用到联动菜单,以前每次遇到联动菜单的时候都去重新写,代码重用率很低,前几天又遇到联动菜单的问题,总结了下,发现可以开发一个联动菜单的功能,以后想用的时候就方便多了.项目中每个页面都有引用jQuery,,开发个jQuery联动菜单插件,说动手就动手,下面跟大家分享分享. 我用的jQuery插件方式 (function($){ $.fn.casmenu=function(argvs){ //your code } })(jQuery); 其中jQuery传入的是jquery对象,需

jQuery实现多级下拉菜单jDropMenu的方法

本文实例讲述了jQuery实现多级下拉菜单jDropMenu的方法.分享给大家供大家参考.具体如下: 这里介绍的jQuery多级下拉菜单导航-多级下拉菜单,英文名叫 DropDown Menu.通过 each() 遍历添加相应的处理事件 mouseover,mouseout 和 tab 操作的支持.这个效果是我们平时最常见的一个效果之一,也是一个十分实用的一个 JavaScript 特效.例如我的 BlueNight 主题的主导航就使用了多级下拉菜单的这个效果. 运行效果截图如下: 在线演示地址

jQuery实现精美的多级下拉菜单特效

这是一款精美的多级下拉菜单美化,可以完美替代"select"来实现下拉菜单的效果.而且支持多级菜单,有加载等待效果,有层级分类展示. 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www

jQuery实现带动画效果的多级下拉菜单代码

本文实例讲述了jQuery实现带动画效果的多级下拉菜单代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的多级下拉菜单,带动画效果,所有的元素以ul li ul li ul li的循环格式嵌套 如果没有下级分类 就用li a结束嵌套,代码内不用toggle()的原因是为了在收缩菜单的时候同时也将该菜单的下级菜单以后的所有元素都隐藏. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-animate-style-dow

jQuery实现的多级下拉菜单效果代码

本文实例讲述了jQuery实现的多级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jQuery多级下拉菜单,在支持html5的浏览器中测试你会发现本菜单很智能,会自动判断浏览器边界来改变下拉菜单的显示方向,在ie下没发现此效果.整体上来看,和Windows系统的"经典"主题时的菜单风格特别相似,配合图片,整体效果还是相当有专业水准的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-nlevel-nav-me

jQuery实现的精美平滑二级下拉菜单效果代码

本文实例讲述了jQuery实现的精美平滑二级下拉菜单效果.分享给大家供大家参考,具体如下: 这是一款jQurey实现的向下二级导航菜单效果.效果非常不错,由上到下平滑延伸,给人的感觉协调唯美!js与html代码结构简单明了,便于使用与修改! 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh

Bootstrap 3多级下拉菜单实例

Bootstrap 虽好,但对于复杂的界面,还是有N多组件需要自己扩展,并且要往简洁.大气的Bootstrap界面上靠,着实要费一些功夫.下面分享一个Bootstrap 3的多级下拉菜单,无需第三方Js脚本,复制后直接可用. <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Bootstrap 3 的多级下拉菜单

jQuery树形下拉菜单特效代码分享

本文实例讲述了jQuery实现幻树形下拉菜单特效,实现自动伸缩,分享给大家供大家参考. 运行jQuery树形下拉菜单特效效果图: 为大家分享的jQuery树形下拉菜单代码如下 <head> <title>常用的jquery下拉菜单</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="

Bootstrap3多级下拉菜单

本文实例为大家分享了Bootstrap下拉菜单的具体代码,供大家参考,具体内容如下 效果图: - 需要引用bootstrap.min.css和bootstrap.min.css.js - 代码如下 <head> <meta charset="UTF-8"> <title>Bootstrap 3 的多级下拉菜单示例</title> <link rel="stylesheet" href="~/Conten

jquery实现平滑的二级下拉菜单效果

本文实例讲述了jquery实现平滑的二级下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款使用了jQuery实现的二级菜单特效,灰色风格,颜色自己不喜欢的就自己动动手吧,CSS代码经过了优化,水平高的自己拿出修改吧,这是一个在国外前端设计网站找到的导航菜单效果,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-soft-2level-menu-nav-codes/ 具体代码如下: <!DOCTYPE html>