网站导航菜单，JS两级横向布局

2024-09-05 12:20:40

字体：大中小

来源：转载

供稿：网友

一个网站导航菜单，两级菜单，横向排列，鼠标放上即激活菜单，然后显示对应项的二级菜单项，初步完成，没有美化，要用的朋友自己动手，丰衣足食。

<!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两级横向布局</title>   <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><style>   body {           text-align: center;           background: #FFF;           font: 12px Tahoma, sans-serif;           color: #000;   }   img {           border: 0;   }   ul,li {           list-style:none;   }   * {           margin: 0;           padding: 0;   }   .clear {           clear: both;           margin: 0 auto;           display: block;           font: 0/0 sans-serif;           height: 3px;   }   .head {           margin: 0 auto;           width: 760px;   }   .headl {           width: 10px;           float: left;   }   .headr {           width: 750px;           float: right;           padding: 8px 0 0 0;   }   .headt {           padding-top: 8px;           font-size: 14px;   }   .head li {           display: inline;   }   .head li a {           background: #E9F2FF;           border: 1px solid #CCC;           padding: 2px 15px;   }   .head li a:hover {           background: #B3D3FF;           text-decoration: none;           color: #D30102;   }   </style>   </head>   <body>   <script type="text/javascript">   function fetch_object(idname)   {    var my_obj = document.getElementById(idname);    return my_obj;   }   function toggle_nav(obj)   {    for (i = 1; i<= 9; i++ )    {     var sub_nav = fetch_object("sub_nav_" + i);     var sub_nav_index = fetch_object("sub_nav_0");     sub_nav_index.style.display = "none";     if (obj == i)     {      sub_nav.style.display = "block";     }     else    {      sub_nav.style.display = "none";     }    }   }   </script>   <div class="head">           <div class="headl"></div>           <div class="headr">                   <ul>                   <li onmouseover="javascript:toggle_nav(1)">首页</li>                   <li onmouseover="javascript:toggle_nav(2)">导航分类</li>                   <li onmouseover="javascript:toggle_nav(3)">源码栏目</li>                   <li onmouseover="javascript:toggle_nav(4)">文章学院</li>                   <li onmouseover="javascript:toggle_nav(5)">控件下载</li>                   <li onmouseover="javascript:toggle_nav(6)">网页特效</li>                   <li onmouseover="javascript:toggle_nav(7)">书籍教程</li>                   <li onmouseover="javascript:toggle_nav(8)">技术论坛</li>                   <li onmouseover="javascript:toggle_nav(9)">示例菜单</li>                   </ul>                   <div class="clear"></div>                   <div id="sub_nav_0" class="headt" style="display:block">把鼠标放到主菜单上</div>                <div id="sub_nav_1" class="headt" style="display:none">                   小栏目1 | 小栏目 | 小栏目 | 小栏目                   </div>                     <div id="sub_nav_2" class="headt" style="display:none">                   小栏目2 | 小栏目 | 小栏目 | 小栏目                   </div>                     <div id="sub_nav_3" class="headt" style="display:none">                   小栏目3 | 小栏目 | 小栏目 | 小栏目                   </div>                     <div id="sub_nav_4" class="headt" style="display:none">                   小栏目4 | 小栏目 | 小栏目 | 小栏目                   </div>                     <div id="sub_nav_5" class="headt" style="display:none">                   小栏目5 | 小栏目 | 小栏目 | 小栏目                   </div>                     <div id="sub_nav_6" class="headt" style="display:none">                   小栏目6 | 小栏目 | 小栏目 | 小栏目                   </div>                     <div id="sub_nav_7" class="headt" style="display:none">                   小栏目7 | 小栏目 | 小栏目 | 小栏目                   </div>                     <div id="sub_nav_8" class="headt" style="display:none">                   小栏目8 | 小栏目 | 小栏目 | 小栏目                   </div>                     <div id="sub_nav_9" class="headt" style="display:none">                   小栏目9 | 小栏目 | 小栏目 | 小栏目                   </div>           </div>   </div>   <div class="clear"></div>   </body>   </html>

上一篇：竖直感应鼠标的多级展开菜单

下一篇：强制点击广告的Js代码