绝对实用的CSS 滑动门式网站菜单

时间：2013-10-28 10:05 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多级的CSS导航菜单代码</title>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<style type="text/css">
body{background-color: #fff;font: normal 12px/1.6 simsun, Verdana, Lucida,'微软雅黑', Arial, Helvetica, sans-serif;}
#menu{height: 32px;margin: 8px auto 0 auto;width: 998px;border: solid #cccccc;border-width: 0 1px 0 1px;background: #26a2ee url(http://www.codefans.net/jscss/demoimg/201310/menu_01.gif) repeat-x 0 center;}
#menu ul{width: 996px;height: 32px;list-style-type: none;padding: 0px;margin: 0 auto;font-size: 14px;font-weight: bold;font-family: '微软雅黑';}
#menu ul,#menu li{overflow: visible;}
.f_li{float: left;width: 98px;line-height: 32px;text-align: center;margin: 0 -2px;}
#menu .f_li a{display: block;color: #FFFFFF;width: 98px;text-decoration: none;}
.f_line{float: left;width: 1px;height: 32px;line-height: 32px;background: url(http://www.codefans.net/jscss/demoimg/201310/menu_line.gif) no-repeat left center;}
.f_li_a{float: left;width: 98px;height: 32px;line-height: 32px;text-align: center;padding-top: 3px;font-weight: bold;background-image: url(http://www.codefans.net/jscss/demoimg/201310/menu_bg2.jpg);position: relative;margin: -3px -2px 0 -2px;}
#menu .f_li_a a{display: block;color: #30A5EE;width: 98px;text-decoration: none;}
#smenu{width: 998px;margin: 0px auto;border: solid #cccccc;border-width: 0 1px 1px 1px;background-color: #EAEAEA;}
#smenu ul{width: 998px;margin: 0px auto;padding: 0px;list-style-type: none;height: 33px;color: orange;font-family: '微软雅黑';}
#smenu a{color: #333333;font-weight: bold;text-decoration: none;}
#smenu a: visited{color: #30A5EE;text-decoration: none;}
#smenu a: hover,#smenu a: active{color: #FF0000;text-decoration: none;}
.s_li,.s_li_a{line-height: 33px;width: auto;display: none;height: 33px;}
.s_li_a{display: block;}
</style>
<script>
var menu_defid="3";
$(document).ready(function() {
	var o_mli = $("#f_"+menu_defid);
	var o_sli = $("#s_"+menu_defid);
	var my_li = $(".my_menu li");
	o_mli.attr("class","f_li_a");
	o_sli.show();
	my_li.live({
	   mouseenter:function(){
	      	var id = $(this).attr("data-id");
	      	var mli =  $("#f_"+id);
	      	var sli = $("#s_"+id);
	      		o_mli.attr("class","f_li");
	      		mli.attr("class","f_li_a");
	      		o_sli.hide();
	      		sli.show();
	   },
	   mouseleave:function(){
	      	var id = $(this).attr("data-id");
	      	var mli =  $("#f_"+id);
	      	var sli = $("#s_"+id);
	      		mli.attr("class","f_li");
	      		o_mli.attr("class","f_li_a");
	      		sli.hide();
	      		o_sli.show();
	   }
	});
});
</script>
<body>
<div class="my_menu" id="menu">
  <ul>
	<li data-id="1" class="f_li" id="f_1"><a href="/">源码搜藏</a></li>
	<li class="f_line"></li>
	<li data-id="2" class="f_li" id="f_2"><a href="#">热点</a></li>
	<li class="f_line"></li>
	<li data-id="3" class="f_li" id="f_3"><a href="#">汽车</a></li>
	<li class="f_line"></li>
	<li data-id="4" class="f_li" id="f_4"><a href="#">科技</a></li>
	<li class="f_line"></li>
	<li data-id="5" class="f_li" id="f_5"><a href="#">新闻</a></li>
	<li class="f_line"></li>
	<li data-id="6" class="f_li" id="f_6"><a href="#">音乐</a></li>
	<li class="f_line"></li>
	<li data-id="7" class="f_li" id="f_7"><a href="#">阿里云</a></li>
	<li class="f_line"></li>
	<li data-id="8" class="f_li" id="f_8"><a target="_blank" href="#">空降小姐</a></li>
	<li class="f_line"></li>
	<li data-id="9" class="f_li" id="f_9"><a target="_blank" href="#">火星车</a></li>
	<li class="f_line"></li>
	<li data-id="10" class="f_li" id="f_10"><a target="_blank" href="#">广告</a></li>
  </ul>
</div>
<div class="my_menu" id="smenu">
   <ul>
   	<li data-id="1" class="s_li" id="s_1" style="padding-left: 0px; display: list-item;"><a href="javascript:void(0)">最新更新</a> |  <a href="#">网页特效</a></li>
   	<li data-id="2" class="s_li" id="s_2" style="padding-left:98px;">
		<a  href="#">ASP源码</a>
		  |  <a href="#">飞度</a>
		  |  <a href="#">宝马</a>
		  |  <a href="#">奔驰</a>
   	</li>
   	<li data-id="3" class="s_li" id="s_3" style="padding-left:196px;">
		<a href="#">PHP教程</a>
		  |  <a href="#">偶尔局</a>
		  |  <a href="#">喝个水</a>
   	</li>
   	<li data-id="4" class="s_li" id="s_4" style="padding-left:0px;">
		<a href="#">天气预报</a>
		  |  <a href="#">烤鸡肉</a>
		  |  <a href="#">国际空间站</a>
		  |  <a href="#">天宫一号</a>
   	</li>
   	<li data-id="5" class="s_li" id="s_5" style="padding-left:392px;">
		<a href="#">ASP.NET</a>
		  |  <a href="#">基础文档</a>
		  |  <a href="#">专业书籍</a>
   	</li>
   	<li data-id="6" class="s_li" id="s_6" style="padding-left:490px;">
		<a href=" ">热浪</a>
		  |  <a href="#">天星一号</a>
   	</li>
   	<li data-id="7" class="s_li" id="s_7" style="padding-left:588px;">
		<a href=" ">我们的家</a>
		  |  <a  href="#">格力空调</a>
   	</li>
   	<li data-id="8" class="s_li" id="s_8" style="padding-left:0px;">
		<a href="javascript:void(0)">官方文档</a>
   	</li>
   	<li data-id="9" class="s_li" id="s_9" style="padding-left:0px;">
		<a href="javascript:void(0)">菜单项6</a>
   	</li>
   	<li data-id="10" class="s_li" id="s_10" style="padding-left:0px;">
		<a href="javascript:void(0)">水电费</a>
   	</li>
</ul>
</div>
</body>
</html>