1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title>一款溢出式侧边栏导航菜单_网页代码站(www.webdm.cn)</title>
5 <style>
6 *{margin:0;padding:0;}
7 body{background:#FFF;color:#000;text-align:center;font:normal 12px Georgia, Arial, Helvetica, sans-serif;}
8 a:link,a:visited{color:#369;text-decoration:underline;}
9 a:hover{color:#C80000;text-decoration:none;}
10 span,li,dt,dd,p,h1,h2,h3,h4,h5,h6{text-align:left;}
11 img{border:0;}
12 ul,li{list-style-type:none;}
13 p{line-height:150%;}
14 h1{margin:0 auto;width:100%;background:#353535 font-size:28px;height:60px;color:#FFF;line-height:60px;text-indent:60px;overflow:hidden;border-
15
16 bottom:3px solid #999;}
17 #YMenu{margin:30px auto;width:590px;height:450px;overflow:hidden;border:3px solid #B0BEC7;padding:4px;}
18 #YMenu-side{position:relative;z-index:2;float:left;width:200px;height:450px;border-right:3px solid #B0BEC7;}
19 #YMenu-side h3{float:left;width:196px;clear:both;line-height:28px;font-size:14px;text-indent:10px;color:#369;background-
20
21 color:#EAEFF5;overflow:hidden;clear:both;}
22 .YM-mainmnu{float:left;width:100%;clear:both;}
23 .YM-mainmnu li{position:relative;z-index:2;cursor:pointer;float:left;width:180px;clear:both;min-height:28px;line-height:28px;text-
24
25 indent:10px;color:#999;}
26 .YM-mainmnu li.current{border-top:1px solid #B0BEC7;border-left:1px solid #B0BEC7;border-bottom:2px solid #B0BEC7;border-right:1px solid
27
28 #EAEFF5;background-color:#EAEFF5;}
29 .YM-mainmnu li.current a{font-size:14px;font-weight:bold;color:#C80000;}
30 .YM-mainmnu li.current span{display:none;}
31 .YM-mainmnu li .YM-submnu{position:absolute;z-index:3;left:179px;top:-1px;display:none;width:200px;overflow:hidden;border:solid #B0BEC7;border-
32
33 width:1px 2px 2px 0;background:#EAEFF5 url(../img/mnu-bg.gif) 0 0 no-repeat;}
34 .YM-mainmnu li .YM-submnu li{float:left;clear:none;margin-left:10px;display:inline;text-indent:0;width:90px;overflow:hidden;line-
35
36 height:24px;color:#000;border:0;}
37 .YM-mainmnu li .YM-submnu li a{font-size:12px;font-weight:normal;color:#369;}
38 #YMenu-main{position:relative;z-index:1;float:right;width:383px;overflow:hidden;}
39 #YMenu-main h2{margin:0 auto;width:100%;height:28px;line-height:28px;background-color:#EAEFF5;font-size:18px;text-align:center;overflow:hidden;}
40 #YMenu-main p{margin:10px auto;width:100%;line-height:150%;font-size:14px;overflow:hidden;text-indent:28px;}
41 .even{background-color:#F8F8F8;}
42 .odd{background-color:#EAEFF5;}
43 .hover{background-color:#B0BEC7;color:#FFF;cursor:pointer;}
44 .hidden{display:none;clear:both;}
45 #footer{margin:0 auto;width:960px;padding:15px 0;overflow:hidden;border-top:1px solid #999;}
46 #footer p{margin:0 auto;padding:5px 0;width:960px;line-height:20px;text-align:center;font-size:14px;}
47 </style>
48 </head>
49 <body>
50 <h1>YTabs！侧边栏导航菜单</h1>
51 <div id="YMenu">
52 <div id="YMenu-side">
53 <h3>家用电器</h3>
54 <ul class="YM-mainmnu">
55 <li class="YM-Tab">
56 <a href="#">大家电</a><span> - 电视机、平板电视...</span>
57 <ul class="YM-submnu">
58 <li><a href="#1">洗衣机</a></li>
59 <li><a href="#1">平板电视</a></li>
60 <li><a href="#1">电热水器</a></li>
61 <li><a href="#1">家庭音响</a></li>
62 <li><a href="#1">燃气热水器</a></li>
63 <li><a href="#1">空调</a></li>
64 <li><a href="#1">冰箱冷柜</a></li>
65 <li><a href="#1">DVD播放器</a></li>
66 <li><a href="#1">电视附件</a></li>
67 <li><a href="#1">家电服务</a></li>
68 <li><a href="#1">家电下乡</a></li>
69 </ul>
70 </li>
71 <li class="YM-Tab">
72 <a href="#">大家电</a><span> - 电视机、平板电视...</span>
73 <ul class="YM-submnu">
74 <li><a href="#1">洗衣机</a></li>
75 <li><a href="#1">平板电视</a></li>
76 <li><a href="#1">电热水器</a></li>
77 <li><a href="#1">家庭音响</a></li>
78 <li><a href="#1">燃气热水器</a></li>
79 <li><a href="#1">空调</a></li>
80 <li><a href="#1">冰箱冷柜</a></li>
81 <li><a href="#1">DVD播放器</a></li>
82 <li><a href="#1">电视附件</a></li>
83 <li><a href="#1">家电服务</a></li>
84 <li><a href="#1">家电下乡</a></li>
85 </ul>
86 </li>
87 <li class="YM-Tab">
88 <a href="#">大家电</a><span> - 电视机、平板电视...</span>
89 <ul class="YM-submnu">
90 <li><a href="#1">洗衣机</a></li>
91 <li><a href="#1">平板电视</a></li>
92 <li><a href="#1">电热水器</a></li>
93 <li><a href="#1">家庭音响</a></li>
94 <li><a href="#1">燃气热水器</a></li>
95 <li><a href="#1">空调</a></li>
96 <li><a href="#1">冰箱冷柜</a></li>
97 <li><a href="#1">DVD播放器</a></li>
98 <li><a href="#1">电视附件</a></li>
99 <li><a href="#1">家电服务</a></li>
100 <li><a href="#1">家电下乡</a></li>
101 </ul>
102 </li>
103 <li class="YM-Tab">
104 <a href="#">大家电</a><span> - 电视机、平板电视...</span>
105 <ul class="YM-submnu">
106 <li><a href="#1">洗衣机</a></li>
107 <li><a href="#1">平板电视</a></li>
108 <li><a href="#1">电热水器</a></li>
109 <li><a href="#1">家庭音响</a></li>
110 <li><a href="#1">燃气热水器</a></li>
111 <li><a href="#1">空调</a></li>
112 <li><a href="#1">冰箱冷柜</a></li>
113 <li><a href="#1">DVD播放器</a></li>
114 <li><a href="#1">电视附件</a></li>
115 <li><a href="#1">家电服务</a></li>
116 <li><a href="#1">家电下乡</a></li>
117 </ul>
118 </li>
119 </ul>
120 <h3>手机数码</h3>
121 <ul class="YM-mainmnu">
122 <li class="YM-Tab">
123 <a href="#">大家电</a><span> - 电视机、平板电视...</span>
124 <ul class="YM-submnu">
125 <li><a href="#1">洗衣机</a></li>
126 <li><a href="#1">平板电视</a></li>
127 <li><a href="#1">电热水器</a></li>
128 <li><a href="#1">家庭音响</a></li>
129 <li><a href="#1">燃气热水器</a></li>
130 <li><a href="#1">空调</a></li>
131 <li><a href="#1">冰箱冷柜</a></li>
132 <li><a href="#1">DVD播放器</a></li>
133 <li><a href="#1">电视附件</a></li>
134 <li><a href="#1">家电服务</a></li>
135 <li><a href="#1">家电下乡</a></li>
136 </ul>
137 </li>
138 <li class="YM-Tab">
139 <a href="#">大家电</a><span> - 电视机、平板电视...</span>
140 <ul class="YM-submnu">
141 <li><a href="#1">洗衣机</a></li>
142 <li><a href="#1">平板电视</a></li>
143 <li><a href="#1">电热水器</a></li>
144 <li><a href="#1">家庭音响</a></li>
145 <li><a href="#1">燃气热水器</a></li>
146 <li><a href="#1">空调</a></li>
147 <li><a href="#1">冰箱冷柜</a></li>
148 <li><a href="#1">DVD播放器</a></li>
149 <li><a href="#1">电视附件</a></li>
150 <li><a href="#1">家电服务</a></li>
151 <li><a href="#1">家电下乡</a></li>
152 </ul>
153 </li>
154 <li class="YM-Tab">
155 <a href="#">大家电</a><span> - 电视机、平板电视...</span>
156 <ul class="YM-submnu">
157 <li><a href="#1">洗衣机</a></li>
158 <li><a href="#1">平板电视</a></li>
159 <li><a href="#1">电热水器</a></li>
160 <li><a href="#1">家庭音响</a></li>
161 <li><a href="#1">燃气热水器</a></li>
162 <li><a href="#1">空调</a></li>
163 <li><a href="#1">冰箱冷柜</a></li>
164 <li><a href="#1">DVD播放器</a></li>
165 <li><a href="#1">电视附件</a></li>
166 <li><a href="#1">家电服务</a></li>
167 <li><a href="#1">家电下乡</a></li>
168 </ul>
169 </li>
170 <li class="YM-Tab">
171 <a href="#">大家电</a><span> - 电视机、平板电视...</span>
172 <ul class="YM-submnu">
173 <li><a href="#1">洗衣机</a></li>
174 <li><a href="#1">平板电视</a></li>
175 <li><a href="#1">电热水器</a></li>
176 <li><a href="#1">家庭音响</a></li>
177 <li><a href="#1">燃气热水器</a></li>
178 <li><a href="#1">空调</a></li>
179 <li><a href="#1">冰箱冷柜</a></li>
180 <li><a href="#1">DVD播放器</a></li>
181 <li><a href="#1">电视附件</a></li>
182 <li><a href="#1">家电服务</a></li>
183 <li><a href="#1">家电下乡</a></li>
184 </ul>
185 </li>
186 </ul>
187 </div>
188 </div>
189 <script language="javascript" type="text/javascript" src="http://www.webdm.cn/images/20090910/yao.js"></script>
190 <script language="javascript" type="text/javascript">
191 <!--
192 YAO.YTabs({
193 tabs: YAO.getElByClassName('YM-Tab', 'li', 'YMenu-side'),
194 contents: YAO.getElByClassName('YM-submnu', 'ul', 'YMenu-side'),
195 hideAll: true
196 });
197 //-->
198 </script>
199 </body>
200 </html>
201 <br>
202 <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！
文章来自：http://www.webdm.cn/webcode/6de11c91-90b8-42ce-8681-96b9e1459c91.html