Home » , » Membuat Dropdown Menu dengan CSS

Membuat Dropdown Menu dengan CSS

Diposting Oleh Bang Dayat ; Hari Jumat, 08 Maret 2013 Jam 16.33

Salah satu fitur yang ada pada blog adalah menu atau navigasi yang biasanya terletak pada bagian atas postingan. Biasanya berisi home atau beranda, about, sitemap, privacy policy, dan lain-lain sesuai dengan kebutuhan admin blog tersebut. Bentuknya pun beraneka ragam, ada yang horizontal dan ada yang vertikal.

Sedikit itu penjelasan tentang menu atau navigasi blog dan saya ingin sharing cara membuat dropdown menu dengan CSS. Untuk dropdown menu tampilannya lebih menarik. Untuk tutorial ini saya dapatkan referensi dari zainalhakim.web.id. Bagi sobat yang tertarik dan ingi mencoba membuatnya berikut cara-caranya :

1. Berikut adalah kode htmlnya :

<ul class="dropmenu">
<li><a href="#1">Menu 1</a>
    <ul>
    <li><a href="#11">Sub Menu 1</a></li>
    <li><a href="#22">Sub Menu 2</a></li>
    </ul>
</li>
<li><a href="#2">Menu 2</a>
    <ul>
    <li><a href="#21">Sub Menu 1</a></li>
    <li><a href="#22">Sub Menu 2</a></li>
    <li><a href="#23">Sub Menu 3</a></li>
    <li><a href="#24">Sub Menu 4</a></li>
    </ul>
</li>
<li><a href="#3">Menu 3</a>
    <ul>
    <li><a href="#31">Sub Menu 1</a></li>
    <li><a href="#32">Sub Menu 2</a></li>
    <li><a href="#33">Sub Menu 3</a></li>
    <li><a href="#34">Sub Menu 4</a></li>
    </ul>
</li>
</ul>

dari kode diatas maka akan menghasilkan tampilan html sebagai berikut



2. Agar tampilan html diatas menjadi dropdown dan tersusun rapi dengan warna-warna yang ditentukan kita gunakan kode CSS. Untuk kode CSS ini diletakkan pada <head>..</head>. Berikut kodenya :

<style type="text/css">
.dropmenu {
    background: #616161;
    height: 30px;
    list-style-type: none;
    margin: 0;
    padding: 0px;
}
.dropmenu li {
    border-right: solid 1px white;
    float: left;
    height: 30px;
}
.dropmenu li a {
    color: #fff;
    display: block;
    font: 12px arial, verdana, sans-serif;
    font-weight: bold;
    padding: 9px 20px;
    text-decoration: none;
}
.dropmenu li:hover { background: #778899; position: relative; }
.dropmenu li:hover a { text-decoration: underline; }
.dropmenu li:hover ul {
    background-color: #3f4a54;
    border: 1px solid grey;
    left: 0px;
    padding: 3px;
    top: 30px;
    width: 160px;
}
.dropmenu li:hover ul li { border: none; height: 18px; }
.dropmenu li:hover ul li a {
    background-color: #778899;
    border: 1px solid transparent;
    color: #fff;
    display: block;
    font-size: 11px;
    height: 18px;
    line-height: 18px;
    padding: 0px;
    text-decoration: none;
    text-indent: 5px;
    width: 158px;
    padding: 3px;
}
.dropmenu li:hover ul li a:hover {
    background: silver;
    border: solid 1px #444;
    color: #000;
    height: 18px;
    padding: 3px;
}
.dropmenu ul {
    left: -9999px;
    list-style-type: none;
    position: absolute;
    top: -9999px;
}
</style>

3. Setelah digabungkan antara html da CSSnya maka akan menghasilkan dropdownmenu yang cantik dan menarik seperti ini.


Selesai, semoga bermanfaat.
Berbagi dengan artikel ini :
Ditulis oleh : Bang Dayat
Description: Membuat Dropdown Menu dengan CSS , Rating: 5
Reviewer: Bang Dayat, ItemReviewed: Membuat Dropdown Menu dengan CSS

Artikel terkait tentang ,

Berlangganan Artikel BD
Masukkan Email Anda:

 
Support : Bang Dayat
Copyright © 2012-2017. Bang Dayat Blog's - All Rights Reserved

Proudly powered by Blogger