Pada kesempatan kali ini, saya mau membagikan tutorial yakni bagaimana cara membuat Dropdown menu yang sederhana tapi keren dengan CSS dan HTML. Dropmenu adalah menu yang jika kita mengarahkan kursor ke menu tersebut maka akan muncul menu lainya yang memanjang kebawah (gak mesti kebawah sih..). Fungsi dropdown menu ini banyak banget gan, selain memperindah web/blog, juga bisa menghemat slot/tempat dan gampang di kategorikan. Salah satu contoh dropdown menu adalah menu di LygaCool ini. (lihat menu lygacool). Gimana gan, keren gak dropdown menu di lygacool ?. Btw, kali ini saya akan membagikan tutorial seperti judul di atas yang lebih keren lagi gan. To the point aja deh.
Bahan-Bahan :
- Tau dasar HTML/CSS.
- Untuk kode-kode warna bisa di lihat disini : Klik Disini
Yuk kita mulai..
Pertama, buat file dengan nama bebas ber ekstensi .html (contoh yang saya buat : index.html)
Kedua, copypaste kode di bawah ini ke file yang di buat tadi :
<html>Penjelasan langkah ke-dua :
<head>
<title>Dropdown Menu</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body><center>
<nav>
<ul>
<li><a href="http://lygacool.blogspot.com/">Home</a></li>
<li><a href="http://lygacool.blogspot.com/">Ini adalah</a>
<ul>
<li><a href="#">Dropdown</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Dimana terdapat</a>
<ul>
<li><a href="#">Dropdown</a></li>
<li><a href="#">Menu lagi</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://lygacool.blogspot.com/2013/09/about-me.html">About Us</a></li>
<li><a href="http://lygacool.blogspot.com/2014/07/cara-donasi-untuk-lygacool.html">Donasi</a></li>
<li><a href="https://www.facebook.com/groups/lygacool/">Join Group Facebook</a>
<ul>
<li><a href="https://www.facebook.com/pages/Lygacool/279181358866056?fref=ts">Our Fanspage FB</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Pada kode bewarna ini , itu fungsinya untuk memanggil file CSS yang akan digunakan.
pada kode bwarna ini , ini lah kode menu nya gan, agan bisa edit sesuka hati di bagian ini.
Ketiga, buatlah file dengan nama bebas ber-ekstensi css. (contoh saya disini : style.css), ini kodenya :
nav ul ul {Penjelasan kode di atas :
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #000000;
padding: 0;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #696969;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
Kode yang bewarna MERAH itu adalah penentu warnanya gan, contoh pada nav ul background nya bewarna kode : #000000, ini adalah warna hitam.
Untuk kode-kode warna bisa di lihat di bahan-bahan di atas.
Berikut penampakan dropdown menu yang telah saya buat :
DEMO ---- DOWNLOAD
Sekian Tutorial ini, terimakasih telah berkunjung!
No comments:
Post a Comment
Menjadi Donatur untuk blog ini hanya dengan 1 klik iklan.