jq+css+html简单实现导航下拉菜单

相信导航栏下拉菜单是web开发最常见的一个item了.这里就不做介绍了，直接上code.

Html部分

var timeout = 1;
var closetimer = 0;
var ddmenuitem = 0;

// close showed layer
function mclose() {
if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// cancel close timer
function mcancelclosetime() {
if (closetimer) {
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;
// -->

$(function () {
// open hidden layer
$(".a_nav_Menu").mouseover(function () {
var currentId = $(this).attr("id");

// cancel close timer
mcancelclosetime();

// close old layer
if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
$("#" + currentId.replace("a_","")).width($("#" + currentId).parent().width() - 1);
$("#" + currentId).css({ "background": "#49AB6E", "color": "white" });

// get new layer and show it
ddmenuitem = document.getElementById(currentId.replace("a_", ""));
ddmenuitem.style.visibility = 'visible';
});

// go close timer
$(".a_nav_Menu").mouseout(function () {
var currentId = $(this).attr("id");
$("#" + currentId).css({ "background": "", "color": "#49AB6E" });

closetimer = window.setTimeout(mclose, timeout);
});

// go close timer
$(".div_nav_Menu").mouseout(function () {
var currentId = $(this).attr("id");
$("#a_" + currentId).css({ "background": "", "color": "#49AB6E" });
closetimer = window.setTimeout(mclose, timeout);
});

$(".div_nav_Menu").mouseover(function () {
var currentId = $(this).attr("id");
$("#a_" + currentId).css({ "background": "#49AB6E", "color": "white" });
mcancelclosetime();
});
})

View Code

这里只是简单实现一下，如果页面要求比较高，可能就不是很实用了，这个只是当时接了一个私活，因为比较注重业务而不是code所以就写的比较快。

作　　者：请叫我头头哥

出　　处：http://www.cnblogs.com/toutou/

关于作者：专注于微软平台的项目开发。如有问题或建议，请多多赐教！

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。

特此声明：所有评论和私信都会在第一时间回复。也欢迎园子的大大们指正错误，共同进步。或者直接私信我

声援博主：如果您觉得文章对您有帮助，可以点击文章右下角“推荐”一下。您的鼓励是作者坚持原创和持续写作的最大动力！