找回密码
 注册
首页 ≡≡网络技术≡≡ WEB前端 靠边的隐藏菜单代码

html 靠边的隐藏菜单代码

灰儿 2007-12-27 15:49:56
<p>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a target=_blank href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target=_blank>http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>"&gt;<br />&lt;html xmlns="<a target=_blank href="http://www.w3.org/1999/xhtml" target=_blank>http://www.w3.org/1999/xhtml</a>"&gt;<br />&lt;head&gt;<br />&lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt;<br />&lt;title&gt;靠边的隐藏菜单代码&lt;/title&gt;<br />&lt;/head&gt;<br />&lt;style type="text/css"&gt;<br />&nbsp;body {<br />&nbsp;background: #fff;<br />&nbsp;font-family: "Lucida Grande", Helvetica, Arial, sans-serif;<br />&nbsp;font-size: 12px;<br />}</p><p>.menu {position:absolute; z-index:100; margin-top:20px;}</p><p>.menu ul {padding:0; margin:0; list-style-type: none; height:170px;}</p><p>.menu ul li {width:35px; text-align:left;}<br />* html .menu ul li {width:235px; margin-left:-16px; mar&#92;gin-left:0;}</p><p>.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; width:15px; padding:10px; background:transparent url(tab1.gif) top right; height:80px; text-align:center; border-left:1px solid #000;}<br />* html .menu ul li a, * html .menu ul li a:visited {width:35px; height:100px; w&#92;idth:15px; he&#92;ight:80px;}</p><p>table {margin:0; padding:0; border:0; border-collapse:collapse;font-size:1em;}</p><p>.menu ul li ul {visibility:hidden; position:absolute; width:190px; top:0; left:0;}</p><p>.menu ul li:hover {position:relative;}<br />.menu ul li:hover a {padding-left:200px;}</p><p>.menu ul li a:hover {padding-left:201px; position:relative; z-index:200; border-left:0;}</p><p>.menu ul li:hover ul,<br />.menu ul li a:hover ul {visibility:visible; z-index:300;}</p><p>.menu ul li:hover ul li a,<br />.menu ul li a:hover ul li a {display:block; background:#d8e2e2 url(fade.gif); color:#888; text-align:left; height:auto; padding:5px; border:1px solid #000; border-width:1px 1px 0 1px; width:190px; w&#92;idth:180px;}</p><p>.menu ul li:hover ul li a.last,<br />.menu ul li a:hover ul li a.last {border-bottom:1px solid #000;}</p><p>.menu ul li:hover ul li a:hover,<br />.menu ul li a:hover ul li a:hover {background:#e8f2f2; color:#000;}</p><p>.some_text {padding:0 20px 0 50px;}<br />&lt;/style&gt;<br />&lt;body&gt;</p><p>&lt;div class="menu"&gt;</p><p>&lt;ul&gt;<br />&nbsp;&lt;li&gt;&lt;a href="../menu/index.html"&gt;D E M O S&lt;!--[if IE 7]&gt;&lt;!--&gt;&lt;/a&gt;&lt;!--&lt;![endif]--&gt;<br />&nbsp;&nbsp;&lt;table&gt;&lt;tr&gt;&lt;td&gt;<br />&nbsp;&nbsp;&lt;ul&gt;<br />&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="../menu/zero_dollars.html" title="The zero dollar ads page"&gt;zero dollars advertising page&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="../menu/embed.html" title="Wrapping text around images"&gt;wrapping text around images&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="../menu/form.html" title="Styling forms"&gt;styled form&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="../menu/nodots.html" title="Removing active/focus borders"&gt;active focus&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="../menu/shadow_boxing.html" title="Multi-position drop shadow"&gt;shadow boxing&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="../menu/old_master.html" title="Image Map for detailed information"&gt;image map for detailed information&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="../menu/bodies.html" title="fun with background images"&gt;fun with background images&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="../menu/fade_scroll.html" title="fade-out scrolling"&gt;fade scrolling&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class="last" href="../menu/em_images.html" title="em size images compared"&gt;em image sizes compared&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&lt;/ul&gt;<br />&nbsp;&nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />&nbsp;&lt;!--[if lte IE 6]&gt;&lt;/a&gt;&lt;![endif]--&gt;<br />&nbsp;&lt;/li&gt;<br />&nbsp;&nbsp;&lt;li&gt;&lt;a href="index.html"&gt;B O X E S&lt;!--[if IE 7]&gt;&lt;!--&gt;&lt;/a&gt;&lt;!--&lt;![endif]--&gt;<br />&nbsp;&nbsp;&lt;table&gt;&lt;tr&gt;&lt;td&gt;<br />&nbsp;&nbsp;&lt;ul&gt;<br />&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="spies.html" title="a coded list of spies"&gt;a coded list of spies&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="vertical.html" title="a horizontal vertical menu"&gt;vertical menu&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="expand.html" title="an enlarging unordered list"&gt;enlarging unordered list&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="enlarge.html" title="an unordered list with link images"&gt;link images&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="cross.html" title="non-rectangular links"&gt;non-rectangular&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a href="jigsaw.html" title="jigsaw links"&gt;jigsaw links&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&lt;li&gt;&lt;a class="last" href="circles.html" title="circular links"&gt;circular links&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&lt;/ul&gt;<br />&nbsp;&nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;<br />&nbsp;&lt;!--[if lte IE 6]&gt;&lt;/a&gt;&lt;![endif]--&gt;<br />&nbsp;&lt;/li&gt;<br />&lt;/ul&gt;&lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br /></p><p>[此帖子已被 灰儿 在 2007-12-27 15:54:11 编辑过]
您需要登录后才可以回帖 登录 | 注册
学习中心
站长自定义文字内容,利用碎片时间,随时随地获取优质内容。
Q设计语言 了解更多
Q Design 提供商家设计所需的指导与资源,帮商家快速完成产品设计、降低生产成本。
学习中心
站长自定义文字内容,利用碎片时间,随时随地获取优质内容。
Q设计语言 了解更多
Q Design 提供商家设计所需的指导与资源,帮商家快速完成产品设计、降低生产成本。