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

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

<!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代码,菜单导航" />
<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{
 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;
}
</style>
</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="http://www.lanrentuku.com/">

<LI class="menu_line"></LI><li><a href="http://www.lanrentuku.com/" 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="http://www.lanrentuku.com/"><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>

<br /><br />

<p align="center"></p>
<div align="center"><p>使用方法：</p>
<p>修改&nbsp;for(var id = 0;id&lt;=9;id++)数字9，可修改一级导航数量。</p>
<p>&nbsp;</p></div>
<p align="center"></p>
</body>
</html>

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

时间： 2024-11-10 08:13:02

仿中国站长素材频道滑动二级导航菜单的相关文章

JS实现黑色大气的二级导航菜单效果_javascript技巧

本文实例讲述了JS实现黑色大气的二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款自己做的不错的二级导航菜单,黑色风格,是根据仿淘宝支付宝菜单而做的,自我感觉还算行吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-black-style-2l-nav-menu-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

javascript 经典的滑动门导航菜单代码

提示:您可以先修改部分代码再运行 <!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>经典的滑

js实现的黑背景灰色二级导航菜单效果代码_jquery

本文实例讲述了js实现的黑背景灰色二级导航菜单效果代码.分享给大家供大家参考.具体如下: 这是一款js实现的黑背景灰色二级导航菜单,兼容IE6.firefox的js+css横向二极导航菜单.挺简洁,不过很清新,二级菜单是水平显示在主菜单的下方,采用流行的微软雅黑字体,若不想用这种字体,可换成默认的宋体即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-black-bgcolor-2level-nav-style-codes/ 具体代码如

jQuery+css实现的蓝色水平二级导航菜单效果代码_jquery

本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格,从其它网站上扣下来的,我认为很不错,赶紧分享给大家吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-blue-line-2level-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo

Jquery实现带动画效果的经典二级导航菜单_jquery

导航菜单比较实用,当然还是选择经典的,代码最少的,效果最好的喽,各位童鞋请围观哦,废话不说, 效果图如下,欢迎评价: 看代码: 复制代码 代码如下: <!DOCTYPE html > <html> <head> <title>一款带动画效果的经典二级导航菜单Jquery特效</title> <meta name="author" content="Jquery" /> <meta name

基于dropdown.js实现的两款美观大气的二级导航菜单_javascript技巧

本文实例讲述了基于dropdown.js实现的两款美观大气的二级导航菜单.分享给大家供大家参考.具体如下: 1. 蓝色风格导航菜单 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-dropdown-blue-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

JS实现的简洁二级导航菜单雏形效果_javascript技巧

本文实例讲述了JS实现的简洁二级导航菜单雏形效果.分享给大家供大家参考.具体如下: 这是一个二级导航菜单雏形,风格简洁,圆角形,也是当前比较流行的菜单效果,支持二级,演示内容是随便搞的,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-2l-nav-menu-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN

JavaScript实现简单的二级导航菜单实例_javascript技巧

本文实例讲述了JavaScript实现简单的二级导航菜单的方法.分享给大家供大家参考.具体如下: <!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" la

纯CSS横向二级导航菜单代码

提示:您可以先修改部分代码再运行 纯CSS横向二级导航菜单代码 Home Single Level Dropdown Dropline Flyout Support Contact 提示:您可以先修改部分代码再运行