js导航菜单(自写)简单大方

首页 > 网络编程 > JavaScript > 基础知识 更新日期: 2015-10-02
一个简单的多级下拉菜单菜单但是由于业务和样式上的要求,为了简洁找了好多都不适合于是自己写了一个,晒出来与大家分享,感兴趣的朋友可以参考下哈,希望可以帮助到你
最近由于项目需要一个简单的多级下拉菜单菜单但是由于业务和样式上的要求,为了简洁,在网上找了很多导航菜单控件都不大适合,所以突发奇想自己写个吧~该动手就动手啊~
HTML部分
<ul>
<li><a href="javascript:void(0)" test>二级 li 1</a></li>
<li><a href="javascript:void(0)" test>二级 li 2</a>
<ul>
<li><a href="javascript:void(0)" test>三级 li 1</a></li>
<li><a href="javascript:void(0)" test>三级 li 2</a></li>
<li><a href="javascript:void(0)" test>三级 li 3</a></li>
<li><a href="javascript:void(0)" test>三级 li 4</a></li>
<li><a href="javascript:void(0)" test>三级 li 5</a></li>
<li><a href="javascript:void(0)" test>三级 li 6</a>
<ul>
<li><a href="javascript:void(0)" test>四级 li 1</a></li>
<li><a href="javascript:void(0)" test>四级 li 2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0)" test>二级 li 3</a>
<ul>
<li><a href="javascript:void(0)" test>三级 li 6</a></li>
<li><a href="javascript:void(0)" test>三级 li 7</a></li>
<li><a href="javascript:void(0)" test>三级 li 8</a></li>
<li><a href="javascript:void(0)" test>三级 li 9</a></li>
<li><a href="javascript:void(0)" test>三级 li 10</a></li>
</ul>
</li>
<li><a href="javascript:void(0)" test>二级 li 4</a>
<ul>
<li><a href="javascript:void(0)" test>三级 li 11</a></li>
<li><a href="javascript:void(0)" test>三级 li 12</a></li>
<li><a href="javascript:void(0)" test>三级 li 13</a></li>
<li><a href="javascript:void(0)" test>三级 li 14</a></li>
<li><a href="javascript:void(0)" test>三级 li 15</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0)" test>一级li 2</a>
<ul>
<li><a href="javascript:void(0)" test>二级 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+CSS实现简单的二级下拉导航菜单效果
    JS+CSS实现简单的二级下拉导航菜单效果
    这篇文章主要介绍了JS+CSS实现简单的二级下拉导航菜单效果,通过简单的JavaScript页面元素遍历及样式操作实现下拉菜单效果,非常简单实用,需要的朋友可以参考下本文实例讲述了JS+CSS实现简单的二级下拉导航菜单效果.分享给大家供大家参考.具体如下: 这是一款CSS配合JavaScript实现二级下拉导航菜单,好像CSS要配合JS才能写出好效果来,本款 ...
  • jQuery实现简洁的导航菜单效果
    jQuery实现简洁的导航菜单效果
    这篇文章主要介绍了jQuery实现简洁的导航菜单效果,简洁大方的导航菜单,需要的朋友可以参考下本文实例讲述了JavaScript实现的伸展收缩型菜单代码.分享给大家供大家参考.具体如下:运行效果截图如下: 鼠标悬浮时菜单项向上移动成蓝底白字,点击之后底部会有蓝条表示当前选中项. 页面代码,菜单的每一项都是一个 div ,其中包括一个 ul 用来放置显示文字等 ...
  • 基于dropdown.js实现的两款美观大气的二级导航菜单
    基于dropdown.js实现的两款美观大气的二级导航菜单
    这篇文章主要介绍了基于dropdown.js实现的两款美观大气的二级导航菜单,通过调用js插件实现导航效果,非常简单实用,需要的朋友可以参考下本文实例讲述了基于dropdown.js实现的两款美观大气的二级导航菜单.分享给大家供大家参考.具体如下: 1. 蓝色风格导航菜单 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js ...
  • JS实现黑色大气的二级导航菜单效果
    JS实现黑色大气的二级导航菜单效果
    这篇文章主要介绍了JS实现黑色大气的二级导航菜单效果,具有延迟响应鼠标事件显示切换效果的功能,非常简单实用,需要的朋友可以参考下本文实例讲述了JS实现黑色大气的二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款自己做的不错的二级导航菜单,黑色风格,是根据仿淘宝支付宝菜单而做的,自我感觉还算行吧. 运行效果截图如下: 在线演示地址如下: http:/ ...
  • 基于jQuery的简单的列表导航菜单
    基于jQuery的简单的列表导航菜单
    最近一段时间准备开始学习JQUERY,感觉JQUERY的功能非常强大,而且代码量也减少了许多....代码也非常的清晰!下面是我做的一个简单的导航菜单,因为是新手,难免有什么不对的地方,希望大家拍砖! 好了 开始进入正题吧: 1.首先定义CSS样式表: <ul class="tip"> <li><a href= ...
猜你喜欢