首页 > 代码库 > jquery手风琴导航菜单特效
jquery手风琴导航菜单特效
实用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><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>jQuery可折叠菜单-素材吧</title><link href="css/jscss.css" type="text/css" rel="stylesheet"><script src="js/jquery-1.3.2.js" type="text/javascript"></script><script type="text/javascript">$(function(){$(".subNav").click(function(){ $(this).toggleClass("currentDd").siblings(".subNav").removeClass("currentDd") $(this).toggleClass("currentDt").siblings(".subNav").removeClass("currentDt") // 修改数字控制速度， slideUp(500)控制卷起速度 $(this).next(".navContent").slideToggle(500).siblings(".navContent").slideUp(500); }) })</script></head><body><!-- 代码 开始 --><div class="subNavBox"> <div class="subNav currentDd currentDt">新闻中心</div> <ul class="navContent " style="display:block"> <li><a href="#">添加新闻</a></li> <li><a href="#">添加新闻</a></li> <li><a href="#">添加新闻</a></li> <li><a href="#">新闻管理</a></li> </ul> <div class="subNav">关于我们</div> <ul class="navContent"> <li><a href="#">添加新闻</a></li> <li><a href="#">新闻管理</a></li> <li><a href="#">添加新闻</a></li> <li><a href="#">新闻管理</a></li> </ul> <div class="subNav">业务系统</div> <ul class="navContent"> <li><a href="#">添加新闻</a></li> <li><a href="#">添加新闻</a></li> <li><a href="#">新闻管理</a></li> </ul> <div class="subNav">招商加盟</div> <ul class="navContent"> <li><a href="#">添加新闻</a></li> <li><a href="#">添加新闻</a></li> <li><a href="#">新闻管理</a></li> <li><a href="#">添加新闻</a></li> <li><a href="#">新闻管理</a></li> </ul></div><!--以下代码并不是素材部分，请自主删除以下代码--> <style> .pull-left{ float:left; display:inline; margin-left:10px; font-size:12px;}.footjbl{ width:700px; margin:0 auto;position:fixed; bottom:20px; }</style> <div class="footjbl"><ul class="dropdown-menu nav-category" style="padding-top: 10px;"> <li class="pull-left"><a href="http://www.sucai888.com" target="_blank">素材吧:</a></li> <li class="pull-left"><a href="http://www.sucai888.com/category/tubiaosucai" target="_blank">图标</a></li> <li class="pull-left"><a href="http://www.sucai888.com/category/texiao" target="_blank">网页特效</a> </li> <li class="pull-left"><a href="http://www.sucai888.com/category/moban" target="_blank">网页模板</a> </li> <li class="pull-left"><a href="http://www.sucai888.com/category/psdsucai" target="_blank">PSD素材</a> </li> <li class="pull-left"><a href="http://www.sucai888.com/category/shiliangsucai" target="_blank">矢量素材</a> </li> <li class="pull-left"><a href="http://www.sucai888.com/category/html5css3" target="_blank">HTML5</a> </li> <li class="pull-left"><a href="http://www.sucai888.com/category/zitixiazai" target="_blank">字体下载</a> </li> <li class="pull-left"><a href="http://www.sucai888.com/category/gaoqingtupiansucai" target="_blank">高清图片</a></li> <li class="pull-left"><a href="http://www.sucai888.com/category/default" target="_blank">更多分享</a> </li> <li class="pull-left"><a href="http://www.sucai888.com/pin/lastest" target="_blank">最新素材</a></li> <li class="pull-left"><a href="http://www.sucai888.com/pin/hot" target="_blank">最热素材</a></li> </ul></div></body></html>
演示地址
jquery手风琴导航菜单特效
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。