網(wǎng)站導(dǎo)航菜單，JS兩級橫向布局

2024-09-05 12:20:40

字體：大中小

供稿：網(wǎng)友

一個網(wǎng)站導(dǎo)航菜單，兩級菜單，橫向排列，鼠標(biāo)放上即激活菜單，然后顯示對應(yīng)項的二級菜單項，初步完成，沒有美化，要用的朋友自己動手，豐衣足食。

<!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>網(wǎng)站導(dǎo)航菜單，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   id="iwvjtn8m0"   class="head">           <div   id="iwvjtn8m0"   class="headl"></div>           <div   id="iwvjtn8m0"   class="headr">                   <ul>                   <li onmouseover="javascript:toggle_nav(1)">首頁</li>                   <li onmouseover="javascript:toggle_nav(2)">導(dǎo)航分類</li>                   <li onmouseover="javascript:toggle_nav(3)">源碼欄目</li>                   <li onmouseover="javascript:toggle_nav(4)">文章學(xué)院</li>                   <li onmouseover="javascript:toggle_nav(5)">控件下載</li>                   <li onmouseover="javascript:toggle_nav(6)">網(wǎng)頁特效</li>                   <li onmouseover="javascript:toggle_nav(7)">書籍教程</li>                   <li onmouseover="javascript:toggle_nav(8)">技術(shù)論壇</li>                   <li onmouseover="javascript:toggle_nav(9)">示例菜單</li>                   </ul>                   <div   id="iwvjtn8m0"   class="clear"></div>                   <div   class="iwvjtn8m0"   id="sub_nav_0" class="headt" style="display:block">把鼠標(biāo)放到主菜單上</div>                <div   class="iwvjtn8m0"   id="sub_nav_1" class="headt" style="display:none">                   小欄目1 | 小欄目 | 小欄目 | 小欄目                   </div>                     <div   class="iwvjtn8m0"   id="sub_nav_2" class="headt" style="display:none">                   小欄目2 | 小欄目 | 小欄目 | 小欄目                   </div>                     <div   class="iwvjtn8m0"   id="sub_nav_3" class="headt" style="display:none">                   小欄目3 | 小欄目 | 小欄目 | 小欄目                   </div>                     <div   class="iwvjtn8m0"   id="sub_nav_4" class="headt" style="display:none">                   小欄目4 | 小欄目 | 小欄目 | 小欄目                   </div>                     <div   class="iwvjtn8m0"   id="sub_nav_5" class="headt" style="display:none">                   小欄目5 | 小欄目 | 小欄目 | 小欄目                   </div>                     <div   class="iwvjtn8m0"   id="sub_nav_6" class="headt" style="display:none">                   小欄目6 | 小欄目 | 小欄目 | 小欄目                   </div>                     <div   class="iwvjtn8m0"   id="sub_nav_7" class="headt" style="display:none">                   小欄目7 | 小欄目 | 小欄目 | 小欄目                   </div>                     <div   class="iwvjtn8m0"   id="sub_nav_8" class="headt" style="display:none">                   小欄目8 | 小欄目 | 小欄目 | 小欄目                   </div>                     <div   class="iwvjtn8m0"   id="sub_nav_9" class="headt" style="display:none">                   小欄目9 | 小欄目 | 小欄目 | 小欄目                   </div>           </div>   </div>   <div   id="iwvjtn8m0"   class="clear"></div>   </body>   </html>

上一篇：豎直感應(yīng)鼠標(biāo)的多級展開菜單

下一篇：強(qiáng)制點(diǎn)擊廣告的Js代碼