代码简介:
CSS版相当漂亮的滑动门式导航菜单,蓝色系,立体效果,设计的非常精美,希望大家能够喜欢哦。主菜单分为二级,如果想多级,可以看看代码是如何调用的,分级后菜单结构更加明淅,用户体验更好。
代码内容:
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>漂亮的CSS蓝色滑动门式的导航菜单_网页代码站(www.webdm.cn)</title> <style> #top { display: block; text-align: left; height:105px; position: relative; z-index: 0;} .m { margin:0 auto; 970px; } body{ font-size:12px;} a{ color:#333; text-decoration: none; } a:link { text-decoration: none; } 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 */ #navpart { background: url(http://www.webdm.cn/images/20100420/navpartbg.gif) repeat-x center top; height: 105px; 970px; z-index: 0; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; clear: both; position: relative; } #navpart .sideleft { background: url(http://www.webdm.cn/images/20100420/navpartbg.gif) no-repeat left bottom; float: left; height: 105px; 6px;} #navpart .sideright { background: url(http://www.webdm.cn/images/20100420/navpartbg.gif) no-repeat right bottom; float: right; height:105px; 6px} /* NAVMENUBAR */ #navmenubar { height: 32px; float: left; display: inline; margin: 0 -6px; 100%; position: relative; z-index: 3; top:0} #hot { background: url(http://www.webdm.cn/images/20100420/sign_hot.gif) no-repeat left top; height: 21px; 19px; position: absolute; top: -5px; right: 2px; z-index: 666} #navmenubar .sideleft { background: url(http://www.webdm.cn/images/20100420/navmenubg.gif) no-repeat left bottom; float: left; height: 32px; 6px; display: inline; margin: 0 0 0 8px} #navmenubar .sideright { background: url(http://www.webdm.cn/images/20100420/navmenubg.gif) no-repeat right bottom; float: left; height: 32px; 6px; display: inline; margin: 0 4px 0 -2px} /* NAVMENU */ #navmenubar .navmenu { background: url(http://www.webdm.cn/images/20100420/navmenubg.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://www.webdm.cn/images/20100420/navmenutabbg.gif) no-repeat 0 0; 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://www.webdm.cn/images/20100420/navmenutabbg.gif) no-repeat 0 -64px; font-weight: 600; color: #FFF; font-size: 14px; padding:7px 2px 5px 0} #top #navpart .content { margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; 950px; height:auto; } .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>ASP</span></a></li> <li><a href="/"><span>PHP</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> <div class="content"> <br /><br /> <a href="/" target="_blank">网页代码站</a></div> </div> </div> </div> <div class="clear"></div> <!--END Header--> <!--页面布局--> <br> <br> <br> <br> <br> <div align="center">------------------------------------------------------------------------------------------<br /> 用DW CS3编辑.... 当前选项卡用<li class="current">调用</div> </body> </html> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/2881347d-0263-49aa-b1d4-ca9a78d8734b.html