Menu drop
down
membuat
wrapper(pembungkus)
div dan kita akan
memberikan class menu-wrap.
Skrip HTML
|
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>
|
Didalam
wrapper kita masukkan daftar link yang ingin kita tampilkan, daftar link
tersebut kita bungkus dengan tag <ul> dan tag <li>:
Skrip HTML
|
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>
|
Karena kita
akan menggunakan eksternal CSS, maka tambahkan skrip berikut dalam tag head:
Skrip HTML
|
1
|
<link rel="stylesheet"
type="text/css" href="style.css" media="all"
/>
|
Sehingga
skrip akhir kita menjadi seperti ini:
Skrip HTML
|
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>
|
Simpan skrip
diatas dengan nama “index.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:
Skrip CSS
|
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;
}
|
Dalam skrip
CSS diatas fungsi skrip pada baris no 1 adalah untuk mereset padding dan margin
default dari browser.
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:
Skrip CSS
|
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;
}
|
Pada skrip
no 2 diatas berfungsi untuk menghilangkan style bawaan dari tag <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:
Skrip CSS
|
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;
}
|
Simpan dan
file tersebut, selanjutnya buka file “index.html” untuk melihat hasil. Demikian
tutorial cara membuat menu dropdown sederhana, silahkan berkomentar jika ada
hal yang ditanyakan. Menu dropdown diatas bisa digunakan untuk web atau blog,
karena pada dasarnya web atau blog menggunakan HTML dan CSS dalam menampilkan
data.
0 komentar:
Posting Komentar