Iznyn Blog - Your Web Design Solution

Mengatur style untuk Sub Menu

Setelah pada bagian pertama kita mengatur style untuk menu utama, maka kali ini kita akan mengatur style untuk sub menu.

Sesuai dengan desain yang telah kita buat sebelumnya, sub menu hanya akan nampak ketika mouse berada diatas daerah menu utama. Kita dapat melakukannya dengan menyembunyikan sub menu pada kondisi normal dan baru akan memunculkannya ketika mouse berada diatas menu utama. Namun untuk keperluan desain, maka pengaturan tersebut akan diberikan pada bagian paling akhir karena kita membutuhkan memunculkan bagian sub menu untuk mengatur tampilannya.

Pertama kita atur style untuk element kontainer dari setiap sub menu, termasuk background color, padding dan width, berikut ini :

#menu>ul>li ul {
  background-color: #99ccff; 
  width: 140px; 
  padding: 10px 10px 20px 10px;
}

Berikutnya adalah memposisikan sub menu relatif terhadap menu induknya.

#menu>ul>li ul {position: absolute; left:23px;}

Secara default apabila kita memposisikan suatu elemen secara absolute, maka elemen tersebut akan diposisikan relatif terhadap elemen terdekatnya yang telah keluar dari aliran normal dokumen. Untuk kasus diatas, kita harus membuat elemen kontainer dari menu utama agar keluar dari aliran normal dokumen, dalam hal ini menggunakan relative positioning. Untuk lebih jelas tentang masalah ini dapat dilihat pada artikel saya, Absolute Positioning dan Relative Positioning.

Kode CSS tersebut hanya berlaku untuk sub menu yang langsung berada dibawah menu utama, sedangkan untuk sub menu dari suatu sub menu tidak akan terpenuhi. Hal ini disebabkan oleh posisi dari sub menu tersebut yang berbeda, untuk sub menu dari menu utama akan diposisikan dibawah dari menu utama, sedangkan untuk sub menu dari sub menu akan diposisikan di samping sub menu induknya. Agar dapat menyelesaikan masalah ini dengan memposisikan ulang sub menu dari sub menu, sebagai berikut :

#menu>ul>li ul ul {
  left: 140px; 
  top: 0;
}

Selanjutnya kita akan mengatur style untuk link sub menu. Link akan diatur agar ketika mouse berada diatasnya, warna background berubah. Perlu dicatat juga bahwa link ini akan mempunyai luasan yang cukup lebar sedangkan dengan perilaku default dari elemen anchor, yaitu sebagai inline element, hal ini tidak mungkin dapat terpenuhi. Suatu inline element, seperti a, em, strong dan code tidak akan terpengaruh oleh attribute CSS yang berusaha untuk memperluas elemen tersebut secara vertikal, seperti padding-top, padding-bottom, margin-top dan margin-bottom. Kebalikan dari inline-level element adalah block-level element. Pada suatu block-level element, seperti p, ul dan pre kita dapat memperluas elemen tersebut baik secara vertikal maupun horisontal. Untuk lebih memahami tentang masalah dapat dilihat pada Wikipedia - HTML Element

Dengan menggunakan CSS kita dapat merubah sifat dasar suatu elemen HTML, baik dari Block ke Inline maupun sebaliknya dengan menggunakan attribute display. Kembali ke link yang akan kita susun, setelah merubah elemen anchor dari level inline ke block, kita dapat memperluas elemen link dengan menggunakan attribute padding, sebagai berikut :

#menu>ul>li ul a {
  display: block;
  padding: 12px 0 12px 4px;
  line-height: 16px;
  border-bottom: 1px solid #6699cc;
}
#menu>ul>li ul a:hover {
  background-color: #6699cc;
}

Disini kita juga memberikan attibute line-height untuk mengurangi efek dari attribute yang sama, yang kita deklerasikan sebelumnya. Selain itu kita juga memberikan border di bagian bawah dari setiap sub-menu untuk memisahkan setiap menu.

Pekerjaan hampir selesai, yang tersisa adalah mengatur perilaku dari sub-menu. Seperti telah dijelaskan sebelumnya bahwa sub-menu hanya akan nampak ketika mouse ada diatas menu induknya. Untuk menyelesaikannya, pertama kita sembunyikan terlebih dahulu ketika dalam kondisi normal.

#menu>ul>li ul {
  display: none;
}

Berikutnya kita tampilkan sub-menu ketika mouse ada diatas menu induknya.

#menu li:hover>ul {
  display: block;
}

Nah, semua perkejaan kini telah selesai. Untuk dapat melihat hasil akhir dari menu drop-down dapat dilihat disini.

Apabila ingin mendapatkan semua file yang diperlukan dalam tutorial ini dapat diunduh disini.

Walaupun menu drop-down telah selesai disusun, namun tutorial ini tidak berhenti disini. Pada bagian selanjutnya akan dijelaskan tentang masalah-masalah yang timbul dari menu drop-down ini dan bagaimana menyelesaikannya.