停靠在左邊的DIV+CSS隱藏菜單_菜單導航特效

停靠在瀏覽器左側的DIV+CSS隱躲菜單，鼠標放上后自動展開，移走鼠標自動隱躲，這也是一個比較常見的CSS殊效，完全CSS代碼實現，沒有的摻雜任何JS代碼，可以用到你網站的網站導航方面，因此更值得推薦了。

<!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" mrc="text/html; charset=gb2312" />
<title>停靠在左邊的隱躲菜單-mb5u.com</title>
</head>
<style type="text/css">
 body {
	background: #fff;
	font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
	font-size: 12px;
}
.menu {position:absolute; z-index:100; margin-top:20px;}
.menu ul {padding:0; margin:0; list-style-type: none; height:170px;}
.menu ul li {width:35px; text-align:left;}
* html .menu ul li {width:235px; margin-left:-16px; mar\gin-left:0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:15px; padding:10px; background:transparent url(/jscss/demoimg/200904/tab1.gif) top right; height:80px; text-align:center; border-left:1px solid #000;}
* html .menu ul li a, * html .menu ul li a:visited {width:35px; height:100px; w\idth:15px; he\ight:80px;}
table {margin:0; padding:0; border:0; border-collapse:collapse;font-size:1em;}
.menu ul li ul {visibility:hidden; position:absolute; width:190px; top:0; left:0;}
.menu ul li:hover {position:relative;}
.menu ul li:hover a {padding-left:200px;}
.menu ul li a:hover {padding-left:201px; position:relative; z-index:200; border-left:0;}
.menu ul li:hover ul,
.menu ul li a:hover ul {visibility:visible; z-index:300;}
/* / */
.menu ul li:hover ul li a,
.menu ul li a:hover ul li a {display:block; background:#d8e2e2 url(/jscss/demoimg/200904/fade.gif); color:#888; text-align:left; height:auto; padding:5px; border:1px solid #000; border-width:1px 1px 0 1px; width:190px; w\idth:180px;}
.menu ul li:hover ul li a.last,
.menu ul li a:hover ul li a.last {border-bottom:1px solid #000;}
.menu ul li:hover ul li a:hover,
.menu ul li a:hover ul li a:hover {background:#e8f2f2; color:#000;}
.some_text {padding:0 20px 0 50px;}
</style>
<body>

<ul>
<li><a href="/">D E M O S</a>
<table><tr><td>
<ul>
<li><a href="/" title="The zero dollar ads page">zero dollars advertising page</a></li>
<li><a href="/" title="Wrapping text around images">wrapping text around images</a></li>
<li><a href="/" title="Styling forms">styled form</a></li>
<li><a href="/" title="Removing active/focus borders">active focus</a></li>
<li><a href="/" title="Multi-position drop shadow">shadow boxing</a></li>
<li><a href="/" title="Image Map for detailed information">image map for detailed information</a></li>
<li><a href="/" title="fun with background images">fun with background images</a></li>
<li><a href="/" title="fade-out scrolling">fade scrolling</a></li>
<li><a class="last" href="/" title="em size images compared">em image sizes compared</a></li>
</ul>
</td></tr></table>

</li>
<li><a href="index.html">B O X E S</a>
<table><tr><td>
<ul>
<li><a href="/" title="a coded list of spies">a coded list of spies</a></li>
<li><a href="/" title="a horizontal vertical menu">vertical menu</a></li>
<li><a href="/" title="an enlarging unordered list">enlarging unordered list</a></li>
<li><a href="/" title="an unordered list with link images">link images</a></li>
<li><a href="/" title="non-rectangular links">non-rectangular</a></li>
<li><a href="/" title="jigsaw links">jigsaw links</a></li>
<li><a class="last" href="/" title="circular links">circular links</a></li>
</ul>
</td></tr></table>
</li>
</ul>
</div>
<div class="some_text">
<p>歡迎來到模板無憂（mb5u.com）提供各類編程源碼、視頻教程、JavaScript/CSS殊效代碼以及常用軟件下載等，做有質量的學習型源碼下載站。</p>
</div>
</body>
</html>

所屬頻道：菜單導航特效/更新時間：2010-05-22

[收藏][報錯][返回列表]

相關菜單導航特效：

停靠在左邊的DIV+CSS隱藏菜單_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些