1. 首页
  2. 文章中心
  3. xhtml

一款溢出式侧边栏导航菜单_网页代码站(www.webdm.cn)

59 阅读 0 评论
我是靠谱客的博主 冷艳睫毛，最近开发中收集的这篇文章主要介绍一款溢出式侧边栏导航菜单_网页代码站(www.webdm.cn)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述




 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


 




转载于:https://www.cnblogs.com/webdm/archive/2010/12/25/1916550.html

                            
                            
最后

                            
以上就是冷艳睫毛为你收集整理的一款溢出式侧边栏导航菜单_网页代码站(www.webdm.cn)的全部内容，希望文章能够帮你解决一款溢出式侧边栏导航菜单_网页代码站(www.webdm.cn)所遇到的程序开发问题。

                            
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

                            
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

                        


                        
                        


                        
                        

                             点赞(39)
                            
                        

                        

                        
                        
                        
                        
                        
                        
                        
                        
                        

                        

                            
                        


                        

                            

                                
                                

                                    
相关文章

                                

                                                                

                                    
                                        

                                            CodeMirror编译器设置滚动条
                                        

                                    
                                    
CodeMirror编译器设置滚动条

                                

                                                                

                                    
                                        

                                            添加tabs出现两个滚动条问题
                                        

                                    
                                    
添加tabs出现两个滚动条问题

                                

                                                                

                                    
                                        

                                            自定义头部导航栏的页面，让滚动条只在内容部分，而不是整个页面
                                        

                                    
                                    
自定义头部导航栏的页面，让滚动条只在内容部分，而不是整个页面

                                

                                                                

                                    
                                        

                                            vue-router+vuex+localStorage导航守卫实例
                                        

                                    
                                    
vue-router+vuex+localStorage导航守卫实例

                                

                                                                

                                    
                                        

                                            一款溢出式侧边栏导航菜单_网页代码站(www.webdm.cn)
                                        

                                    
                                    
一款溢出式侧边栏导航菜单_网页代码站(www.webdm.cn)

                                

                                                                

                                    
                                        

                                            使用vue-router+vuex进行导航守卫(转)
                                        

                                    
                                    
使用vue-router+vuex进行导航守卫(转)

                                

                                                                

                                    
                                        

                                            vue侧边栏导航和右边内容一样高
                                        

                                    
                                    
vue侧边栏导航和右边内容一样高

                                

                                                                

                                    
                                        

                                            vue 仿tx导航栏效果
                                        

                                    
                                    
vue 仿tx导航栏效果

                                

                                                                
                            

                        

                        

                    

                


                

                    

                        
评论列表共有 0 条评论

                    

                    

                        

                    

                


            


            
        

    







    
    
    
    立即
投稿




    
    

        
    





    
    返回
顶部