以下是 橘色超漂亮滑动二级导航菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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" lang="zh-cn">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="keywords" content="js代码,菜单导航,js广告代码,js特效代码" />
<meta name="description" content="此代码内容为橘色超漂亮滑动二级导航菜单，属于站长常用代码" />
<title>橘色超漂亮滑动二级导航菜单</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>
<body><br /><br />
<script language="javascript">
function qiehuan(num){
for(var id = 0;id<=9;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>
<div id=menu_out>
<div id=menu_in>
<div id=menu>
<ul id=nav>
<li><a class=nav_on id=mynav0 onmouseover=javascript:qiehuan(0) href="#"><span>首 页</span></a></li>
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(1)" id="mynav1" class="nav_off"><span>内容</span></a></li>
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(2)" id="mynav2" class="nav_off"><span>js代码</span></a></li>
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(3)" id="mynav3" class="nav_off"><span>png图标</span></a></li>
<li class="menu_line"></li>
<li><a href="#" onmouseover="javascript:qiehuan(4)" id="mynav4" class="nav_off"><span>技术文档</span></a></li>
<li class="menu_line"></li>
<li><a href="#" onmouseover="javascript:qiehuan(5)" id="mynav5" class="nav_off"><span>广告达人</span></a></li>
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(6)" id="mynav6" class="nav_off"><span>网页素材</span></a></li>
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(7)" id="mynav7" class="nav_off"><span>设计欣赏</span></a></li><li class="menu_line"></li>
<li><a class=nav_off id=mynav8 onmouseover=javascript:qiehuan(8) href="#"><span>矢量素材</span></a></li>
<li class=menu_line></li>
<li><a class=nav_off id=mynav9 onmouseover=javascript:qiehuan(9) href="#" target=_blank><span>懒人论坛</span></a></li>
<li class=menu_line></li>
</ul>
<div id=menu_con><div id=qh_con0 style="display: block"><ul>
<li><a href="#"><span>栏目名称1</span></a></li><li class=menu_line2></li>
<li><a href="#"><span>栏目名称2</span></a></li><li class=menu_line2></li>
<li><a href="#"><span>栏目名称3</span></a></li>
</ul></div>
<div id=qh_con1 style="display: none"><ul>
<li><a href="#"><span>栏目名称4</span></a></li><li class=menu_line2></li>
<li><a href="#"><span>栏目名称5</span></a></li><li class=menu_line2></li>
<li><a href="#"><span>栏目名称6</span></a></li>
</ul></div>
<div id=qh_con2 style="display: none"><ul>
<li><a href="#"><span>栏目名称7</span></a></li><li class=menu_line2></li>
<li><a href="#"><span>栏目名称8</span></a></li><li class=menu_line2></li>
<li><a href="#"><span>栏目名称9</span></a></li>
</ul></div>
<div id=qh_con3 style="display: none"><ul>
<li><a href="#"><span>栏目名称10</span></a></li><li class=menu_line2></li>
<li><a href="#"><span>栏目名称11</span></a></li><li class=menu_line2></li>
<li><a href="#"><span>栏目名称12</span></a></li>
</ul></div>
<div id=qh_con4 style="display: none"><ul>
<li><a href="#"><span>栏目名称13</span></a></li><li class=menu_line2></li>
<li><a href="#"><span>栏目名称14</span></a></li><li class=menu_line2></li>
<li><a href="#"><span>栏目名称15</span></a></li>
</ul></div>
<div id=qh_con5 style="display: none"><ul>
<li><a href="#"><span>栏目名称16</span></a></li><li class=menu_line2></li>
<li><a href="#"><span>栏目名称17</span></a></li><li class=menu_line2></li>
<li><a href="#"><span>栏目名称18</span></a></li>
</ul></div>
<div id=qh_con6 style="display: none"><ul>
<li><a href="#"><span>栏目名称19</span></a></li><li class=menu_line2></li>
<li><a href="#"><span>栏目名称20</span></a></li><li class=menu_line2></li>
<li><a href="#"><span>栏目名称21</span></a></li>
</ul></div>
<div id=qh_con7 style="display: none"><ul>
<li><a href="#"><span>栏目名称22</span></a></li><li class=menu_line2></li>
<li><a href="#"><span>栏目名称23</span></a></li><li class=menu_line2></li>
<li><a href="#"><span>栏目名称24</span></a></li>
</ul></div>
<div id=qh_con8 style="display: none"><ul>
<li><a href="#"><span>栏目名称25</span></a></li><li class=menu_line2></li>
<li><a href="#"><span>栏目名称26</span></a></li><li class=menu_line2></li>
<li><a href="#"><span>栏目名称27</span></a></li>
</ul></div>
<div id=qh_con9 style="display: none"><ul>
<li><a href="#"><span>栏目名称28</span></a></li><li class=menu_line2></li>
<li><a href="#"><span>栏目名称29</span></a></li><li class=menu_line2></li>
<li><a href="#"><span>栏目名称30</span></a></li>
</ul></div>
</div></div></div></div>
</body>
</html>CSS代码(css.css):
/*ȫ����ʽ*/
*{font-size:12px;}
body{margin:0;padding:0;background-color:#FFFFFF;font-size:12px;color:#666666;font-family:"����",Arial,Helvetica,sans-serif;}
/*�������˵�*/
#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:966px;padding-left:4px;margin-left:auto;margin-right:auto;background:url(../images/menu_left.gif) no-repeat left top;}
#menu_in{background:url(../images/menu_right.gif) no-repeat right top;padding-right:4px;}
#menu{background:url(../images/menu_bg.gif) repeat-x;height:73px;}
.menu_line{background:url(../images/menu_line.gif) no-repeat center top;width:8px;}
.menu_line2{background:url(../images/menu_line2.gif) no-repeat center top;width:15px;}
#nav{padding-left:20px;}
#nav li{float:left;height:35px;}
#nav li a{float:left;display:block;padding-left:6px;height:35px;background:url(../images/menu_on_left.gif) no-repeat left top;cursor:pointer;text-decoration:none;}
#nav li a span{float:left;padding:11px 14px 10px 10px;line-height:14px;background:url(../images/menu_on_right.gif) no-repeat right top;font-size:14px;font-weight:bold;color:#FFFFFF;text-decoration:none;}
#nav li .nav_on{/*��꾭��ʱ�任����������JS��ȡ��ʽ*/
background-position:left 100%;}
#nav li .nav_on span{/*��꾭��ʱ�任����������JS��ȡ��ʽ*/
background-position:right 100%;color:#333333;text-decoration:none;padding:14px 14px 7px 10px;}
/*����Ŀ*/
#menu_con{text-align:left;padding-left:20px;clear:both;}
#menu_con li{float:left;height:22px;margin-top:8px;}
#menu_con li a{display:block;float:left;background:url(../images/menu_on_left2.gif) no-repeat left top;cursor:pointer;padding-left:3px;}
#menu_con li a span{float:left;padding:6px 10px 4px 10px;line-height:12px;background:url(../images/menu_on_right2.gif) no-repeat right top;}
#menu_con li a:hover{text-decoration:none;background:url(../images/menu_on_left2.gif) no-repeat left bottom;}
#menu_con li a:hover span{background:url(../images/menu_on_right2.gif) no-repeat right bottom;}
分享到QQ
分享到微博
微信扫一扫
