JS两级横向机关的网站导航菜单代码

发布时间：2018-08-19 18:19:16 所属栏目：创业来源：站长网

导读：javascript打造的两级横向机关的网站导航菜单，此刻将结果代码免费放出来，其拭魅这款代码很早就见于某知名网页计划网站，其后这个网站封锁了，猛火已经记不清它的名字了，可是有许多网站依然在仿制并相沿这款结果，不多说费话，看结果。留意哦，因为时刻关

　　javascript打造的两级横向机关的网站导航菜单，此刻将结果代码免费放出来，其拭魅这款代码很早就见于某知名网页计划网站，其后这个网站封锁了，猛火已经记不清它的名字了，可是有许多网站依然在仿制并相沿这款结果，不多说费话，看结果。

　　留意哦，因为时刻相关，这里没有美化，不外对付老站长们来说，一眼就可以看出来哪些网站在行使此菜单。

　　DEMO：

<!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两级横向机关 - Liehuo.Net</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"><a href="/"></a></div> <div class="headr"> <ul> <li onmouseover="javascript:toggle_nav(1)"><a href="/">首页</a></li> <li onmouseover="javascript:toggle_nav(2)"><a href="/">导航分类</a></li> <li onmouseover="javascript:toggle_nav(3)"><a href="/">源码栏目</a></li> <li onmouseover="javascript:toggle_nav(4)"><a href="/">文章学院</a></li> <li onmouseover="javascript:toggle_nav(5)"><a href="/">控件下载</a></li> <li onmouseover="javascript:toggle_nav(6)"><a href="/">网页殊效</a></li> <li onmouseover="javascript:toggle_nav(7)"><a href="/">书本教程</a></li> <li onmouseover="javascript:toggle_nav(8)"><a href="/">技能论坛</a></li> <li onmouseover="javascript:toggle_nav(9)"><a href="/">示例菜单</a></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"> <a href="/">小栏目1</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> </div> <div id="sub_nav_2" class="headt" style="display:none"> <a href="/">小栏目2</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> </div> <div id="sub_nav_3" class="headt" style="display:none"> <a href="/">小栏目3</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> </div> <div id="sub_nav_4" class="headt" style="display:none"> <a href="/">小栏目4</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> </div> <div id="sub_nav_5" class="headt" style="display:none"> <a href="/">小栏目5</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> </div> <div id="sub_nav_6" class="headt" style="display:none"> <a href="/">小栏目6</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> </div> <div id="sub_nav_7" class="headt" style="display:none"> <a href="/">小栏目7</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> </div> <div id="sub_nav_8" class="headt" style="display:none"> <a href="/">小栏目8</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> </div> <div id="sub_nav_9" class="headt" style="display:none"> <a href="/">小栏目9</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> | <a href="/">小栏目</a> </div> </div> </div> <div class="clear"></div> </body> </html> <br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如