头像

兼容主流浏览器的jQuery多级手风琴菜单

来源:http://www.huoseo.com/js/40.html 18***38 2015-04-08 07:43浏览(3507) 收藏

为啥叫手风琴呢?由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中使用手风琴效果会给用户带来非常好的体验。
兼容主流浏览器的jQuery多级手风琴菜单
分类:图片代码 > 手风琴 难易:初级

程序员,你不是一个人;网站开发QQ群:35248186,在线充值,或联系QQ2589223951直接充值

查看演示 下载资源: 554 下载资源 下载积分: 20 积分

HTML

首先引入jQuery和手风琴插件。

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="accordion.js"></script>

然后我们写一个层级菜单。我们以素材火导航为例:

<ul id="menus"> 
   <li><a href="http://www.huoseo.com" target="_blank">素材火</a></li> 
   <li><a href="#">网站模板</a> 
    <ul> 
     <li><a href="http://www.huoseo.com/templates/3-0-0-0-0">行业</a></li> 
     <li><a href="http://www.huoseo.com/templates/4-0-0-0-0">商城</a></li> 
     <li><a href="http://www.huoseo.com/templates/5-0-0-0-0">企业</a></li> 
     <li><a href="http://www.huoseo.com/templates/8-0-0-0-0">后台</a></li> 
     <li><a href="http://www.huoseo.com/templates/9-0-0-0-0">其他</a></li> 
    </ul> </li> 
   <li><a href="#">网页特效</a> 
    <ul> 
     <li class="active"><a href="http://www.huoseo.com/js/7-0-0-0" target="_blank">图片代码</a></li> 
     <li><a href="#">其它特效</a> 
      <ul> 
       <li><a href="http://www.huoseo.com/js/53-0-0-0">Ajax</a></li> 
       <li><a href="http://www.huoseo.com/js/113-0-0-0">动画效果</a></li> 
       <li><a href="http://www.huoseo.com/js/105-0-0-0">分页</a></li> 
       <li><a href="http://www.huoseo.com/js/106-0-0-0">日期时间</a></li> 
      </ul> </li> 
     <li><a href="http://www.huoseo.com/help/template" target="_blank">申请扒模板</a></li> 
    </ul> </li> 
   <li><a href="http://www.huoseo.com/help/index" target="_blank">关于我们</a></li> 
</ul>

jQuery

最后我们调用手风琴插件,一个漂亮的手风琴效果就算完成了。

$("#menus").accordion({
    speed: 500,//单位毫秒,菜单展开和关闭延时时间。
    closedSign: '[+]',//当下级菜单关闭时,显示于菜单旁边的内容。
    openedSign: '[-]' //当下级菜单展开时,显示于菜单旁边的内容。
});

最后值得提醒的是:如果你想菜单初始载入时就展开的话,可以在对应要展开的li上加class="current"。

最新交易
评论2
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 2589223951

  • 头像 椅子
    11-23 07:48
    ca***88
    已经使用。。。
  • 头像 沙发
    04-09 09:34
    黄***源
    你的后台好像也有这种效果,bootstrap很强大呵呵
