JQuery实现仿宝马中国的菜单效果[原创]
是否有人见过宝马中国网站的页面（http://www.bmw.com.cn/zh/index_narrowband.html）,它的菜单效果是比较好看的,我曾分析过它的脚本，复杂无比，干脆自己模仿它的效果用JQuery写一个算了。
下面是我很早之前的实现的效果，虽然比起宝马中国的，还差很多，但揍合着用吧。
要实现这种效果，我首选JQuery，因为它小而强大。废话少说，先给出Html代码：
Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title><link href="Style/Style.css" rel="stylesheet" type="text/css" /><script type="text/javascript" language="javascript" src="plugin/JQuery1.2.3/jquery-1.2.3.pack.js"></script><script type="text/javascript" language="javascript" src="Js/Menu.js"></script> </head> <body> <!-- 头部 --><div id="header"> <div id="menu"> <ul> <li> <a href="#" class="menuTitle">首 页</a> </li> <li> <a href="#" class="menuTitle">菜单</a> <div> <a href="#">菜单菜单</a><br /> <a href="#">菜单菜单</a><br /> <a href="#">菜单菜单</a> </div> </li> <li> <a href="#" class="menuTitle">菜单菜单</a> <div> <a href="#">菜单菜单</a><br /> <a href="#">菜单菜单菜单</a><br /> <a href="#">菜单</a> </div> </li> <li> <a href="#" class="menuTitle">菜单菜单</a> <div> <a href="#">菜单菜单菜单</a><br /> <a href="#">菜单菜单菜单</a><br /> <a href="#">菜单菜单</a><br /> </div> </li> <li> <a href="#" class="menuTitle">菜单</a> <div> <a href="#">菜单菜单</a><br /> <a href="#">菜单菜单</a><br /> </div> </li> <li> <a href="#" class="menuTitle">菜单菜单</a> <div> <a href="#">菜单菜单</a><br /> <a href="#">菜单菜单</a> </div> </li> <li> <a href="#" class="menuTitle">菜单菜单</a> <div> <a href="#">菜单菜单</a><br /> <a href="#">菜单菜单</a><br /> <a href="#">菜单菜单菜单</a><br /> <a href="#">菜单菜单</a><br /> <a href="#">菜单菜单菜单</a><br /> <a href="#">菜单</a> </div> </li> </ul> </div> <!-- 菜单栏 End--> <div class="clear"></div> <!-- 搜索栏 --> <div id="underMenu"> <a href="#" onclick="SetHomePage(this)">设为首页</a> <a href="#" onclick="AddFavorite()">添加收藏</a> Search:<input type="text" /> </div> <!-- 搜索栏 End--> <!-- Logo --> <div class="logo1"> <a href="#"><img src="Images/logo1.gif" border="0" /></a> </div> <div class="logo2"> <a href="#"><img src="Images/logo2.gif" border="0" /></a> </div> <!-- Logo End--></div><!-- 头部 End--><!-- 时间 --><div id="timeContainer"> <div id="time"> <script>
document.getElementById('time').innerHTML=new Date().toLocaleString().replace(/星期[日一二三四五六]/,'')+' 星期'+'日一二三四五六'.charAt(new Date().getDay()); setInterval("document.getElementById('time').innerHTML=new Date().toLocaleString().replace(/星期[日一二三四五六]/,'')+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);
</script> </div> <div class="timeRight"><div class="timeRightFlow"></div></div></div><!-- 时间 End --><!-- 用于演示点击其它地方隐藏菜单 --><div style="width:800px; height:300px; background:#fff;"></div> </body></html>下面是样式：
Code/**//************************************* 公共 *******/body {}{margin:0px; font-size:12px; font-family: "宋体"; color: #585F69; line-height:20px;}a:link {}{text-decoration : none ;color : #585F69; }a:visited {}{text-decoration : none ;color :#585F69;}a:hover {}{text-decoration : none ;color : #336699;}a:active {}{text-decoration : none ;color : #585F69;}.clear {}{clear:both;}/**//************************************ 头共用部分 *******/#header {}{background:#6B7481; width:100%; margin-top:13px;}/**//*菜单*/#menu {}{width:750px; height:22px; padding:18px 0px 0px 10px; border-bottom:1px solid #cccccc;}#menu .menuTitle {}{margin-right:25px; font-family: "宋体"; color:#ffffff; padding:5px; line-height:22px; font-size: 14px;}#menu ul{}{margin:0px; list-style:none;}#menu li {}{float:left; position:relative;}#menu li div {}{display:none; width:200px; height:200px; position:absolute; top:22px; left:0px; padding:5px; background:#ffffff; white-space:nowrap; border-right:1px solid #cccccc; border-bottom:1px solid #cccccc; border-left:1px solid #cccccc; filter:alpha(opacity=90);}/**//* Logo */.logo1 {}{position:absolute; top:0px; right:211px;}.logo2 {}{position:absolute; top:0px; right:20px;}/**//*搜索栏*/#underMenu {}{padding:5px 0px 5px 330px; color:#ffffff; margin:0px; font-family: "宋体"; line-height:22px; font-size:12px;}#underMenu a {}{color:#ffffff;}#underMenu img {}{margin-left:5px; cursor:hand;}/**//*时间栏*/#timeContainer {}{border-bottom:2px solid #6B7481; height:20px;}#timeContainer #time {}{float:left; font-size:13px; background:#ffffff; width:204px; border-right:1px solid #6B7481; height:20px;}#timeContainer .timeRight {}{float:left; width:100%; margin-right:-25em; background:#ffffff; filter:alpha(opacity=60); height:20px;}#timeContainer .timeRightFlow {}{margin-right:22em;}Codevar flag = false; // 菜单是否展开的标记$(document).ready(function(){ // 遍历每个菜单
$("#menu .menuTitle").each(function(){ var menu = $(this); var subMenu = $(this).next(); if(subMenu.html() == null) return; // 单击事件 $(menu).click(function(){ if(subMenu.css("display") == "none") { subMenu.show(); menu.css({background:"#ffffff", color:"black"}); flag = true;
} else { subMenu.hide(); menu.css({background:"#6B7481", color:"#ffffff"}); flag = false; } return false; }); // 鼠标经过事件 $(menu).hover( function(){ if(flag) { HideAll(); subMenu.show(); menu.css({background:"#ffffff", color:"black"}); } }, function(){} ); }); // 点击菜单外的地方，隐藏 $("body").click(function(){ HideAll(); flag = false; });});// 隐藏全部菜单function HideAll(){ if(flag) { $("#menu li div").hide(); $(".menuTitle").css({background:"#6B7481", color:"#ffffff"}); }}
由于上面做了比较详细的注释，加上代码本身简单易懂，我就不做说明了。
不过，还遗留一点Bug，就是当鼠标移开，菜单隐藏时，我是将背景颜色写成跟背景一样的，所以如果要换背景时，不需要改这个地方，扩展性比较差，请高手提一下意见。
