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

2024-09-05 12:20:30

字体：大中小

来源：转载

供稿：网友

CSS版相当漂亮的滑动门式导航菜单，蓝色系，立体效果，设计的非常精美，希望大家能够喜欢哦。主菜单分为二级，如果想多级，可以看看代码是如何调用的，分级后菜单结构更加明淅，用户体验更好。

<!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><meta http-equiv="Content-Type" content="text/html; charset=GB2312" /><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 {	background: url(/jscss/demoimg/201002/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(/jscss/demoimg/201002/navpartbg.gif) no-repeat left bottom; float: left; height: 105px; width: 6px;}#navpart .sideright { background: url(/jscss/demoimg/201002/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(/jscss/demoimg/201002/sign_hot.gif) no-repeat left top; height: 21px; width: 19px; position: absolute; top: -5px; right: 2px; z-index: 666}#navmenubar .sideleft { background: url(/jscss/demoimg/201002/navmenubg.gif) no-repeat left bottom; float: left; height: 32px; width: 6px; display: inline; margin: 0 0 0 8px}#navmenubar .sideright { background: url(/jscss/demoimg/201002/navmenubg.gif) no-repeat right bottom; float: left; height: 32px; width: 6px; display: inline; margin: 0 4px 0 -2px}/* NAVMENU */#navmenubar .navmenu { background: url(/jscss/demoimg/201002/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(/jscss/demoimg/201002/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(/jscss/demoimg/201002/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><title>CSS蓝色滑动门式的导航菜单</title></head><body><div id="top" class="m">  <div id="navpart">    <div class="sideleft"></div>    <div class="sideright"></div>        <div id="navmenubar">      <div class="sideleft"></div>      <ul class="navmenu">	         <li class="current">首页</li>		 			<li><span>ASP</span></li>            <li><span>PHP</span></li>                  </ul>      <div class="sideright"></div>      <div class="sideleft"></div>      <ul class="navmenu">	  <li><span>源码</span></li>        <li><span>软件</span></li>          <li><span>资讯</span></li>            <li><span>论坛</span></li>              	  </ul>      <div class="sideright"></div>    </div>    <div> <div class="content"> <br /><br />      相见恨晚吗？</div> </div>  </div></div><div class="clear"></div><br><br><br><br><br><div align="center">------------------------------------------------------------------------------------------<br />用DW CS3编辑.... 当前选项卡用<li class="current">调用</div></body></html>

上一篇：阴影菜单，Div+Js版，微软以前网站曾用过

下一篇：一列简洁的纵向滑动菜单（滑动门）