Cara Membuat Menu Drop Down Untuk Design Web Dengan Menggunakan CSS


Kali ini kita akan membuat satu lagi tutorial pembuatan menu pada sebuah web.
banyak cara mendesain sebuah menu pada web termasuk pada sebuah blog.
maka kali ini saya akan memberikan tutorial web tentang bagaimana membuat menu drop down dengan CSS.

Menu drop down dengan JavaScript maupun CSS sebenarnya sama saja jika dilihat dari segi fungsi atau kegunaan. Namun, jika memanfaatkan JavaScript biasanya menu yang dibuat lebih keren dan menarik dilihat karena mungkin animasi menu yang dihasilkan lebih bagus.
Namun, JavaScript biasanya membuat halaman kita menjadi lebih berat.
Sebaliknya jika menggunakan CSS, biasanya menu yang dihasilkan memang terlihat lebih kaku namun lebih ringan.
Tampilannya juga bisa kita desain lebih menarik sesuai dengan kreasi kita memanfaatkan CSS dalam membuat menu tersebut.

Berikut ini cara membuat sebuah menu drop down:

Saya akan menjelaskan steb by step bagaimana mendesain menu drop down tersebut.

Buatlah terlebih dahulu struktur drop down menu tersebut.
Pembuatan struktur ini menggunakan tag yang berfungsi untuk membuat list, sebab menu-menu tersebut bisa dikatakan sebuah list dari item-item. Item-item itulah yang kita fungsikan sebagai menu. Tag tersebut adalah
<ul></ul> sebagai level utama dan <li></li> sebagai sub level.

Saya berikan sebuah contoh struktur HTML dari menu drop down :

<ul>
<li><a href="URL 1">MENU 1</a></li>
<li><a href="URL 2">MENU 2</a></li>
<li><a href="URL 3">MENU 3</a></li>
</ul>

Perhatikan bahwa keseluruhan struktur dibungkus oleh tag <ul></ul>,
artinya bahwa terdapat sebuah bagan list dimana item-item yang menjadi isi dari bagan tersebut (yang menjadi list) adalah “Menu 1“, “Menu 2“, dan “Menu 3” yang masing-masing dibungkus oleh tag <li></li>.

Struktur tersebut akan menjadi sebuah menu horizontal biasa.
Nah, kita akan membuat agar menu-menu tersebut mempunyai sub menu lagi yang mana sub menu tersebut muncul ketika menu utamanya di sorot (sehingga disebut drop down menu).

Dengan demikian, kita akan membuat sebuah bagan list lagi dimana bagan ini akan berada di dalam bagan list menu utama. Dengan kata lain di dalam list akan ada list. Bingung ya..? he3x. Strukturnya akan seperti ini:

<ul>
<li><a href="URL 1">MENU 1</a>
<ul>
<li><a href="URL sub 1">Sub menu 1</a></li>
<li><a href="URL sub 2">Sub menu 2</a></li>
<li><a href="URL sub 3">Sub menu 3</a></li>
</ul>
</li>
<li><a href="URL 2">MENU 2</a></li>
<li><a href="URL 3">MENU 3</a></li>
</ul>

Prinsip list tersebut sama dengan penjelasan pada langkah 1, hanya saja tag </li></li> tidak lagi hanya membungkus struktur “Menu 1“, tetapi sudah ikut membungkus sub menu dari “Menu 1” juga (perhatikan Tag yang berwarna merah).
Pada browser, struktur tersebut akan terlihat seperti gambar berikut:

Karena kita ingin membuat sebuah menu drop down yang tampil secara horizontal, maka kita akan mengatur tampilannya dengan menggunakan CSS.
Untuk CSS menu drop down tersebut, kita buat seperti ini:

Untuk menghilangkan list style pada menu drop down (seperti yang terlihat pada
gambar sebelumnya) :

#menuku ul {
list-style: none;
}

Keterangan :
#menuku ul –> artinya kita mengatur bagan list (ul) yang ada didalam elemen yang kita beri atribut ID dengan nama “menuku”. Elemen itu akan kita buat selanjutnya, apakah sebuah div, span, dan lain-lain.
list-style: none –> berfungsi untuk menghilangkan style dari list tersebut (style itu berupa bullet).
padding:0 dan margin:0 –> berfungsi agar jarak dari semua sisi pada bagan tersebut sebesar 0 sehingga tidak merusak layout dari bagan list menu tersebut.

