一款jQuery实现的二级导航菜单

jQuery - write less, do more.
网上用jQuery写的二级导航菜单非常多,功能和样式多种多样,但是我找了好久,没有找到自己想要的。

我想实现的效果主要有几点:

  1. 当前父栏目高亮,子栏目显示;
  2. 鼠标移到其他父栏目时,该父栏目下子栏目显示,且当前栏目取消高亮;
  3. 子栏目横向排列;

前一段时间自学了jQuery,发现jQuery确实很强大,而且也很好用。于是我尝试自己来实现这个导航。经过一番摸索和折腾,终于是做出来了。效果如下图:

jQuery实现的二级导航菜单

HTML代码太长,就不贴出来了。

JS代码如下:
// JavaScript Document
$(function() {
	var $navs = $(".nav:not(.navbg)"),$nav = $("li.navbg");
	$navs.hover(function() {
		$(this).attr("style","background:#CCC;").addClass('highlight').children("a").addClass("highlight").end().children("ul").show();
		$nav.removeClass("navbg").children("ul").hide();
	}, function() {
		$(this).removeAttr("style").removeClass("highlight").children("a").removeClass("highlight").end().children("ul").hide();
		$nav.addClass("navbg").children("ul").show();
	});
});

我已经将相关文件打包,大家可以点这里下载

演示地址:点击查看

本文为原创,转载请注明来自 THIS IS IT - 夜色冷月,并保留原文链接

相关日志

已留下一个脚印

  1. 多谢啦!

    BO  

留下足迹