Membuat Drop Down Menu CSS – Apakah anda tahu
apa itu CSS ? Apakah anda pernah menggunakannya ?,CSS(Cascading Style
Sheet) adalah suatu bahasa pemrograman web yang digunakan untuk
mempercantik tampilan halaman web dan juga membuatnya lebih terstruktur.
Pada CSS kita dapat mengatur atribut-atribut dari objek-objek yang
ada di html seperti gambar,text,tabel dan lain-lain.CSS merupakan suatu
komponen yang penting dalam pembuatan web dengan tampilan yang “User
Friendly”.
Jika dahulu orang cenderung menggunakan tabel untuk mengatur tata
letak pada halaman web.Setelah adanya CSS pengaturan tata letak menjadi
lebih mudah dan memberikan tampilan yang lebih baik.
Pada artikel ini saya akan menjelaskan salah satu teknik pada css
yaitu membuat drop down menu.Drop down menu adalah teknik yang digunakan
untuk membuat sub menu pada main menu halaman web.Hampir sebagian besar
orang menggunakan teknik ini pada websitenya agar dapat memiliki
kategori main menu yang terstruktur dan tampilan nya yang indah di
mata.Jika anda masih bingung apa itu drop down menu inilah contoh
gambarnya :
Membuat Drop Down Menu CSS
- Buatlah file CSS dengan nama “style.css” dengan kode seperti ini
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
|
#DropdownMenu {
background:#ff6803;
border-radius:6px;
width: 880px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color:#FFFFFF;
font-weight: bold;
margin-bottom: 30px;
padding: 2px;
}
#Dropdownbox {
width: 875px;
border-radius:6px;
float: left;
margin: 0;
padding: 0;
}
#strike {
border-radius:6px;
margin: 0;
padding: 0;
}
#strike ul {
border-radius:6px;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#strike li {
border-radius:6px;
list-style: none;
margin: 0;
padding: 0;
}
#strike li a, #strike li a:link, #strike li a:visited {
border-radius:6px;
color:#FFFFFF;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0;
padding: 9px 15px 8px;
}
#strike li a:hover, #strike li a:active {
border-radius:6px;
background:#FFFFFF;
color:#ff6803;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#strike li li a, #strike li li a:link, #strike li li a:visited {
border-radius:6px;
background:#ff6803;
width: 150px;
color:#FFFFFF;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#strike li li a:hover, #strike li li a:active {
border-radius:6px;
background:#FFFFFF;
color:#ff6803;
padding: 7px 10px;
}
#strike li {
border-radius:6px;
float: left;
padding: 0;
}
#strike li ul {
border-radius:6px;
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#strike li ul a {
border-radius:6px;
width: 140px;
}
#strike li ul ul {
border-radius:6px;
margin: -32px 0 0 171px;
}
#strike li:hover ul ul, #strike li:hover ul ul ul, #strike li.sfhover ul ul, #strike li.sfhover ul ul ul {
border-radius:6px;
left: -999em;
}
#strike
li:hover ul, #strike li li:hover ul, #strike li li li:hover ul, #strike
li.sfhover ul, #strike li li.sfhover ul, #strike li li li.sfhover ul {
border-radius:6px;
left: auto;
}
#strike li:hover, #strike li.sfhover {
border-radius:6px;
position: static;
}
|
- Setelah itu buatlah sebuah file html untuk menampilkan desainnya
|
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="DropdownMenu">
<div id="Dropdownbox">
<ul id="strike">
<li><a href="#">Menu1</a></li>
<li>
<a href="#">Menu2</a>
<ul>
<li>
<a href="#">Sub Menu 2</a>
<ul>
<li><a href="#">Sub Sub Menu 2</a></li>
<li><a href="#">Sub Sub Menu 2</a></li>
<li><a href="#">Sub Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
<li><a href="#">Sub Menu 5</a></li>
<li><a href="#">Sub Menu 6</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</div>
</div>
</body>
</html>
|
- Ingat file CSS harus berada 1 folder dengan file html nya karena pada kode diatas file dipanggil ditempat file html berada
Bagaimana apakah anda berhasil membuat dropdown menu,desain bisa anda
ganti sesuai selera seperti warna latar belakang menu,warna text,type
text dan masih banyak lagi.Pada file html anda hanya perlu mengganti
menu,submenu,dan link pada masing-masing menu.Cukup sekian penjelasan
dari saya,semoga anda paham dengan artikel
Cara Membuat Drop Down Menu.
0 komentar:
Post a Comment