漂亮的CSS蓝色滑动门式的导航菜单

代码简介：

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; width: 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;
    width: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;
 
width: 6px;}
#navpart .sideright { background: url(http://www.webdm.cn/images/20100420/navpartbg.gif) no-repeat right bottom; float: right; height:105px;
 
width: 6px}
/* NAVMENUBAR */
#navmenubar { height: 32px; float: left; display: inline; margin: 0 -6px; width: 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; width: 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;
 
width: 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;
 
width: 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; 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://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;
    width: 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

posted @   网页代码站  阅读(697)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示