1 2
如何中彩票 www.40156.com-掌上中彩app| www.206305.com-彩票端靠谱吗| www.513762.com-体彩小程序破解| www.266341.com-即开彩-| www.405367.com-彩票历史中奖| www.566402.com-快乐彩票的官网| www.694631.com-体育彩票有哪几种| www.22jc.cc-天空彩禁肖| www.3957.me-莱利彩票官网| www.749242.com-幸运中彩票软件| www.877036.com-彩票刷流水方案| www.cai3456.cc-玩时时彩教你三招| www.oj34.com-c168c彩票-| www.179101.com-福彩河南快三| www.494895.com-焦点篮球竞彩计划| www.964514.com-福彩幸运点半| www.lu6.com-人人彩是正规的吗| www.pp39.com-湖北今天快三走势图| www.0000.ren-彩票8位数-| www.041191.com-双彩开奖走势图今晚| www.823.cm-哪种彩票好中奖| www.738526.com-怎样加入信用彩票盘| www.869981.com-彩票k线图卖点| www.972054.com-微信上可以买彩票吗| www.in33.com-10086移动彩票| www.11eg.com-天下彩票骗局揭秘| www.69426.com-八馬彩票下載| www.10dj.cc-网冠彩可靠吗| www.315.tv-福彩快三是作假的吗| www.672218.com-网上彩宝是真的吗| www.217744.com-福彩网app-| www.353139.com-网易彩票电脑端| www.669321.com-彩票单双大小统计器| www.764167.com-投彩网app下载| www.64da.com-維彩视频-| www.1899.xyz-时时彩区间打法技巧| www.712559.com-齐鲁福利彩票中奖号| www.818319.com-搜狐彩票网好不好| www.894782.com-7星彩开奖结果直播| www.190712.com-快三赢钱的技巧方法| www.246511.com-3d彩宝走势图连线| www.385213.com-足彩14场中奖晒图| www.592028.com-体彩七位数玩法介绍| www.706803.cc-博众时时彩论坛| www.695520.com-竞彩足球投注合买| www.791557.com-彩票店招人-| www.868202.com-七星彩开心论坛| www.938687.com-福彩通平台是真的吗| www.996121.com-足彩19047期| www.ea70.com-彩神2-| www.457318.com-祝中彩票的诗词| www.eq54.com-快三预测神器软件| www.3rk.com-京彩集团注册| www.7680.vip-彩票正码是什么意思| www.972379.com-快三游戏中奖规则| www.5rb.com-分分彩哪个是官网| www.72pz.cc-体彩串关容错表| www.2586.vip-利用数学知识买彩票| www.530916.com-时时彩本金投注比例| www.054883.com-国彩454cc-| www.012860.com-时时中彩票登录入口| www.125298.com-彩票选几个好| www.255222.com-谁有快三的网站| www.981476.com-双色球预测易彩网| www.as77.com-福彩三d开奖号今天| www.ti17.com-159竞彩足球| www.670026.com-海南彩票之王争霸赛| www.791768.com-体彩即开种类| www.949082.com-快购彩网-| www.li4.com-买彩票怎么买| www.ta13.com-十二生肖彩票叫什么| www.35tq.com-最新信博彩票官网| www.5828.biz-体彩排列三怎么兑奖| www.63800.com-足彩赚钱-| www.031965.com-阿里彩票被坑| www.216554.com-民间买彩票中奖咒语| 创世纪彩票www.36787f.com| www.788041.com-稽山鉴水足彩博客| www.374515.com-山东体彩官方电话| www.487241.com-天天彩4中奖介绍| www.555104.com-快三怎么顺龙| www.21932.com-红宇体彩店正规吗| www.311369.com-红旗彩票网址| www.453620.com-牛彩网图迷九| www.921377.com-足球彩票中奖图片| www.12dj.cc-合肥彩票店生意转让| www.4309.vip-双彩论坛客户| www.74391.com-中彩网买彩票| www.wg39.com-贵州福彩快三走势| www.303209.com-优乐彩票网投| www.589602.com-澳门六星彩特马网址| www.041935.com-安徽快三微信群| www.394434.com-彩虹网站-| www.552568.com-彩票预测分析师| www.661550.com-全民彩票m-| www.84kf.com-篮球彩票大小分结果| www.328206.com-福彩3d形态论坛| www.22652.com-七星彩机选五注| www.206721.com-福彩快3平台| www.454541.com-彩票两元中多少| www.117557.com-中国彩票开奖信息| www.435027.com-怎么短信购彩票| www.636137.com-彩虹六号墨冰的标志| www.786928.com-彩票中奖指南百度云| www.921275.com-彩神ii官方网| 500彩票网www.903019.com| www.77.cx-dd彩票软件-| www.42188.cc-百彩网网址是什么| www.020825.com-体彩源码-| www.111365.com-小站宝彩票怎么注册| www.641011.com-金博彩票网-| www.1419.vip-玩彩虹伞的背景音乐| www.791405.com-彩经网排列三百位| www.893316.com-内蒙古体育彩票网| www.984439.com-彩运8app骗局| www.fj02.com-快三是国家的吗| www.q00.org-福利彩票今天开奖| www.688.link-福彩3d形态预测| www.735762.com-福彩3d高概率秘籍| www.la54.com-八亿彩下载-| www.67.cm-3d今天报纸彩图版| www.758.win-时时彩和值玩法技巧| www.130987.com-河南彩礼标准限制| www.24090.com-手绘彩铅山水画| www.375789.com-已恢复的网络购彩| www.509068.com-乾隆粉彩九桃天球瓶| www.579412.com-酷彩白珐琅-| www.643131.com-福利彩票黑彩犯罪吗| www.476868.com-福少时时彩做号| www.004750.com-吉林快三彩乐乐推荐| www.61021.com-彩票什么是屠龙| www.026057.com-澳门博彩十大平台| www.bn10.com-人人彩票app下载| www.44gi.com-七彩蓝田投资怎么样| www.08co.com-初学者临摹彩铅画| www.925511.com-旭彩app下载| www.xg58.com-彩虹七号steam| www.vd13.com-正规的彩票网站大全| www.95yh.cc-鸿彩灯光灯库下载| www.43xy.com-为你出彩什么意思| www.0635.date-单场彩必发盈亏指数| www.00133.cc-彩票3d专家推荐号| www.48995.com-合肥十一选五爱乐彩| www.000944.com-众彩网赵公明3d| www.246844.com-91彩神正规吗| www.529835.com-主播直播彩票| www.608728.com-尚未派彩是什么意思| www.666112.com-网上时时彩盈利表| www.643534.com-福彩中心官网公告| www.415908.com-安徽快三28期| www.586925.com-每周五开奖的彩票| www.101644.com-红彩网邀请码在哪里| www.872779.com-8k彩票购彩大厅| www.968134.com-微信彩票群快三| www.702908.com-彩客彩票怎么样| www.44480.cc-彩票六选三-| www.558866.cc-彩虹童谣-| www.925558.com-广西快三三胆定一| www.cs54.com-5彩票app-| www.37375.cc-以前金山改成酷彩吧| www.272367.com-今天七星彩开奖号码| www.73297.com-体彩软件官方下载| www.109025.com-百彩网免费料大全| www.379779.com-彩票运行原理|