Pada kesempatan kali ini, nyekrip akan memberikan tutorial bagaimana cara membuat menu dropdown sederhana dengan HTML dan CSS, dalam membuat menu dropdown ini tidak sampai membutuhkan JavaScript/jQuery.DropDown Menu atau Menu Dropdown adalah sebuah menu yang berisikan kumpulan link-link yang ditampilkan menurun kebawah jika menu tersebut di klik dan menu itu berfungsi sebagai pengarah ke halaman web lain, baik dari web kita sendiri atau dari web lain.
Tampilan menu dropdown
Dibawah ini merupakan hasil modifikasi dari skrip diatas dan bisa menambah menu, banyak yang lapor kalau contoh diatas error ketika ditambah menu. Sebenarnya tidak error, karena hanya sebagai dasar pembelajaran sehingga membutuhkan modifikasi:
Menu Dropdown Versi 2
Membuat menu dropdown: skrip HTML
Kita mulai dengan membuat wrapper(pembungkus)div dan kita akan memberikan class menu-wrap.
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
</head>
<body>
<div class="menu-wrap">
</div>
</body>
</html>
|
<ul> dan tag <li>:
1
2
3
4
5
6
7
8
9
10
|
<ul>
<li><a href="beranda.html">Beranda</a></li>
<li><a href="tentang.html">Tentang Kami</a></li>
<li><a href="kontak.html">Kontak Kami</a>
<ul>
<li><a href="alamat.html">Alamat Kami</a></li>
<li><a href="kebijakan.html">Kebijakan</a></li>
</ul>
</li>
</ul>
|
1
|
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div class="menu-wrap">
<ul>
<li><a href="beranda.html">Beranda</a></li>
<li><a href="tentang.html">Tentang Kami</a></li>
<li><a href="kontak.html">Kontak Kami</a>
<ul>
<li><a href="alamat.html">Alamat Kami</a></li>
<li><a href="kebijakan.html">Kebijakan</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
|
Membuat menu dropdown: skrip CSS
Setelah kita menyelesaikan pembuatan file HTML, selanjutnya dalam membuat menu dropdown kita akan melengkapinya dengan file CSS. Buat file baru dan simpan sebagai “style.css”, dalam file tersebut mulai ketikkan skrip css berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
* {margin:0; padding:0;}
body {
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
}
.menu-wrap {
background-color:#53bd84;
height:50px;
line-height:50px;
position:relative;
width:770px;
margin:auto;
margin-top:80px;
}
|
Pada skrip no 4 sampai no 6, kita tentukan warna background dari body dan menentukan warna sekaligus ukuran dari font.
Untuk skrip no 10 sampai no 16, untuk mengatur segala atribut dan nilai dari class menu wrap mulai dari lebar, tinggi dan posisi. Selanjutnya kita menambahkan skrip CSS berikut:
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
|
.menu-wrap ul {
list-style:none;
}
.menu-wrap ul li a {
float:left;
width:150px;
display:block;
text-align:center;
color:#FFF;
text-decoration:none;
text-transform:uppercase;
}
.menu-wrap ul li a:hover {
background-color:#666;
display:block;
}
.menu-wrap ul li:hover ul {
display:block;
}
.menu-wrap ul ul {
display:none;
list-style:none;
position:absolute;
background-color:#53bd84;
left:300px;
top:50px;
width:190px;
}
.menu-wrap ul ul li a {
float:none;
display:block;
padding-left:30px;
text-align:left;
width:160px;
}
.menu-wrap ul ul li a:hover {
color:#fff;
}
|
<ul>.Skrip no 6 sampai no 12 berfungsi untuk mengatur ukuran, posisi dan merubah tulisan link ke huruf besar.
Skrip no 16 sampai no 17 berfungsi untuk memberikan warna background ketika link di sorot/hover.
Pada skrip no 25 sampai no 31 mengatur agar secara default sub link tidak tampil, karena sub link akan tampil ketika link utama di sorot/hover.
Sehingga skrip CSS akhir kita menjadi seperti ini:
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
|
* {margin:0; padding:0;}
body {
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
}
.menu-wrap {
background-color:#53bd84;
height:50px;
line-height:50px;
position:relative;
width:770px;
margin:auto;
margin-top:80px;
}
.menu-wrap ul {
list-style:none;
}
.menu-wrap ul li a {
float:left;
width:150px;
display:block;
text-align:center;
color:#FFF;
text-decoration:none;
text-transform:uppercase;
}
.menu-wrap ul li a:hover {
background-color:#666;
display:block;
}
.menu-wrap ul li:hover ul {
display:block;
}
.menu-wrap ul ul {
display:none;
list-style:none;
position:absolute;
background-color:#53bd84;
left:300px;
top:50px;
width:190px;
}
.menu-wrap ul ul li a {
float:none;
display:block;
padding-left:30px;
text-align:left;
width:160px;
}
.menu-wrap ul ul li a:hover {
color:#fff;
}
|
SEMOGA BERMANFAAT
0 Komentar untuk "Cara Membuat || Menu Dropdown"