当前位置:编程学习 > JS >>

风格清新的CSS导航菜单

一款风格清新的CSS导航菜单,最多可以扩展至两级,文章站、产品站、资讯类和娱乐类网站改下风格就可以用了,无需修改代码,兼容性该页做的也挺不错,代码分享给大家。
答案:<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>风格清新的CSS导航菜单</title>
<!--for main menu navigation start!-->
<script type="text/javascript">
	function qiehuan(num){
		for(var id=0;id<=7;id++)
		{
			if(id==num)
			{
				document.getElementById("qh_con"+id).style.display="block";
				document.getElementById("mynav"+id).className="nav_on";
			}
			else
			{
				document.getElementById("qh_con"+id).style.display="none";
				document.getElementById("mynav"+id).className="";
			}
		}
	}
</script>
<!--for main menu navigation end!-->
<style>
/*main menu navigation start!*/
body {font-family:\5B8B\4F53,Arial Narrow,arial,serif;background:#ffffff;font-size:12px;}
#menu ul{padding:0;border:0;list-style:none;line-height:150%;margin-top: 0;margin-right: 0;margin-bottom: 0;margin-left: 15px;}
#menu_out{width:950px;padding-left:5px;	margin-left:auto;margin-right:auto;	background:url('/jscss/demoimg/201204/menu_left.gif') no-repeat left top;}
#menu_in{background:url('/jscss/demoimg/201204/menu_right.gif') no-repeat right top;padding-right:5px;}
#menu{background:url('/jscss/demoimg/201204/menu_bg.gif') repeat-x;	height:71px;position:relative; left:0px; top:0px;}
.menu_line{	background:url('/jscss/demoimg/201204/menu_line.gif') no-repeat center top;	width:8px;}
.menu_line2{background:url('/jscss/demoimg/201204/menu_line2.gif') no-repeat center top;width:15px;}
#nav{padding-left:5px;}
#nav li{float:left;height:35px;}
#nav li a{float:left;display:block;padding-left:10px;height:45px;cursor:pointer;text-decoration:none;}
#nav li a span{float:left;padding:16px 18px 10px 18px;line-height:14px;background:url(' menu_on_right.gif') no-repeat right top;font-size:16px;font-weight:bold;color:#FFFFFF;text-decoration:none;}
#nav li .nav_on{background:url('/jscss/demoimg/201204/menu_on_left.gif') repeat-x left top;}
#nav li .nav_on span{background:url('/jscss/demoimg/201204/menu_on_left.gif'); color:#333333;text-decoration:none;	padding:14px 24px 9px 20px;}
/*main menu navigation end!*/
/*sub menu start!*/
#menu_con{text-align:left;padding-left:10px;clear:both;}
#menu_con li{float:left;height:22px;margin-top:8px;}
#menu_con li a{display:block;float:left;background:url('/jscss/demoimg/201204/menu_on_left2.gif') no-repeat left top;cursor:pointer;padding-left:3px;}
#menu_con li a span{float:left;	padding:6px 5px 4px 5px;	line-height:12px;background:url('/jscss/demoimg/201204/menu_on_right2.gif') no-repeat right top;}
#menu_con li a:hover{text-decoration:none;background:url('/jscss/demoimg/201204/menu_on_left2.gif') no-repeat left bottom;}
#menu_con li a:hover span{	background:url('/jscss/demoimg/201204/menu_on_right2.gif') no-repeat right bottom;}
/*sub menu end!*/
#search { position:absolute;top:58px;right: 65px; }
/*sub menu location start!*/
#qh_con0 { position:absolute;top:38px;left: 22px; }
#qh_con1 { position:absolute;top:38px;left: 110px; }
#qh_con2 { position:absolute;top:38px;left: 225px; }
#qh_con3 { position:absolute;top:38px;left: 340px; }
#qh_con4 { position:absolute;top:38px;left: 452px; }
#qh_con5 { position:absolute;top:38px;left: 568px;}
#qh_con6 { position:absolute;top:38px;left: 682px;}
#qh_con7 { position:absolute;top:38px;left: 725px;}
/*sub menu location end!*/
</style>
</head>
<body>
<div id="menu_out">
  <!--menu_out start!-->
  <div id="menu_in">
    <!--menu_in start!-->
    <div id="menu">
      <!--menu start!-->
      <ul id="nav">
        <li><a href="/" onmouseover="javascript:qiehuan(0)" id="mynav0" class="nav_on"><span>首 页</span></a></li>
        <li><a href="#" onmouseover="javascript:qiehuan(1)" id="mynav1" class="nav_off"><span>关于我们</span></a></li>
        <li><a href="#" onmouseover="javascript:qiehuan(2)" id="mynav2" class="nav_off"><span>产品展示</span></a></li>
        <li><a href="#" onmouseover="javascript:qiehuan(3)" id="mynav3" class="nav_off"><span>新闻中心</span></a></li>
        <li><a href="#" onmouseover="javascript:qiehuan(4)" id="mynav4" class="nav_off"><span>人才招聘</span></a></li>
        <li><a href="#" onmouseover="javascript:qiehuan(5)" id="mynav5" class="nav_off"><span>商城链接</span></a></li>
        <li><a href="#" onmouseover="javascript:qiehuan(6)" id="mynav6" class="nav_off"><span>支持中心</span></a></li>
        <li><a href="#" onmouseover="javascript:qiehuan(7)" id="mynav7" class="nav_off"><span>联系我们</span></a></li>
      </ul>	 
      <div id="menu_con">
        <!--menu_con start!-->
        <div id="qh_con0" style="display: block">
          <ul>
            <li><a href="#"><span>欢迎光临</span></a></li>
          </ul>
        </div>
        <div id="qh_con1" style="display: none">
          <ul>
            <li><a href="#"><span>栏目一</span></a></li>
            <li class="menu_line2"></li>
            <li><a href="#"><span>栏目一</span></a></li>
            <li class="menu_line2"></li>
            <li><a href="#"><span>栏目一</span></a></li>
            <li class="menu_line2"></li>
          </ul>
        </div>
        <div id="qh_con2" style="display: none">
          <ul>
             <li><a href="#"><span>栏目一</span></a></li>
            <li class="menu_line2"></li>
            <li><a href="#"><span>栏目一</span></a></li>
            <li class="menu_line2"></li>
            <li><a href="#"><span>栏目一</span></a></li>
            <li class="menu_line2"></li>
            <li><a href="#"><span>栏目一</span></a></li>
            <li class="menu_line2"></li>
          </ul>
        </div>
        <div id="qh_con3" style="display: none">
          <ul>
            <li><a href="#"><span>栏目一</span></a></li>
            <li class="menu_line2"></li>
            <li><a href="#"><span>栏目一</span></a></li>
            <li class="menu_line2"></li>
            <li><a href="#"><span>栏目一</span></a></li>
            <li class="menu_line2"></li>
          </ul>
        </div>
        <div id="qh_con4" style="display: none">
          <ul>
            <l

上一个:Javascript写的Tab标签菜单(函数版)
下一个:点击展开的竖向二级下拉菜单

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,