对于国内网站开发日趋的成熟，许多公司对后台的界面也做了改善需求。接下来就是关于侧边导航的jq写法。 需求：做个导航，点击不同的链接，显示相应的内容。 首先，做个基本的html、css布局 
其次,然后做个简单的分析。 子目录内容在打开页面的时候是隐藏的，当鼠标点击导航链接时，触发一个动作执行显示隐藏的子导航。那就是show()显示和hide()隐藏 
如此，再把相应的css调试好就出啦效果了 
最后贴上完整的代码 <!DOCTYPE html>
jq商品导航
css文件 /
reset /
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
| body{m
argin:0;padding:0 0 12px 0;
font-size:12px;
line-height:22px;
font-family:"\\5b8b\\4f53","Arial Narrow";background:#fff;
}
form,ul,li,p,h1,h2,h3,h4,h5,h6{
margin:0;
padding:0;
}
input,select{
font-size:12px;
line-height:16px;
}
img{border:0;}
ul,li{list-style-type:none;}
a {
color:#00007F;
text-decoration:none;
}
a:hover {
color:#bd0a01;
text-decoration:underline;
}
.box { width: 150px; margin: 0 auto; }
.menu{
width:100%;
overflow:hidden;
border-color: #C4D5DF;
border-style: solid;
border-width: 0 1px 1px;
}
/* lv1 */
.menu li.level1 a{
display: block;
height: 28px;
line-height: 28px;
background:#EBF3F8;
font-weight:700;
color: #5893B7;
text-indent: 14px;
border-top: 1px solid #C4D5DF;
}
.menu li.level1 a:hover{text-decoration:none;}
.menu li.level1 a.current{background:#B1D7EF;}
/* lv2 */
.menu li ul{overflow:hidden;}
.menu li ul.level2{
width:100%;
display:none;
text-align: left;
}
.menu li ul.level2 li a{
width: 100%; display: block;
height: 28px; line-height: 28px;
background:#ffffff;
font-weight:400;
color: #42556B;
text-indent: 18px;
border-top: 0px solid #ffffff;
overflow: hidden;
text-align: left;
}
.menu li ul.level2 li a:hover{ color:#f60; }
|
💙 支付宝
💚 微信