Membuat menu dropdown dengan css

membuat menu dropdown dengan cssBanyak sekali variasi menu web/blog yang bisa dibuat dengan css, ada bentuk menu tulisan maupun gambar biasa, dan ada juga bentuk-bentuk menu dropdown/menu bercabang secara horizontal atau vertikal. Pembuatanya juga bervariasi, ada yang menggunakan javascript, ada juga menggunakan jquery, bahkan ada yang membuat menu dari flash. Pada tulisan ini anda akan mengetahui bagaimana cara membuat menu dropdown horizontal murni dibuat dengan css. Silahkan anda simak.

Oke langsung saja langkah-langkanya sebagai berikut :

Membuat susunan list menu untuk  dropdown dalam html, kodenya berikut ini :

<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 html tersebut akan dihasilkan sementara tampilan seperti berikut :

membuat dropdown

Kemudian kita buat kode css berikut, dengan menambahkannya pada bagian <head>..</head>

<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>

Dari kode-kode tersebut maka akan dihasilkan tampilan seperti berikut :

membuat dropdown

Ini hasilnya, coba anda arahkan pilihan ke menu dibawah ini :

 

Menu ini sudah saya test menggunakan firefox, google chrome, dan internet explorer. Semuanya bisa berjalan dengan normal yang artinya menu dropdown yang dibuat dengan css lebih kompatibel dan lebih ringan jika ditampilkan.

Gimana, mudah kan?? Ada masukan, komentar atau pertanyaan silahkan kirimkan melalui box komentar dibawah.

Semoga Bermanfaat

Zainal Hakim

Baca juga :

** Bebas disunting dengan menyebutkan sumber **

Artikel Lainnya

  • Mengatur format tabel dengan css
    Anda mungkin sudah tidak asing lagi dengan css, yang umumnya digunakan untuk mengatur layout halaman web. Berikut ini saya akan berbagi tentang bagaimana mengatur format tabel dengan css. Pengaturan format tabel yang akan kita lakukan adalah mengganti warna tabel dan jenis tulisan pada tiap cell tabel. SIlahkan simak berikut ini..
  • Efek gambar grayscale dengan css
    Beberapa waktu lalu saya pernah tulis tutorial tentang Membuat efek gambar dengan css, yang membahas tentang bagaimana caranya menambahkan efek glow, berputar, dan transparan. Pada tutorial kali ini saya akan berbagi tentang bagaimana membuat efek gambar grayscale atau hitam putih dengan css.
  • Membuat bingkai gambar dengan css
    Kemampuan css dalam memperindah tampilan sudah tidak diragukan lagi, apalagi dengan hadirnya css3 sebagai pengembangan dari versi sebelumnya memang menambah kemampuan serta fleksibilitasnya dalam urusan pengaturan tampilan halaman web. Kali ini saya akan sedikit berbagi tentang bagaimana membuat bingkai gambar dengan css.
  • Membuat background gradient dengan css3
    Salah satu fitur unggulan yang dihadirkan pada teknologi css3 adalah kemampuanya membuat warna latar/background gradient. Gradient adalah perubahan warna dari satu warna ke warna lainya yang dilakukan secara teratur. Gradient lebih identik pada hasil gambar yang diciptakan melalui proses penempatan kombinasi beberapa warna yang memenuhi sebuah area gambar. Biasanya untuk menghasilkan gambar gradient digunakan aplikasi pengolah gambar seperti photoshop, atau corel draw. Pada artikel ini saya akan berbagi tentang bagaimana membuat latar gradient dengan css3.
  • Mengatur paragraf dengan css
    Paragraf secara mendasar diartikan sebagai kumpulan kalimat yang memiliki ide atau pokok bahasan yang sama. Dalam penulisannya paragraf biasanya terdiri dari susunan kata-kata yang terhubung secara logis untuk menjelaskan suatu topik atau ide. Kali ini saya tidak membahas bagaimana membuat paragraf atau cara menulis paragraf, tapi saya akan membahas bagaimana menyusun tampilan sebuah paragraf html dengan css.

Kiriman terbaru