Web ページの左側に配置された DIV+CSS 隠しメニューコード_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

Web ページの左側に配置された DIV+CSS 隠しメニューコード_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:30 PM

コードの紹介:

ブラウザの左側にドッキングされた DIV+CSS の隠しメニューは、マウスを置くと自動的に展開され、マウスを外すと自動的に非表示になります。これも比較的一般的な CSS 効果です。 CSS コードで完全に実装されており、JS コードをドープする必要はなく、Web サイトの Web サイトナビゲーションの側面で使用できるため、さらにお勧めします。

コードの内容:

<!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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。