一、垂直菜单的实现
|
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
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
></
title
>
<
link
href
=
"app.css"
rel
=
"stylesheet"
/>
<
script
src
=
"jquery-1.10.1.min.js"
></
script
>
<
script
src
=
"app.js"
></
script
>
</
head
>
<
body
>
<
ul
>
<
li
class
=
"main"
>
<
a
href
=
"#"
>菜单1</
a
>
<
ul
>
<
li
><
a
href
=
"#"
>子菜单1</
a
></
li
>
<
li
><
a
href
=
"#"
>子菜单2</
a
></
li
>
</
ul
>
</
li
>
<
li
class
=
"main"
>
<
a
href
=
"#"
>菜单2</
a
>
<
ul
>
<
li
><
a
href
=
"#"
>子菜单1</
a
></
li
>
<
li
><
a
href
=
"#"
>子菜单2</
a
></
li
>
</
ul
>
</
li
>
<
li
class
=
"main"
>
<
a
href
=
"#"
>菜单3</
a
>
<
ul
>
<
li
><
a
href
=
"#"
>子菜单1</
a
></
li
>
<
li
><
a
href
=
"#"
>子菜单2</
a
></
li
>
</
ul
>
</
li
>
</
ul
>
</
body
>
</
html
>
|
|
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
|
ul,li{
list-style
:
none
;
}
ul{
padding
:
0
;
margin
:
0
;
}
.main{
background-color
:
#666666
;
background-repeat
:
repeat-x
;
width
:
100px
;
}
li{
background-color
:
#eeeeee
;
}
a{
text-decoration
:
none
;
padding-left
:
20px
;
display
:
block
;
width
:
80px
;
padding-top
:
3px
;
padding-bottom
:
3px
;
}
.main a{
color
:
white
;
}
.main li a{
color
:
black
;
}
.main ul{
display
:
none
;
}
|
|
1
2
3
4
5
6
|
$(document).ready(
function
(){
$(
".main>a"
).click(
function
(){
var
ulNode = $(
this
).next(
"ul"
);
ulNode.toggle(
"normal"
);
});
});
|
二、水平菜单的实现
|
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
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
></
title
>
<
link
href
=
"app.css"
rel
=
"stylesheet"
/>
<
script
src
=
"jquery-1.10.1.min.js"
></
script
>
<
script
src
=
"app.js"
></
script
>
</
head
>
<
body
>
<
ul
>
<
li
class
=
"main"
>
<
a
href
=
"#"
>菜单1</
a
>
<
ul
>
<
li
><
a
href
=
"#"
>子菜单1</
a
></
li
>
<
li
><
a
href
=
"#"
>子菜单2</
a
></
li
>
</
ul
>
</
li
>
<
li
class
=
"main"
>
<
a
href
=
"#"
>菜单2</
a
>
<
ul
>
<
li
><
a
href
=
"#"
>子菜单1</
a
></
li
>
<
li
><
a
href
=
"#"
>子菜单2</
a
></
li
>
</
ul
>
</
li
>
<
li
class
=
"main"
>
<
a
href
=
"#"
>菜单3</
a
>
<
ul
>
<
li
><
a
href
=
"#"
>子菜单1</
a
></
li
>
<
li
><
a
href
=
"#"
>子菜单2</
a
></
li
>
</
ul
>
</
li
>
</
ul
>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
br
/>
<
ul
>
<
li
class
=
"hmain"
>
<
a
href
=
"#"
>菜单1</
a
>
<
ul
>
<
li
><
a
href
=
"#"
>子菜单1</
a
></
li
>
<
li
><
a
href
=
"#"
>子菜单2</
a
></
li
>
</
ul
>
</
li
>
<
li
class
=
"hmain"
>
<
a
href
=
"#"
>菜单2</
a
>
<
ul
>
<
li
><
a
href
=
"#"
>子菜单1</
a
></
li
>
<
li
><
a
href
=
"#"
>子菜单2</
a
></
li
>
</
ul
>
</
li
>
<
li
class
=
"hmain"
>
<
a
href
=
"#"
>菜单3</
a
>
<
ul
>
<
li
><
a
href
=
"#"
>子菜单1</
a
></
li
>
<
li
><
a
href
=
"#"
>子菜单2</
a
></
li
>
</
ul
>
</
li
>
</
ul
>
</
body
>
</
html
>
|
|
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
|
ul,li{
list-style
:
none
;
}
ul{
padding
:
0
;
margin
:
0
;
}
.main,.hmain{
background-color
:
#666666
;
background-repeat
:
repeat-x
;
width
:
100px
;
}
li{
background-color
:
#eeeeee
;
}
a{
text-decoration
:
none
;
padding-left
:
20px
;
display
:
block
;
width
:
80px
;
padding-top
:
3px
;
padding-bottom
:
3px
;
}
.main a,.hmain a{
color
:
white
;
}
.main li a,.hmain li a{
color
:
black
;
}
.main ul,.hmain ul{
display
:
none
;
}
.hmain{
float
:
left
;
margin-right
:
1px
;
}
.main{
margin-top
:
1px
;
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
|
$(document).ready(
function
(){
$(
".main>a"
).click(
function
(){
var
ulNode = $(
this
).next(
"ul"
);
ulNode.toggle(
"normal"
);
});
$(
".hmain"
).hover(
function
(){
$(
this
).children(
"ul"
).slideDown();
},
function
(){
$(
this
).children(
"ul"
).slideUp();
});
});
|
本文转自yeleven 51CTO博客，原文链接:http://blog.51cto.com/11317783/1795236
