jquery实现侧边栏手风琴三级导航菜单demo

jquery实现侧边栏手风琴三级导航菜单

效果图:

引入文件，font-awesome为字体库文件：

    <link rel="stylesheet" type="text/css" href="Font-Awesome-3.2.1/css/font-awesome.min.css"><script type="text/javascript" src="jquery-2.1.4.min.js"></script>

css代码：

    ul {list-style: none;}.s-side {position: fixed;top: 0;left: 0;width: 230px;bottom: 0;overflow: auto;font-size: 16px;background-color: #7d7472;color: #fff;}.s-side > ul {margin-top: 0;padding-left: 0;}.s-side > ul > li {line-height: 40px;width: 100%;border: 1px solid;}.s-side > ul > li > a > i,.s-side > ul > li > div > i {display: inline-block;width: 40px;text-align: center;}i.icon-chevron-up {float: right;}.iconRotate {transform: rotate(180deg);transition: transform .5s;}.s-firstNav > i.icon-chevron-up {margin-right: 5px;margin-top: 10px;}    .s-firstDrop {background-color: #07a3c3;}.s-firstDrop > li {line-height: 33px;border: 1px solid;}.s-firstDrop,.s-secondDrop {display: none;}        .s-secondNav > i.icon-chevron-up {margin-right: 18px;margin-top: 12px;}    .s-secondDrop {padding-left: 20px;background-color: #decece;}

html代码：

    <div class="s-side"><ul><li class="s-firstItem"><a href=""><i class="icon-home"></i><span>一级导航</span></a></li><li><div class="d-firstNav s-firstNav"><i class="icon-tasks"></i><span>一级菜单</span><i class="icon-chevron-up"></i></div><ul class="d-firstDrop s-firstDrop"><li><div class="d-secondNav s-secondNav"><i class="icon-circle"></i><span>二级菜单</span><i class="icon-chevron-up"></i></div><ul class="d-secondDrop s-secondDrop"><li class="s-thirdItem"><a href="">三级导航</a></li><li class="s-thirdItem"><a href="">三级导航</a></li></ul></li><li><div class="d-secondNav s-secondNav"><i class="icon-circle"></i><span>二级菜单</span><i class="icon-chevron-up"></i></div><ul class="d-secondDrop s-secondDrop"><li class="s-thirdItem"><a href="">三级导航</a></li></ul></li><li class="s-secondItem"><a href=""><i class="icon-circle"></i><span>二级导航</span></a></li></ul></li><li><div class="d-firstNav s-firstNav"><i class="icon-bar-chart"></i><span>一级菜单</span><i class="icon-chevron-up"></i></div><ul class="d-firstDrop s-firstDrop"><li class="s-secondItem"><i class="icon-circle"></i><a href="">二级导航</a></li><li class="s-secondItem"><i class="icon-circle"></i><a href="">二级导航</a></li></ul></li></ul></div>

js代码：

    $(function() {$('.d-firstNav').click(function() {dropSwift($(this), '.d-firstDrop');});$('.d-secondNav').click(function() {dropSwift($(this), '.d-secondDrop');});/*** @param dom   點擊的當前元素* @param drop  處理的下拉菜單*/function dropSwift(dom, drop) {dom.next().slideToggle();dom.parent().siblings().find('.icon-chevron-up').removeClass('iconRotate');dom.parent().siblings().find(drop).slideUp();var iconChevron = dom.find('.icon-chevron-up');if (iconChevron.hasClass('iconRotate')) {iconChevron.removeClass('iconRotate');} else {iconChevron.addClass('iconRotate');}}})

demo地址：https://github.com/RidingACodeToStray/jQuery-three-level-accordion-slidebar

jquery实现侧边栏手风琴三级导航菜单demo相关推荐

java 三级菜单栏的添加_[Java教程]jquery实现的三级导航菜单实例代码
[Java教程]jquery实现的三级导航菜单实例代码 0 2016-01-02 15:00:02 jquery实现的三级导航菜单实例代码: 使用最多的可能是二级导航菜单,所以网上的代码一大堆,三级菜 ...
一款基jquery超炫的动画导航菜单
今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览 ...
html左侧分级导航,jquery实现无限分级横向导航菜单的方法
本文实例讲述了jquery实现无限分级横向导航菜单的方法.分享给大家供大家参考.具体实现方法如下: 1. jquery插件版本代码如下: (function($){ $.fn.extend({ dro ...
html5导航菜单置顶,jQuery和css3顶部固定导航菜单特效插件
这是一款非常实用的jQuery和css3顶部固定导航菜单特效插件.我们曾经在很多网站上都看到过这种顶部固定导航菜单特效.Disqus For Websites的导航菜单就是一个很好的例子. HTML结 ...
一款jQuery立体感动态下拉导航菜单特效
一款jQuery立体感动态下拉导航菜单特效,鼠标经过,在菜单栏上方下拉出一个背景图片,效果十分不错的一款jquery特效. 对IE6都是兼容的,希望大家好好研究研究. 适用浏览器:IE6.IE7.IE ...
基于jQuery的AJAX实现三级联动菜单
最近学习jQuery,所以就写了一个关于中国省市县/区的三级联动菜单,权当相互学习,相互促进,特此记录. 下面是嵌套js的html文件: <!DOCTYPE html> <html ...
使用Jquery+CSS如何创建流动导航菜单-Fluid Navigation
有时,一个网站的导航菜单文字不能提供足够的信息,来表达当前菜单按钮的内容,一般的解决办法是使用提示信息ToolTip,那么本文介绍的流动导航菜单Fluid Navigation也可以解决此问题,同时也 ...
用li写的一个简单的横向导航菜单demo
用ul li写的一个简单的横向导航菜单,很实用: /* 所有class为menu的div中的ul样式 */ div.menu ul { list-style:none; /* 去掉ul前面的符号 */ ...
下拉滑动二级导航菜单demo
网页效果,显示主菜单,带你给用户鼠标移至主菜单时会产生下拉菜单,移开隐藏以下为完整的代码和部分解释整个父容器为300px,显示50px,鼠标移至主菜单则下拉250px <!DOCTYPE h ...
ajax伸缩菜单,jQuery实现的动态伸缩导航菜单实例
/p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> jquery select body {p ...

jquery实现侧边栏手风琴三级导航菜单demo

jquery实现侧边栏手风琴三级导航菜单demo相关推荐

最新文章

热门文章