Untuk membuat menu-menu tersebut tampil secara horizontal :

#menuku li {
float: left;
}

Keterangan :
#menuku li –> artinya hampir sama dengan #menuku ul, hanya saja ini digunakan untuk mengatur list-list menu itu sendiri, yaitu Menu 1, Menu 2, dan Menu 3 (yang kita buat pada langkah 1).
float: left –> artinya kita membuat menu-menu tersebut berjejer horizontal dari kiri.

Karena kita ingin sub menu muncul hanya ketika pointer berada diatas menu utama, maka kita perlu menyembunyikan bagan list dari sub menu tersebut.

#menuku ul ul {
visibility:hidden;
width:149px;
}

Keterangan :
#menuku ul ul –> artinya hampir sama dengan #menu ul namun struktur ini berfungsi untuk mengatur bagan list sub menu yang berada didalam bagan list menu utama.
visibility:hidden –> berfungsi untuk menghilangkan bagan list sub menu (ul yang kedua)
width:149px –> berfungsi untuk membuat lebar bagan list sub menu tersebut sebesar 149px.

Agar sub menu tersebut muncul ketika menu utama disorot, maka kita buat struktur CSS seperti berikut:

#menuku ul li:hover ul,
#menuku ul a:hover ul{
visibility:visible;
}

CSS tersebut berfungsi agar bagan list sub menu akan terlihat ketika pointer berada di atas menu utama serta di atas link yang ada pada bagan list sub menu tersebut.
Kita akan mengatur sedikit tampilan dari menu-menu tersebut agar terlihat lebih menarik

#menuku li a {
background-color:#000000;
height: 2em;
width: 149px;
display: block;
border: 0.1em solid #dcdce9;
color: #ffffff;
text-decoration: none;
text-align: center;
}

Karena menu tersebut akan menjadi berupa link, maka kita akan mengatur tampilannya sebagai sebuah link.

Keterangan :
background-color:#000000 –>warna backgroundnya adalah #000000
height: 2em –> tinggi dari menu tersebut sebesar 2em
width: 149px –> lebar menu sebesar 149px
display: block –> menu tersebut akan tampil dalam bentuk block
border: 0.1em solid #999999 –> border menu sebesar 0.1em, berbentuk solid, dan memiliki warna dengan kode #999999. Untuk mengetahui kode warna CSS yang lain silahkan buka disini.
color: #FFFFFF –> tulisan menu akan berwarna #FFFFFF
text-decoration: none –> link menu tidak akan mempunyai garis bawah
text-align: center –> letak tulisan menu akan berada ditengah-tengah

Setelah membuat CSS dari drop down menu tersebut, maka selanjutnya adalah memasangkan atribut CSS pada bagan list menu tersebut. Kita akan memasukkan bagan list menu tersebut terlebih dahulu kedalam sebuah div, sehingga pada div tersebut atribut “menuku” akan dipasang. Ganti struktur pada langkah 2 menjadi seperti berikut:

<div id="menuku">
<ul>
<li><a href="URL 1">MENU 1</a>
<ul>
<li><a href="URL sub 1">Sub menu 1</a></li>
<li><a href="URL sub 2">Sub menu 2</a></li>
<li><a href="URL sub 3">Sub menu 3</a></li>
</ul>
</li>
<li><a href="URL 2">MENU 2</a></li>
<li><a href="URL 3">MENU 3</a></li>
</ul>
</div>

Hasilnya akan seperti ini :

By dennyhellmanda90

