停靠在左边的DIV+CSS隐藏菜单

2024-09-05 12:19:40

字体：大中小

来源：转载

供稿：网友

停靠在浏览器左侧的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" content="text/html; charset=gb2312" /><title>停靠在左边的隐藏菜单</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><div class="menu"><ul><li>D E M O S<table><tr><td><ul><li>zero dollars advertising page</li><li>wrapping text around images</li><li>styled form</li><li>fade scrolling</li><li>em image sizes compared</li></ul></td></tr></table></li><li>B O X E S<table><tr><td><ul><li>a coded list of spies</li><li>vertical menu</li><li>circular links</li><li>vertical menu</li><li>circular links</li></ul></td></tr></table></li></ul></div><div class="some_text"></div></body></html>

上一篇：银灰色菜单，很大气，鼠标滑过换色

下一篇：超实用的JS后台折叠管理菜单