CSSで作るドロップダウンメニューのドロップ表示5パターンです。
コードの書き方は、どのパターンでも共通となるhtmlと CSSに加え、パターンごとに個別に設定するCSSを記述していきます。
共通部分になるhtmlとCSSを記述する
まずは、共通部分になるhtmlを記述していきます。
【 html 】
1
<ul id=”normal” class=”dropmenu”>
2
<li><a href=”#”>menu</a>
3
<ul>
4
<li><a href=”#”>submenu</a></li>
5
<li><a href=”#”>submenu</a></li>
6
<li><a href=”#”>submenu</a></li>
7
<li><a href=”#”>submenu</a></li>
8
</ul>
9
</li>
10
<li><a href=”#”>menu</a>
11
<ul>
12
<li><a href=”#”>submenu</a></li>
13
<li><a href=”#”>submenu</a></li>
14
<li><a href=”#”>submenu</a></li>
15
</ul>
16
</li>
17
<li><a href=”#”>menu</a>
18
<ul>
19
<li><a href=”#”>submenu</a></li>
20
<li><a href=”#”>submenu</a></li>
21
<li><a href=”#”>submenu</a></li>
22
</ul>
23
</li>
24
<li><a href=”#”>menu</a>
25
<ul>
26
<li><a href=”#”>submenu</a></li>
27
<li><a href=”#”>submenu</a></li>
28
<li><a href=”#”>submenu</a></li>
29
<li><a href=”#”>submenu</a></li>
30
</ul>
31
</li>
32
<li><a href=”#”>menu</a>
33
<ul>
34
<li><a href=”#”>submenu</a></li>
35
<li><a href=”#”>submenu</a></li>
36
<li><a href=”#”>submenu</a></li>
37
<li><a href=”#”>submenu</a></li>
38
</ul>
39
</li>
40
</ul>
次に、共通部分になるCSSを記述していきます。
【 CSS 】
1
.dropmenu{
2
*zoom: 1;
3
list-style-type: none;
4
width: 960px;
5
margin: 5px auto 30px;
6
padding: 0;
7
}
8
.dropmenu:before, .dropmenu:after{
9
content: “”;
10
display: table;
11
}
12
.dropmenu:after{
13
clear: both;
14
}
15
.dropmenu li{
16
position: relative;
17
width: 20%;
18
float: left;
19
margin: 0;
20
padding: 0;
21
text-align: center;
22
}
23
.dropmenu li a{
24
display: block;
25
margin: 0;
26
padding: 15px 0 11px;
27
background: #8a9b0f;
28
color: #fff;
29
font-size: 14px;
30
line-height: 1;
31
text-decoration: none;
32
}
33
.dropmenu li ul{
34
list-style: none;
35
position: absolute;
36
z-index: 9999;
37
top: 100%;
38
left: 0;
39
margin: 0;
40
padding: 0;
41
}
42
.dropmenu li ul li{
43
width: 100%;
44
}
45
.dropmenu li ul li a{
46
padding: 13px 15px;
47
border-top: 1px solid #7c8c0e;
48
background: #6e7c0c;
49
text-align: left;
50
}
51
.dropmenu li:hover > a{
52
background: #6e7c0c;
53
}
54
.dropmenu li a:hover{
55
background: #616d0b;
56
}
ここまでの記述で、すべてのメニューが表示された状態の設定になります。
ここからパターンごとに個別のCSSを設定していき それぞれのドロップダウンの効果をつけていきます。
ドロップダウンメニュー【 1 】 「 ベーシックバージョン 」
マウスオーバーで、普通にドロップダウンメニューが現れるベーシックな形。
【 CSS 】
1
#normal li ul{
2
display: none;
3
}
4
#normal li:hover ul{
5
display: block;
6
}
ドロップダウンメニュー【 2 】 「 スライドしながら伸び縮み 」
マウスオーバーで、ドロップダウンメニューがスライドしながら伸び縮みするエフェクト
【 CSS 】
1
#dropmenu li ul li{
2
overflow: hidden;
3
height: 0;
4
transition: .2s;
5
}
6
#dropmenu li:hover ul li{
7
overflow: visible;
8
height: 38px;
9
}
ドロップダウンメニュー【 3 】 「 フェードイン 」
マウスオーバーでプルダウンメニューがふわっと現れる
【 CSS 】
1
#fade-in li ul{
2
visibility: hidden;
3
opacity: 0;
4
transition: 0s;
5
}
6
#fade-in li:hover ul{
7
visibility: visible;
8
opacity: 1;
9
}
10
#fade-in li ul li a{
11
visibility: hidden;
12
opacity: 0;
13
transition: .5s;
14
}
15
#fade-in li:hover ul li a{
16
visibility: visible;
17
opacity: 1;
18
}
ドロップダウンメニュー【 4 】 「 1枚ずつ回転しながら表示 」
マウスオーバーで、1枚ずつ回転しながら表示するエフェクト
【 CSS 】
1
#flip2 li ul {
2
visibility: hidden;
3
perspective: 400px;
4
}
5
#flip2 li:hover ul{
6
visibility: visible;
7
}
8
#flip2 ul li{
9
transform: rotateY(90deg);
10
transform-origin: 50% 0;
11
transition: .3s;
12
}
13
#flip2 li:hover li{
14
transform: rotateY(0);
15
}
16
#flip2 ul li:nth-child(2) {
17
transition-delay: .1s;
18
}
19
#flip2 ul li:nth-child(3) {
20
transition-delay: .2s;
21
}
22
#flip2 ul li:nth-child(4) {
23
transition-delay: .3s;
24
}
25
#flip2 ul li:nth-child(5) {
26
transition-delay: .4s;
27
}
ドロップダウンメニュー【 5 】 「 巻かれたパネルがパタパタ広がる 」
マウスオーバーで巻かれたパネルがパタパタ広がっていくようなエフェクト
【 CSS 】
1
#flip3 ul {
2
visibility: hidden;
3
perspective: 400px;
4
}
5
#flip3 li:hover ul{
6
visibility: visible;
7
}
8
#flip3 ul li{
9
transform: rotateX(-90deg);
10
transform-origin: 50% 0;
11
transition: .1s;
12
}
13
#flip3 li:hover ul li{
14
transform: rotateX(0);
15
}
16
#flip3 li:hover ul li:nth-child(1) {
17
transition-delay: 0s;
18
}
19
#flip3 li:hover ul li:nth-child(2) {
20
transition-delay: .1s;
21
}
22
#flip3 li:hover ul li:nth-child(3) {
23
transition-delay: .2s;
24
}
25
#flip3 li:hover ul li:nth-child(4) {
26
transition-delay: .3s;
27
}
28
#flip3 li ul li:nth-last-of-type(1) {
29
transition-delay: 0s;
30
}
31
#flip3 li ul li:nth-last-of-type(2) {
32
transition-delay: .1s;
33
}
34
#flip3 li ul li:nth-last-of-type(3) {
35
transition-delay: .2s;
36
}
37
#flip3 li ul li:nth-last-of-type(4) {
38
transition-delay: .3s;
39
}
関連記事
ドロップダウンメニュー関連の記事
PICK UP
TIPS記事セレクション