JS两级横向布局的网站导航菜单代码

发布时间：2018-08-20 18:37:04 所属栏目：政策来源：站长网

导读：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>
提示：可修改后代码再运行!

（编辑：武汉站长网）

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