Menu dropdown dapat dibuat secara mudah hanya dengan menggunakan
perintah CSS. Disini saya akan memberikan cara dasar membuat menu
dropdown agar dapat dengan mudah di mengerti dan dikerjakan oleh pemula.
Ikuti tutorial berikut ini untuk melihat langkah demi langkah proses
membuat sendiri menu dropdown dengan CSS.
Jika kita telah membuat struktur HTML seperti diatas, maka hasilnya adalah sebagai berikut :
Langkah kedua yaitu membuat tampilan menu menjadi lebih menarik dengan menggunakan perintah CSS. Maka dari itu, buatlah file CSS dengan nama style.css dan isi dengan perintah yang ada dibawah ini.
Jika kita telah membuat kedua file tersebut, yaitu struktur HTML dan CSS-nya. Maka hasilnya akan seperti ini.
Saya akan membuat menu dengan fitur dua sub
kategori. Seri pertama dari sub-link muncul di bawah bar utama (Home,
Personal, Tutorial, dll), maka seri kedua link muncul dari dropdown
pertama (Tutorial -> Internet, Web Programmer). Lihatlah demo menu
dropdown CSS untuk melihat semuanya dalam tindakan.
Kode 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
| <html><head><title>Membuat Menu Dropdown</title><link href="style.css" rel="stylesheet" type="text/css"></head><body><nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Personal</a></li> <li><a href="#">Tutorial</a> <ul> <li><a href="#">Internet</a></li> <li><a href="#">Web Programmer</a> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> </ul> </li> </ul> </li> <li><a href="#">Tips & Trik</a></li> <li><a href="#">Info</a></li> <li><a href="#">Review</a></li> </ul></nav></body></html> |
Jika kita telah membuat struktur HTML seperti diatas, maka hasilnya adalah sebagai berikut :
Langkah kedua yaitu membuat tampilan menu menjadi lebih menarik dengan menggunakan perintah CSS. Maka dari itu, buatlah file CSS dengan nama style.css dan isi dengan perintah yang ada dibawah ini.
Kode 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
| body { width: 900px; margin: 40px auto;}/* MENU-UTAMA */nav ul { background: #666; /* Memberi warna pada latar belakang menubar */ padding: 0 20px; /* Membuat jarak antara teks dengan sisi kotak menubar */ border-radius: 30px; /* Membuat efek tumpul pada sudut menubar */ list-style: none; /* Menghilangkan tanda titik di samping daftar menu */ position: relative; box-shadow: 0px 0px 5px rgba(0,0,0,.25); /* Membuat efek bayangan */}nav ul:after { content: ""; clear: both; display: block;}nav ul li { float: left;}nav ul li:hover { background: #ccc;}nav ul li a { display: block; padding: 15px 40px; color: #fff; /* Memberi warna pada teks */ text-decoration: none;}nav ul li:hover > a { color: #333;}/* SUB-MENU */nav ul ul { background: #ccc; border-radius: 0px; padding: 0; position: absolute; top: 100%; display: none;}nav ul ul li { float: none; position: relative;}nav ul ul li a { padding: 15px 40px; color: #333;} nav ul ul li a:hover { background: #666; color: #fff;}nav ul li:hover > ul { display: block;}/* SUB-SUB-MENU */ nav ul ul ul { position: absolute; left: 100%; top:0;} |
Jika kita telah membuat kedua file tersebut, yaitu struktur HTML dan CSS-nya. Maka hasilnya akan seperti ini.
0 komentar:
Posting Komentar