Suatu menu dropdown biasanya disediakan ketika website terdiri dari banyak menu halaman. Keuntungan dari penggunaan menu dropdown ini adalah desain halaman menjadi lebih menarik serta meningkatkan kemudahan pengguna untuk menjelajahi web site. Kebanyakan, menu dropdown disusun dengan menggunakan Javascript, namun kita dapat mencapai hasil yang hampir sama secara lebih mudah dengan menggunakan CSS. Dalam artikel ini akan dijelaskan secara detail cara membuat menu drop down dengan menggunakan CSS.

Membuat Struktur HTML

Susunan menu atau navigasi di dalam suatu web site dapat digambarkan sebagai sistem folder di dalam sistem operasi. Sehingga tag HTML yang paling sesuai untuk membentuk sistem menu adalah list. Dan karena suatu menu didalam web site bukanlah suatu list yang ditentukan urutannya, maka dari tag HTML list yang paling sesuai adalah unordered list (<ul>).

Misalkan kita mempunyai struktur menu sebagai berikut :

Dari struktur menu tersebut dapat kita susun dalam struktur html berikut ini

<div id="menu">
  <ul>
    <li><a href="/" title="Home">Home</a></li>
    <li><a href="/" title="About">About</a>
      <ul>
        <li><a href="/" title="The Company">The Company</a>
          <ul>
            <li><a href="/" title="History">History</a></li>
            <li><a href="/" title="Mission">Mission</a></li>
          </ul>
        </li>
        <li><a href="/" title="Working Process">Working Process</a></li>
        <li><a href="/" title="Work Planners">Work Planners</a></li>
        <li><a href="/" title="Testimonials">Testimonials</a></li>
      </ul>
    </li>
    <li><a href="/" title="Services">Services</a>
      <ul>
        <li><a href="/" title="Web Design and Development">Web Design and Development</a></li>
        <li><a href="/" title="Logo Design">Logo Design</a></li>
        <li><a href="/" title="Print Design">Print Design</a></li>
      </ul>
    </li>
    <li><a href="/" title="Portfolio">Portfolio</a>
      <ul>
        <li><a href="/" title="Website Design">Website Design</a></li>
        <li><a href="/" title="Corporate Identity">Corporate Identity</a></li>
      </ul>
    </li>
    <li><a href="/" title="Contact">Contact</a></li>
  </ul>
</div>

Membuat Desain Menu

Disini kita tidak akan menjelaskan bagaimana cara membuat desain menu, yang dalam hal ini dibuat dengan Photoshop. Namun yang jelas desain menu yang akan kita buat pada tutorial ini terlihat sebagai berikut :

Nah semua persiapan telah dilakukan, saatnya kita masuk pada inti dari tutorial ini yaitu menyusun kode CSS untuk membentuk menu

Menyusun kode CSS

Untuk mempermudah dalam menjelaskan kode CSS yang menyusun menu dropdown ini, kita akan membaginya menjadi 2 tahap yaitu menyusun styles menu utama dan menyusun styles sub menu. Namun sebelum kita memasuki tahap-tahap ini, disini untuk mempermudah penyusunan kode CSS kita lakukan pembersihan terhadap default styles dari browser.

Clearing Browser Default Styles

Secara umum pembersihan default styles dari browser dilakukan untuk mempermudah penyusunan kode CSS. Pada tutorial ini kode yang digunakan untuk pembersihan hanya terbatas untuk memenuhi kebutuhan dari penyusunan menu dropdown. Apabila anda tertarik dengan hal ini, maka satu yang disediakan oleh Yahoo (YUI) adalah contoh yang cukup bagus. Berikut kode CSS yang digunakan dalam rangka pembersihan default styles dari browser :

body, ul, li {
  margin: 0;
  padding:0;
}
ul {
  list-style: none;
}
/* Set font */
body {
  font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
}

Pada bagian pertama dari kode CSS diatas, kita menghilangkan attribute padding dan margin pada element body, ul dan li. Kemudian dilanjutkan dengan menghilangkan style dari list pada element ul. Terakhir kita mengatur jenis font pada element body, yang kemudian akan diturunkan pada semua element yang menjadi keturunannya.

Selain itu, kita juga akan menyediakan suatu CSS class yang dinamakan clearfix. Class ini berfungsi untuk menyelesaikan masalah float, yang kita gunakan untuk menyusun susun horisontal. Hal ini akan menjadi jelas ketika kita menyusun kode CSS. Berikut kode CSS untuk class clearfix ini :

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.clearfix {
  display: inline-table;
}
/* Hide for IE-Mac \*/
* html .clearfix {
  height: 1%;
}
.clearfix {
  display: block;
}
/* End hide for IE-Mac */

Class clearfix ini adalah salah satu metode yang cukup efektif untuk menyelesaikan masalah float. Disini kita tidak akan menjelaskan bagaimana class ini bekerja, namun jika anda tertarik untuk mempelajari lebih detail dapat dilihat pada Position Is Everything – Easy clearing.

Mengatur Style Menu Utama

Yang pertama kali kita lakukan untuk mengatur style menu utama adalah memberikan background serta menentukan font dan padding pada kontainer dari menu, berikut ini :

#menu {
  background: transparent url(bg-menu.gif) repeat-x;
  font-size: 12px;
}
#menu>ul {
  padding-left: 10px;
}

Saya memutuskan untuk menentukan font-size pada bagian kontainer (ul) karena pertimbangan bahwa menu ini akan menggunakan ukuran font yang sama serta kenyataan bahwa menu akan menggunakan ukuran static (px) sehingga kita tidak perlu mengkhawatirkan adanya pengaruh ukuran font terhadap ukuran menu. Pada bagian kedua, kita menggunakan selector child yang akan menyamakan element ul yang secara langsung menjadi turunan/anak dari element #menu.

Kemudian proses dilanjutkan dengan menyusun menu utama agar terlihat horisontal, berikut kode css-nya :

#menu>ul>li {
  display: inline;
  float: left;
  line-height: 40px;
}

Salah satu attribute CSS yang dapat digunakan untuk menyusun elemen HTML secara horisontal adalah float. Attribute float akan memaksakan suatu elemen untuk mengisi ruang kosong disebelah kanan maupun kiri (tergantung nilai yang diberikan pada attribute ini) dari elemen tersebut. Dengan sifatnya tersebut, membuat element disekitar "flaoted element" ikut terpengaruh sehingga akan sulit dikontrol. Ada beberapa metode yang dapat digunakan untuk menyelesaikan masalah float ini, namun satu yang paling efektif dalah dengan menggunakan class clearfix yang telah kita buat sebelumnya. Untuk dapat menggunakannya, kita tambahkan didalam elemen kontainer, sebagai berikut:

<ul class="clearfix">

Yang perlu dilakukan selanjutnya adalah merubah attribute position dari setiap elemen li menjadi relative, sebagai berikut :

#menu>ul li {
  position: relative;
}

Hal ini sangat diperlukan terutama ketika akan memposisikan sub menu.

Selanjutnya kita tambahkan sedikit ruang diantara menu utama agar dapat menambah jangkuan klik terhadap link.

#menu>ul>li a {
  padding: 5px 25px;
}

Terakhir kita atur style dari anchor/link.

#menu a {
  color: #ffffff;
  text-decoration: none;
}
#menu>ul>li>a:hover {
  color: #99ccff;
}

Sampai disini kita telah menyelesaikan penyusunan untuk menu utama. Hasil sementara dari menu ini dapat dilihat disini.

Pada artikel selanjutnya kita akan mengatur style untuk sub menu.