An overflow-style sidebar navigation menu page code station _ (www.webdm.cn)

2010-12-25  来源:本站原创  分类:Web  人气:283 

<! 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> an overflow-style sidebar navigation menu _ page code Station (www.webdm.cn) </ title>
<style>
* {Margin: 0; padding: 0;}
body {background: # FFF; color: # 000; text-align: center; font: normal 12px Georgia, Arial, Helvetica, sans-serif;}
a: link, a: visited {color: # 369; text-decoration: underline;}
a: hover {color: # C80000; text-decoration: none;}
span, li, dt, dd, p, h1, h2, h3, h4, h5, h6 {text-align: left;}
img {border: 0;}
ul, li {list-style-type: none;}
p {line-height: 150%;}
h1 {margin: 0 auto; width: 100%; background: # 353535 font-size: 28px; height: 60px; color: # FFF; line-height: 60px; text-indent: 60px; overflow: hidden; border-

bottom: 3px solid # 999;}
# YMenu {margin: 30px auto; width: 590px; height: 450px; overflow: hidden; border: 3px solid # B0BEC7; padding: 4px;}
# YMenu-side {position: relative; z-index: 2; float: left; width: 200px; height: 450px; border-right: 3px solid # B0BEC7;}
# YMenu-side h3 {float: left; width: 196px; clear: both; line-height: 28px; font-size: 14px; text-indent: 10px; color: # 369; background-

color: # EAEFF5; overflow: hidden; clear: both;}
. YM-mainmnu {float: left; width: 100%; clear: both;}
. YM-mainmnu li {position: relative; z-index: 2; cursor: pointer; float: left; width: 180px; clear: both; min-height: 28px; line-height: 28px; text-

indent: 10px; color: # 999;}
. YM-mainmnu li.current {border-top: 1px solid # B0BEC7; border-left: 1px solid # B0BEC7; border-bottom: 2px solid # B0BEC7; border-right: 1px solid

# EAEFF5; background-color: # EAEFF5;}
. YM-mainmnu li.current a {font-size: 14px; font-weight: bold; color: # C80000;}
. YM-mainmnu li.current span {display: none;}
. YM-mainmnu li. YM-submnu {position: absolute; z-index: 3; left: 179px; top:-1px; display: none; width: 200px; overflow: hidden; border: solid # B0BEC7; border-

width: 1px 2px 2px 0; background: # EAEFF5 url (.. / img / mnu-bg.gif) 0 0 no-repeat;}
. YM-mainmnu li. YM-submnu li {float: left; clear: none; margin-left: 10px; display: inline; text-indent: 0; width: 90px; overflow: hidden; line-

height: 24px; color: # 000; border: 0;}
. YM-mainmnu li. YM-submnu li a {font-size: 12px; font-weight: normal; color: # 369;}
# YMenu-main {position: relative; z-index: 1; float: right; width: 383px; overflow: hidden;}
# YMenu-main h2 {margin: 0 auto; width: 100%; height: 28px; line-height: 28px; background-color: # EAEFF5; font-size: 18px; text-align: center; overflow: hidden;}
# YMenu-main p {margin: 10px auto; width: 100%; line-height: 150%; font-size: 14px; overflow: hidden; text-indent: 28px;}
. Even {background-color: # F8F8F8;}
. Odd {background-color: # EAEFF5;}
. Hover {background-color: # B0BEC7; color: # FFF; cursor: pointer;}
. Hidden {display: none; clear: both;}
# Footer {margin: 0 auto; width: 960px; padding: 15px 0; overflow: hidden; border-top: 1px solid # 999;}
# Footer p {margin: 0 auto; padding: 5px 0; width: 960px; line-height: 20px; text-align: center; font-size: 14px;}
</ Style>
</ Head>
<body>
<h1> YTabs! Sidebar navigation menu </ h1>
<div>
<div>
<h3> appliances </ h3>
<ul>
<li>
<a href="#"> large appliances </ a> <span> - TV, flat panel TV ...</ span>
<ul>
<li> <a href="#1"> washing machine </ a> </ li>
<li> <a href="#1"> flat-panel TV </ a> </ li>
<li> <a href="#1"> electric water heater </ a> </ li>
<li> <a href="#1"> home audio </ a> </ li>
<li> <a href="#1"> gas water heater </ a> </ li>
<li> <a href="#1"> air conditioning </ a> </ li>
<li> <a href="#1"> refrigerator freezer </ a> </ li>
<li> <a href="#1"> DVD player </ a> </ li>
<li> <a href="#1"> TV Accessories </ a> </ li>
<li> <a href="#1"> appliance service </ a> </ li>
<li> <a href="#1"> home appliance </ a> </ li>
</ Ul>
</ Li>
<li>
<a href="#"> large appliances </ a> <span> - TV, flat panel TV ...</ span>
<ul>
<li> <a href="#1"> washing machine </ a> </ li>
<li> <a href="#1"> flat-panel TV </ a> </ li>
<li> <a href="#1"> electric water heater </ a> </ li>
<li> <a href="#1"> home audio </ a> </ li>
<li> <a href="#1"> gas water heater </ a> </ li>
<li> <a href="#1"> air conditioning </ a> </ li>
<li> <a href="#1"> refrigerator freezer </ a> </ li>
<li> <a href="#1"> DVD player </ a> </ li>
<li> <a href="#1"> TV Accessories </ a> </ li>
<li> <a href="#1"> appliance service </ a> </ li>
<li> <a href="#1"> home appliance </ a> </ li>
</ Ul>
</ Li>
<li>
<a href="#"> large appliances </ a> <span> - TV, flat panel TV ...</ span>
<ul>
<li> <a href="#1"> washing machine </ a> </ li>
<li> <a href="#1"> flat-panel TV </ a> </ li>
<li> <a href="#1"> electric water heater </ a> </ li>
<li> <a href="#1"> home audio </ a> </ li>
<li> <a href="#1"> gas water heater </ a> </ li>
<li> <a href="#1"> air conditioning </ a> </ li>
<li> <a href="#1"> refrigerator freezer </ a> </ li>
<li> <a href="#1"> DVD player </ a> </ li>
<li> <a href="#1"> TV Accessories </ a> </ li>
<li> <a href="#1"> appliance service </ a> </ li>
<li> <a href="#1"> home appliance </ a> </ li>
</ Ul>
</ Li>
<li>
<a href="#"> large appliances </ a> <span> - TV, flat panel TV ...</ span>
<ul>
<li> <a href="#1"> washing machine </ a> </ li>
<li> <a href="#1"> flat-panel TV </ a> </ li>
<li> <a href="#1"> electric water heater </ a> </ li>
<li> <a href="#1"> home audio </ a> </ li>
<li> <a href="#1"> gas water heater </ a> </ li>
<li> <a href="#1"> air conditioning </ a> </ li>
<li> <a href="#1"> refrigerator freezer </ a> </ li>
<li> <a href="#1"> DVD player </ a> </ li>
<li> <a href="#1"> TV Accessories </ a> </ li>
<li> <a href="#1"> appliance service </ a> </ li>
<li> <a href="#1"> home appliance </ a> </ li>
</ Ul>
</ Li>
</ Ul>
<h3> mobile digital </ h3>
<ul>
<li>
<a href="#"> large appliances </ a> <span> - TV, flat panel TV ...</ span>
<ul>
<li> <a href="#1"> washing machine </ a> </ li>
<li> <a href="#1"> flat-panel TV </ a> </ li>
<li> <a href="#1"> electric water heater </ a> </ li>
<li> <a href="#1"> home audio </ a> </ li>
<li> <a href="#1"> gas water heater </ a> </ li>
<li> <a href="#1"> air conditioning </ a> </ li>
<li> <a href="#1"> refrigerator freezer </ a> </ li>
<li> <a href="#1"> DVD player </ a> </ li>
<li> <a href="#1"> TV Accessories </ a> </ li>
<li> <a href="#1"> appliance service </ a> </ li>
<li> <a href="#1"> home appliance </ a> </ li>
</ Ul>
</ Li>
<li>
<a href="#"> large appliances </ a> <span> - TV, flat panel TV ...</ span>
<ul>
<li> <a href="#1"> washing machine </ a> </ li>
<li> <a href="#1"> flat-panel TV </ a> </ li>
<li> <a href="#1"> electric water heater </ a> </ li>
<li> <a href="#1"> home audio </ a> </ li>
<li> <a href="#1"> gas water heater </ a> </ li>
<li> <a href="#1"> air conditioning </ a> </ li>
<li> <a href="#1"> refrigerator freezer </ a> </ li>
<li> <a href="#1"> DVD player </ a> </ li>
<li> <a href="#1"> TV Accessories </ a> </ li>
<li> <a href="#1"> appliance service </ a> </ li>
<li> <a href="#1"> home appliance </ a> </ li>
</ Ul>
</ Li>
<li>
<a href="#"> large appliances </ a> <span> - TV, flat panel TV ...</ span>
<ul>
<li> <a href="#1"> washing machine </ a> </ li>
<li> <a href="#1"> flat-panel TV </ a> </ li>
<li> <a href="#1"> electric water heater </ a> </ li>
<li> <a href="#1"> home audio </ a> </ li>
<li> <a href="#1"> gas water heater </ a> </ li>
<li> <a href="#1"> air conditioning </ a> </ li>
<li> <a href="#1"> refrigerator freezer </ a> </ li>
<li> <a href="#1"> DVD player </ a> </ li>
<li> <a href="#1"> TV Accessories </ a> </ li>
<li> <a href="#1"> appliance service </ a> </ li>
<li> <a href="#1"> home appliance </ a> </ li>
</ Ul>
</ Li>
<li>
<a href="#"> large appliances </ a> <span> - TV, flat panel TV ...</ span>
<ul>
<li> <a href="#1"> washing machine </ a> </ li>
<li> <a href="#1"> flat-panel TV </ a> </ li>
<li> <a href="#1"> electric water heater </ a> </ li>
<li> <a href="#1"> home audio </ a> </ li>
<li> <a href="#1"> gas water heater </ a> </ li>
<li> <a href="#1"> air conditioning </ a> </ li>
<li> <a href="#1"> refrigerator freezer </ a> </ li>
<li> <a href="#1"> DVD player </ a> </ li>
<li> <a href="#1"> TV Accessories </ a> </ li>
<li> <a href="#1"> appliance service </ a> </ li>
<li> <a href="#1"> home appliance </ a> </ li>
</ Ul>
</ Li>
</ Ul>
</ Div>
</ Div>
<script language="javascript" type="text/javascript" src="http://www.webdm.cn/images/20090910/yao.js"> </ script>
<script language="javascript" type="text/javascript">
<! -
YAO.YTabs ({
tabs: YAO.getElByClassName ('YM-Tab', 'li', 'YMenu-side'),
contents: YAO.getElByClassName ('YM-submnu', 'ul', 'YMenu-side'),
hideAll: true
});
//-->
</ Script>
</ Body>
</ Html>
<br>
<a href="http://www.webdm.cn"> page code points </ a> - the most professional code download site - is committed to providing quality Chinese owners of code!

Article from: http://www.webdm.cn/webcode/6de11c91-90b8-42ce-8681-96b9e1459c91.html

相关文章