Membuat dropdown menu dengan html 5 dan css 3 – Kata
ini sudah biasa kita dengar, yaitu Dropdown menu. Dropdown menu adalah
menu-menu yang ada pada website/blog, yang akan membuat web/blog anda menjadi
lebih mantap dilihat pengunjung.
Tampilan menu pada website sekarang lebih sangat di
perhatikan, dikarenakan menu merupakan suatu perlengkapan dalam tampilan
website. Sehingga membuat para web designner berlomba-lomba untuk membuat
tampilan menunya lebih elegan di lihat.
Pada tutorial kali ini, saya akan memberikan tutorial
yaitu Membuat Dropdown Menu Vertikal Dengan HTML 5 dan CSS 3. Untuk
keterangannya, silahkan anda ikuti tutorial kali ini. Berikut
langkah-langkahnya :
1. Buatlah
file html baru pada text editor anda, dan beri nama index.html. Lalu copas
script dibawah ini :
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<style
type="text/css">
body { margin:0 px; }
#leftmenu {
width:15%;
min-width:150px;
}
#leftmenu > details {
}
#leftmenu > details > summary {
cursor:pointer;
background:#DFEFFF;
margin:6px;
padding:8px;
}
#leftmenu > details >
summary:hover {
background:#EFEFEF;
}
#leftmenu > details >
summary::-webkit-details-marker {
/*display:none;*/
}
#leftmenu > details > a {
display:block;
text-decoration:none;
color:#000;
font-size:13px;
margin:3px 6px 3px 18px;
padding: 4px;
background:#EFEFEF;
}
#leftmenu > details > a:hover {
background:#DFEFFF;
font-weight:bold;
}
#leftmenu > details > a:before {
content:"> "
}
</style>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled
Document</title>
</head>
<body>
<div id="leftmenu">
<details>
<summary>Menu Item 1</summary>
<a href="#">Subcategory A</a>
<a href="#">Subcategory B</a>
<a href="#">Subcategory C</a>
</details>
<details>
<summary>Menu Item 1</summary>
<a href="#">Subcategory A</a>
<a href="#">Subcategory B</a>
<a href="#">Subcategory C</a>
<a href="#">Subcategory D</a>
<a href="#">Subcategory E</a>
</details>
<details>
<summary>Menu Item 1</summary>
<a href="#">Subcategory A</a>
<a href="#">Subcategory B</a>
</details>
<details>
<summary>Menu Item 1</summary>
<a href="#">Subcategory A</a>
<a href="#">Subcategory B</a>
<a href="#">Subcategory C</a>
</details>
</div>
</body>
</html>
2. Setelah anda copas script diatas, lalu simpan dan coba di browser anda.
Perhatikan script diatas, disini
saya menggunakan sedikit script html 5 yaitu <details></details>,
<summary></summary>. Itulah script html 5 yang saya gunakan untuk
membuat Dropdown menu ini. Membuat Dropdown Menu dengan HTML 5 dan CSS 3 ini,
juga sedikit menggunakan trik CSS 3.
Sekian tutorial yang saya berikan
semoga tutorial Membuat Dropdown Menu dengan HTML 5 dan CSS 3 yang saya berikan
dapat bermanfaat bagi anda. Semoga berhasil, silahkan berkomentar jika memiliki
masalah. Untuk mendapatkan script lengkapnya, silahkan download dibawah.
