js导航菜单(自写)简单大方
2013-03-28 00:00
627 查看
最近由于项目需要一个简单的多级下拉菜单菜单但是由于业务和样式上的要求,为了简洁,在网上找了很多导航菜单控件都不大适合,所以突发奇想自己写个吧~该动手就动手啊~
HTML部分
Javascript部分
不过暂时还没有封装成类似jquery的写法,其实还可以继续封成一个控件~
HTML部分
<h2> SuperFish</h2> <ul class="nav" hid="root"> <li><a href="javascript:void(0)" testid="aa">一级li 1</a> <ul> <li><a href="javascript:void(0)" testid="bb">二级 li 1</a></li> <li><a href="javascript:void(0)" testid="cc">二级 li 2</a> <ul> <li><a href="javascript:void(0)" testid="dd">三级 li 1</a></li> <li><a href="javascript:void(0)" testid="ee">三级 li 2</a></li> <li><a href="javascript:void(0)" testid="ff">三级 li 3</a></li> <li><a href="javascript:void(0)" testid="gg">三级 li 4</a></li> <li><a href="javascript:void(0)" testid="hh">三级 li 5</a></li> <li><a href="javascript:void(0)" testid="ii">三级 li 6</a> <ul> <li><a href="javascript:void(0)" testid="jj">四级 li 1</a></li> <li><a href="javascript:void(0)" testid="kk">四级 li 2</a></li> </ul> </li> </ul> </li> <li><a href="javascript:void(0)" testid="ll">二级 li 3</a> <ul> <li><a href="javascript:void(0)" testid="mm">三级 li 6</a></li> <li><a href="javascript:void(0)" testid="nn">三级 li 7</a></li> <li><a href="javascript:void(0)" testid="oo">三级 li 8</a></li> <li><a href="javascript:void(0)" testid="pp">三级 li 9</a></li> <li><a href="javascript:void(0)" testid="qq">三级 li 10</a></li> </ul> </li> <li><a href="javascript:void(0)" testid="rr">二级 li 4</a> <ul> <li><a href="javascript:void(0)" testid="ss">三级 li 11</a></li> <li><a href="javascript:void(0)" testid="tt">三级 li 12</a></li> <li><a href="javascript:void(0)" testid="uu">三级 li 13</a></li> <li><a href="javascript:void(0)" testid="vv">三级 li 14</a></li> <li><a href="javascript:void(0)" testid="ww">三级 li 15</a></li> </ul> </li> </ul> </li> <li><a href="javascript:void(0)" testid="xx">一级li 2</a> <ul> <li><a href="javascript:void(0)" testid="ss">二级 li 11</a></li> </ul> </li> </ul>
Javascript部分
<script language="javascript" type="text/javascript"> var navigationBar = function () { //使用时将testid属性换成href属性即可 var currentUrlHref = "jj"; var root = $("ul[hid='root']"); $(root).find(">li").attr("first_level", true); $(root).find(">li>a").addClass("nav_first_style"); //递归向下查找可展开元素并且绑定toggle展开事件 var searchChildren = function (root) { if (root.find(">li").length > 0) { $(root).addClass("ul_style"); var liChildren = root.find(">li"); $(liChildren).each(function (idx, item) { searchChildren($(item)); }) } else if (root.find(">ul").length > 0) { $(root).addClass("li_style"); if ($(root).attr("first_level") != true.toString()) { $(root).find(">a").addClass("li_style_a"); } var aLink = $(root).find(">a"); //初始装载的时候判断当前url是不是和导航栏中的东西匹配 if (currentUrlHref == $(aLink).attr("testid")) { findInitPosition(aLink); } $(aLink).toggle(function () { $(this).addClass("li_style_a_selected"); $(this).parent().find(">ul").show("fast"); //隐藏非一级节点下的所有兄弟元素 if ($(this).parent().attr("first_level") != true.toString()) { $(this).parent().siblings().find(">a").removeClass("li_style_a_selected"); $(this).parent().siblings().each(function (idx, item) { removeClassAndHide(item); }) } else { $(this).addClass("nav_first_style_selected"); $(this).removeClass("li_style_a_selected"); $(this).parent().siblings().find(">a").removeClass("nav_first_style_selected"); $(this).parent().siblings().each(function (idx, item) { removeClassAndHide(item); }) } }, function () { if ($(this).parent().attr("first_level") == true.toString()) { $(this).addClass("nav_first_style_selected"); $(this).parent().siblings().find(">a").removeClass("nav_first_style_selected"); } removeClassAndHide($(this).parent()); }) var ulChildren = root.find(">ul"); $(ulChildren).each(function (idx, item) { $(item).hide(); searchChildren($(item)); }); } else { if ($(root).attr("first_level") != true.toString()) { $(root).find(">a").addClass("li_style_a"); } $(root).addClass("li_style"); $(root).click(function () { if ($(root).attr("first_level") != true.toString()) { $(this).find(">a").addClass("li_style_a_selected"); $(this).siblings().find(">a").removeClass("li_style_a_selected"); $(this).siblings().each(function (idx, item) { removeClassAndHide(item); addFirstLevelClass(item); }) } else { $(this).find(">a").addClass("nav_first_style_selected"); $(this).find(">a").removeClass("li_style_a_selected"); $(this).siblings().find(">a").removeClass("nav_first_style_selected"); removeClassAndHide(this); } }) if (currentUrlHref == $(root).find(">a").attr("testid")) { findInitPosition($(root).find(">a")); } } } //递归查找初始位置 var findInitPosition = function (aLink) { var currentLi = $(aLink).parent(); if ($(currentLi).parent().parent().find(">a").length > 0) { findInitPosition($(currentLi).parent().parent().find(">a")); } if ($(currentLi).find(">ul").length > 0) { $(currentLi).find(">ul").show("fast"); } if ($(currentLi).attr("first_level") != true.toString()) { $(currentLi).find(">a").addClass("li_style_a_selected"); } else { $(currentLi).find(">a").addClass("nav_first_style_selected"); } } //递归向下删除所有子节点的选中样式 var removeClassAndHide = function (li) { if ($(li).attr("first_level") != true.toString()) { $(li).find(">a").removeClass("li_style_a_selected"); $(li).find(">ul").hide("fast"); if ($(li).find(">ul").length > 0) { $(li).find(">ul>li").each(function (idx, item) { removeClassAndHide(item); }); } } else if ($(li).attr("first_level") == true.toString()) { $(li).find(">ul").hide("fast"); $(li).find(">ul>li").each(function (idx, item) { removeClassAndHide(item); }) } else { $(li).find(">ul").show("fast"); $(li).find(">ul>li").each(function (idx, item) { removeClassAndHide(item); }) } } //递归向上添加第一层节点样式 var addFirstLevelClass = function (li) { if ($(li).attr("first_level") != true.toString()) { addFirstLevelClass($(li).parent().parent()); } else { if (!$(li).find(">a").hasClass("nav_first_style_selected")) { $(li).find(">a").addClass("nav_first_style_selected"); $(li).siblings().find(">a").removeClass("nav_first_style_selected"); } } } //创建导航 var createNav = function () { searchChildren(root); } createNav(); } var initNav = new navigationBar(); </script>
不过暂时还没有封装成类似jquery的写法,其实还可以继续封成一个控件~
相关文章推荐
- js导航菜单(自写)简单大方
- js实现简单的隐藏导航菜单动态显示
- JS+CSS实现简单的二级下拉导航菜单效果
- 自己写的简单大方的树形导航菜单
- 一个简单的导航菜单 纯js
- JS+CSS实现简单的二级下拉导航菜单效果
- js左侧三级菜单导航代码
- JS超级酷的导航菜单代码
- JS+CSS实现的简单折叠展开多级菜单效果
- js简单的抽屉菜单
- [置顶] 4行代码简单实现js树形菜单
- JS + CSS 实现导航下拉菜单
- js实现的黑背景灰色二级导航菜单效果代码
- 简单的二级菜单导航实现css代码
- JS实现带有抽屉效果的产品类网站多级导航菜单代码
- JS+CSS实现简单滑动门(滑动菜单)效果
- js实现横向伸展开的二级导航菜单代码
- 用ReactJs写一个简单的手风琴菜单效果
- AngularJS+Bootstrap3多级导航菜单的实现代码
- JS+CSS打造简约的多级横向导航菜单