javascript HTML+CSS实现经典橙色导航菜单

本文实例介绍了javascript结合HTML CSS实现橙色导航菜单，分享给大家供大家参考，具体内容如下
效果图：
<html ><head> <title>超漂亮的HTML导航菜单CSS代码</title> <style>#top { display: block; text-align: left; height: 105px; position: relative; z-index: 0;} .m { margin: 0 auto; width: 970px;} body { font-size: 12px;} a { color: #333; text-decoration: none;}a:link {text-decoration: none; } /* Download by http://hovertree.com*/ a.blue:link, a.blue:visited {color: #014cc9;text-decoration: none; }a.blue:hover, a.blue:active {color: #014cc9;text-decoration: underline; }a.org:link, a.org:visited {color: #ff4e00;text-decoration: none; }a:hover, a:active, a.org:hover, a.org:active {color: #ff4e00;text-decoration: underline; } #navpart { background: url（http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif） repeat-x center top; height: 105px; width: 950px; z-index: 0; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; clear: both; position: relative;}#navpart .sideleft {background: url（http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif） no-repeat left bottom;float: left;height: 105px;width: 6px; }#navpart .sideright {background: url（http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif） no-repeat right bottom;float: right;height: 105px;width: 6px; } #navmenubar { height: 32px; float: left; display: inline; margin: 0 -6px; width: 100%; position: relative; z-index: 3; top: 0;} #hot { background: url（http://hovertree.com/hvtimg/201508/7qmwfe9p.png） no-repeat left top; height: 21px; width: 19px; position: absolute; top: -5px; right: 2px; z-index: 666; background:black;} #navmenubar .sideleft { background: url（http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif） no-repeat left bottom; float: left; height: 32px; width: 6px; display: inline; margin: 0 0 0 8px;} #navmenubar .sideright { background: url（http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif） no-repeat right bottom; float: left; height: 32px; width: 6px; display: inline; margin: 0 4px 0 -2px;}/* NAVMENU */#navmenubar .navmenu { background: url（http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif） repeat-x center top; height: 32px; padding: 0; margin: 0; float: left; display: inline;}#navmenubar .navmenu li {float: left;white-space: nowrap;margin: 0px;padding: 0px;display: inline; } #navmenubar .navmenu li a { background: url（http://hovertree.com/hvtimg/bjafjb/d46iuj2w.gif） no-repeat 0 0; width: 80px; padding: 7px 2px 5px 0; float: left; line-height: 20px; height: 20px; text-align: center;}#navmenubar .navmenu li a:hover {background-position: 0 -32px;color: #602800;text-decoration: none;padding: 8px 2px 4px 0; }#navmenubar .navmenu .current a, #navmenubar .navmenu .current a:hover {background: url（http://hovertree.com/hvtimg/bjafjb/d46iuj2w.gif） no-repeat 0 -64px;font-weight: 600;color: #FFF;font-size: 14px;padding: 7px 2px 5px 0; } #top #navpart .content { margin-top: 40px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 900px; height: auto; color: white;}#top #navpart .content a {color: white;display: inline-block;margin-top: 0px;height: 30px;border: 0px solid white;line-height: 30px;padding: 10px; } .clear { clear: both; display: block; font: 0px/0 sans-serif; height: 0px; overflow: hidden;} </style> </head><body> <div id="top" class="m"><div id="navpart"> <div class="sideleft"></div> <div class="sideright"></div> <！--NavMenu--> <div id="navmenubar"><div class="sideleft"></div><ul class="navmenu"> <li class="current"><a href="#" target="_top" title="首页">脚本之家</a></li> <li><a href="#"><span>编程资源</span></a></li> <li><a href="#"><span>在新手册</span></a></li></ul><div class="sideright"></div><div class="sideleft"></div><ul class="navmenu"> <li><a href="#"><span>网页制作</span></a></li> <li><a href="#"><span>网络编程</span></a></li> <li><a href="#"><span>平面设计</span></a></li> <li><a href="#"><span>操作系统</span></a></li></ul><div class="sideright"></div><div> <div class="content"> <a href="#" target="_blank">特效代码</a> <a href="#" target="_blank">特效代码</a> <a href="#" target="_blank">特效代码</a> <a href="#" target="_blank">特效代码</a> <a href="#" target="_blank">特效代码</a> <a href="#" target="_blank">特效代码</a> <a href="#" target="_blank">特效代码</a> <a href="#" target="_blank">特效代码</a> <a href="#" target="_blank">特效代码</a> <a href="#" target="_blank">特效代码</a> </div></div> </div></div> </div> <div class="clear"></div></body></html>
希望对大家学习javascript程序设计有所帮助。