2 comments on “Cara Membuat Menu Drop Down Untuk Design Web Dengan Menggunakan CSS

    • Sedikit sentuhan dengan memberikan background gradient dan box-shadow :

      nav ul li{
      float:left;
      position:relative;
      }

      nav ul li a{
      color:#111;
      display:block;
      font-size:12px;
      padding:3px 20px;
      text-decoration:none;
      }

      Selanjutnya kita beri floating left (agar menu berjejer kesamping) pada li dan memberikan position relative karena dalam li ini akan ada element yang memiliki position absolute yakni ul untuk submenu. Kita juga berikan style untuk linknya dengan menghilangkan garis bawah dan memberikan padding agar menu tidak terlalu berdempetan.

      nav ul ul{
      position:absolute;
      top:100%;
      background:white;
      }
      nav ul ul li{
      float:none;
      }

      Selector tersebut akan memilih ul yang terdapat dalam menu utama atau ul untuk submenu. Seperti saya sebutkan sebelumnya, kita tambahkan position absolute, agar posisi submenu bisa kita atur dengan mudah. penambahan top:100% berfungsi untuk menempatkan sub menu tepat dibawah menu utama (100% tinggi dari menu utama).

      Kita juga mereset floating untuk li karena akan memiliki floating yang diturunkan dari style sebelumnya (Agar submenu ditampilkan kembali menurun ke bawah).

      Karena submenu seharusnya tersembunyi dan hanya muncul ketika kita meng-hover pada menu yang memiliki sub, maka kita sembunyikan terlebih dahulu ul untuk sub menu ini. Tambahkan display:none pada selector nav ul ul :

      nav ul ul{
      position:absolute;
      top:100%;
      display:none; /* sembunyikan sub menu */
      }

      Untuk menampilkan sub menu ketika li/menu yang bersangkutan di hover, maka kita gunakan selector seperti berikut :

      nav ul li:hover > ul{
      display:block;
      }

      Sejauh ini dropdown menu kita sudah hampir selesai, coba anda buka dalam browser lalu hover menu blog. Sub menu untuk menu blogpun akan muncul.
      Kita tambahkan sedikit polesan warna ketika link menu di hover, tambahkan style berikut :

      nav ul li:hover > a, nav ul ul li:hover > a {
      color :white;
      background-image:-webkit-linear-gradient(top, #506def,#2041DE);
      background-color:#506def;
      }

      Jika style yang diberikan sampai sini, maka menu kita hanya terbatas pada satu submenu (submenu selanjutnya akan ditampilkan dibawah, bukan disamping submenu), agar menu yang kita buat bisa memiliki sub-sub menu lagi di dalamnya (dan ditampilkan di sebelah submen), tambahkan style berikut :

      nav ul ul ul{
      position:absolute;
      left:100%;
      top:0;
      }

      IE8

      Ok, kebetulan saya ada Internet Explorer 8 (bukan kebetulan kali, emang udah ada dari dulu), saya coba test dengan browser jadul ini dan apa yang terjadi adalah, semua hasil styling kita tidak bekerja!. Ini dikarenakan kita menggunakan tag HTML5 yang belum didukung oleh IE8 ke bawah, coba tag apa? Ya.. tag nav. Tag nav dan tag-tag HTML5 lainnya tidak akan dibuat oleh IE8 ke bawah. Permasalahannya hanyalah pada tag nav ini. silahkan coba ganti nav dengan div dan ubah pula cssnya (ganti nav menjadi div) masalahpun terselesaikan.

      Namun agar kita dapat menggunakan HTML5, Saya akan menggunakan library IE9.js. Library ini akan memberikan kemampuan (sedikit kemampuan) agar browser jadul seperti IE8 ke bawah ini mampu menampilkan HTML5 atau bertingkah seperti browser modern. Download script IE9.js disini http://code.google.com/p/ie7-js/ dan tempatkan di folder proyek kita.

      Setelah didownload, tambahkan kode berikut tepat sebelum penutup tag head.

      Kode diatas merupakan Conditional Tag yang artinya kira-kira seperti berikut : “Jika browser IE yang digunakan versinya lebih rendah dari Internet Explorer 9 maka sertakan file javasript IE9.js”.

      Sedikit fix, ketika anda coba tampilkan kembali maka akan ada jarak antara nav dengan browser (ada margin-top), tambahkan style berikut agar menu menempel pada browser :

      nav{ margin-top:0; }

      Yes, masalah terselesaikan. Saya belum test untuk IE7 ke bawah atau Firefox versi lama. gak apa-apa, lagi pula populasi pengguna browser tersebut sedikit-demi sedikit sudah menurun.

      Kesimpulan

      Contoh kasus pembuatan dropdown menu di atas dapat anda kembangkan kembali sesuai dengan project yang sedang anda kerjakan, Seperti merubah padding atau merubah warnanya. Untuk setiap menu yang memiliki struktur HTML yang sama, anda masih bisa menggunakan style ini sampai kapanpun. Diakhir tutorial, saya juga menyertakan fix untuk browser lama seperti IE8. Solusi tersebut bisa dijadikan pegangan meskipun tidak semua browser lama dapat berperilaku seperti browser modern dengan sempurna.post by dennyhellmanda90.wordpress.com

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s