仿中国站长素材频道滑动二级导航菜单

作者：袖梨 2022-07-02

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"> 
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>" lang="zh-CN"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta name="keywords" content="JS代码,菜单导航" /> 
<meta name="description" content="滑动二级导航菜单" /> 
<title></title> 
<style> 
/*全局样式*/ 
*{ 
 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{ 
  
 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; 
  
} 
.menu_line{ 
 background:url(../images/menu_line.gif) no-repeat center top; 
  
} 
.menu_line2{ 
 background:url(../images/menu_line2.gif) no-repeat center top; 
  
} 
#nav{ 
 padding-left:20px; 
} 
#nav li{ 
 float:left; 
  
} 
#nav li a{ 
 float:left; 
 display:block; 
 padding-left:6px; 
  
 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- 
 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; 
  
 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- 
 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; 
} 
</style> 
</head> 
<body> 
<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="<a href="http://www.lanrentuku.com/"><SPAN">http://www.lanrentuku.com/"><SPAN</a>>首 页</A></LI>
<LI class="menu_line"></LI><li><a href="<a href="http://www.lanrentuku.com/">http://www.lanrentuku.com/</a>" onmouseover="javascript:qiehuan(1)" id="mynav1" class="nav_off">懒人图库</a></li> 
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(2)" id="mynav2" class="nav_off">JS代码</a></li> 
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(3)" id="mynav3" class="nav_off">PNG图标</a></li> 
<li class="menu_line"></li> 
<li><a href="#" onmouseover="javascript:qiehuan(4)" id="mynav4" class="nav_off">技术文档</a></li> 
<li class="menu_line"></li> 
<li><a href="#" onmouseover="javascript:qiehuan(5)" id="mynav5" class="nav_off">广告达人</a></li> 
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(6)" id="mynav6" class="nav_off">网页素材</a></li> 
<li class="menu_line"></li><li><a href="#" onmouseover="javascript:qiehuan(7)" id="mynav7" class="nav_off">设计欣赏</a></li><li class="menu_line"></li> 
<LI><A class=nav_off id=mynav8 onmouseover=javascript:qiehuan(8) href="#">矢量素材</A></LI> 
<LI class=menu_line></LI> 
<LI><A class=nav_off id=mynav9 onmouseover=javascript:qiehuan(9) href="#" target=_blank>懒人论坛</A></LI> 
<LI class=menu_line></LI> 
</UL> 
<div id=menu_con><div id=qh_con0 style="DISPLAY: block"><UL> 
  <LI><a href="<a href="http://www.lanrentuku.com/"><span">http://www.lanrentuku.com/"><span</a>>栏目名称1</A></LI><LI class=menu_line2></LI> 
  <LI><A href="#">栏目名称2</A></LI><LI class=menu_line2></LI> 
  <LI><A href="#">栏目名称3</A></LI> 
</UL></div> 
<div id=qh_con1 style="DISPLAY: none"><UL> 
  <LI><a href="#">栏目名称4</A></LI><LI class=menu_line2></LI> 
  <LI><A href="#">栏目名称5</A></LI><LI class=menu_line2></LI> 
  <LI><A href="#">栏目名称6</A></LI> 
</UL></div> 
<div id=qh_con2 style="DISPLAY: none"><UL> 
  <LI><a href="#">栏目名称7</A></LI><LI class=menu_line2></LI> 
  <LI><A href="#">栏目名称8</A></LI><LI class=menu_line2></LI> 
  <LI><A href="#">栏目名称9</A></LI> 
</UL></div> 
<div id=qh_con3 style="DISPLAY: none"><UL> 
  <LI><a href="#">栏目名称10</A></LI><LI class=menu_line2></LI> 
  <LI><A href="#">栏目名称11</A></LI><LI class=menu_line2></LI> 
  <LI><A href="#">栏目名称12</A></LI> 
</UL></div> 
<div id=qh_con4 style="DISPLAY: none"><UL> 
  <LI><a href="#">栏目名称13</A></LI><LI class=menu_line2></LI> 
  <LI><A href="#">栏目名称14</A></LI><LI class=menu_line2></LI> 
  <LI><A href="#">栏目名称15</A></LI> 
</UL></div> 
<div id=qh_con5 style="DISPLAY: none"><UL> 
  <LI><a href="#">栏目名称16</A></LI><LI class=menu_line2></LI> 
  <LI><A href="#">栏目名称17</A></LI><LI class=menu_line2></LI> 
  <LI><A href="#">栏目名称18</A></LI> 
</UL></div> 
<div id=qh_con6 style="DISPLAY: none"><UL> 
  <LI><a href="#">栏目名称19</A></LI><LI class=menu_line2></LI> 
  <LI><A href="#">栏目名称20</A></LI><LI class=menu_line2></LI> 
  <LI><A href="#">栏目名称21</A></LI> 
</UL></div> 
<div id=qh_con7 style="DISPLAY: none"><UL> 
  <LI><a href="#">栏目名称22</A></LI><LI class=menu_line2></LI> 
  <LI><A href="#">栏目名称23</A></LI><LI class=menu_line2></LI> 
  <LI><A href="#">栏目名称24</A></LI> 
</UL></div> 
<div id=qh_con8 style="DISPLAY: none"><UL> 
  <LI><a href="#">栏目名称25</A></LI><LI class=menu_line2></LI> 
  <LI><A href="#">栏目名称26</A></LI><LI class=menu_line2></LI> 
  <LI><A href="#">栏目名称27</A></LI> 
</UL></div> 
<div id=qh_con9 style="DISPLAY: none"><UL> 
  <LI><a href="#">栏目名称28</A></LI><LI class=menu_line2></LI> 
  <LI><A href="#">栏目名称29</A></LI><LI class=menu_line2></LI> 
  <LI><A href="#">栏目名称30</A></LI> 
</UL></div>
</div></div></div></div>
 
 
<div align="center">使用方法： 
修改 for(var id = 0;id<=9;id++)数字9，可修改一级导航数量。 
 </div> 
 
</body> 
</html>

提示：您可以先修改部分代码再运行

仿中国站长素材频道滑动二级导航菜单

相关文章

精彩推荐