Home > Article > Web Front-end > 放在网页左侧的DIV+CSS隐藏菜单代码_html/css_WEB-ITnose
放在网页左侧的DIV+CSS隐藏菜单代码_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:30:101287browse
代码简介：
停靠在浏览器左侧的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><title>放在网页左侧的DIV+CSS隐藏菜单代码_网页代码站(www.webdm.cn)</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(http://www.webdm.cn/images/20090920/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(http://www.webdm.cn/images/20090920/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><a href="http://www.webdm.cn">D E M O S<!--[if IE 7]><!--></a><!--<![endif]--><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="http://www.webdm.cn" 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><!--[if lte IE 6]></a><![endif]--></li><li><a href="index.html">B O X E S<!--[if IE 7]><!--></a><!--<![endif]--><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="http://www.webdm.cn" 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><!--[if lte IE 6]></a><![endif]--></li></ul></div><div class="some_text"><br><p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p></div></body></html> 代码来自：http://www.webdm.cn/webcode/ff1b5713-c2f8-493d-ba57-c7903dd3c201.html
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Div+CSS布局入门教程2 页面顶部制作_html/css_WEB-ITnoseNext article：黑色漂亮的DIV+CSS导航菜单代码_html/css_WEB-ITnose