Menu Dropdown adalah menu berupa daftar urutan dari short-cut baik internal maupun internal. Menu ini biasanya ditampilkan di bagian atas atasu samping dari suatu situs. Menu yang ditampilkan secara dropdown biasanya memanfaatkan sebuah even dari mouse berupa klik ataupun hover. Fungsi dropdown menu ini adalah untuk mengurangi accses-page pada halaman tertentu sehingga mempermudah pengguna untuk menuju suatau halaman.
Sebagai contoh apabila Anda menggunakan Drupal 6 untuk mengakses menu konfigurasi tema/modul paling tidak Anda memerlukan 3 kali klik untuk menuju halaman tersebut. Tentunya hal ini sangat mengganggu kenyamanan, untungnya di Drupal 7sudah ada modul inti yang bisa memperpendek akses tersebut.
Secara default tema-tema bawaan Drupal tidak memiliki fungsi dropdown menu. Namun Drupal memiliki banyak modul tambahan yang mengfungsikan menu standar agar bisa tampil secara DROPDOWN. Beberapa modul yang banyak digunakan diantaranya adalah Superfish, Nice menu, Admin menu dll.
Ada juga beberapa Tema yang sudah memiliki built-in dropdown menu sehingga tidak memerlukan modul tambahan diatas, diantaranya tema Acquia marina, Danland, Blogbuzz dll. Namun ada beberapa tema tambahan terutama tema standar Drupal yang tidak memiliki fungsi dropdown menu ini, apalagi jika Anda penggemar berat tema-tema framework seperti Zen, Omega, Adaptive themes dipastikan Anda harus membuat fungsi sendiri untuk membuat dopdown menu ini.
Untungnya Tema-tema Drupal secara umum sudah dirancang untuk bisa dikembangkan secara maksimal tergantung kemampuan penggunanya, dan ternyata cara yang paling mudah menambahkan menu dropdown adalah dengan memanfaatkan fungsi-fungsi CSS yang sudah menjadi standar theming pada pembuatan tema Drupal. Menu berbasis CSS ini selain mudah diaplikasikan juga ringan (karena tidak menggunakan modul tambahan). Kode menu CSS cukup banyak tersebar di dunia maya dan banyak yang gratis terutama yang membahas web design dan web development.
Perhatikan contoh kode CSS menu ini:
#menu-bar {margin: 0px 0px 0px 0px; padding: 6px 6px 0px 6px; height: 34px; line-height: 100%; border-radius: 11px; -webkit-border-radius: 11px; -moz-border-radius: 11px; box-shadow: 2px 2px 3px #666666; -webkit-box-shadow: 2px 2px 3px #666666; -moz-box-shadow: 2px 2px 3px #666666; background: #8B8B8B; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#A9A9A9, endColorstr=#7A7A7A); background: -webkit-gradient(linear, left top, left bottom, from(#A9A9A9), to(#7A7A7A)); background: -moz-linear-gradient(top, #A9A9A9, #7A7A7A); border: solid 1px #6D6D6D; }
#menu-bar li { margin: 0px 6px 0px 6px; padding: 0px 0px 6px 0px; float: left; position: relative; list-style: none; }
#menu-bar a { font-weight: bold; font-family: arial; font-style: normal; font-size: 12px; color: #E7E5E5; text-decoration: none; display: block; padding: 8px 20px 8px 20px; margin: 0; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; text-shadow: 2px 2px 3px #000000; }
#menu-bar .current a, #menu-bar li:hover > a { background: #0399D4; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EBEBEB, endColorstr=#A1A1A1); background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1)); background: -moz-linear-gradient(top, #EBEBEB, #A1A1A1); color: #444444; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2); box-shadow: 0 1px 1px rgba(0, 0, 0, .2); text-shadow: 2px 2px 3px #FFFFFF; }
#menu-bar ul li:hover a, #menu-bar li:hover li a { background: none; border: none; color: #666; -box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; }
#menu-bar ul a:hover { background: #0399D4 !important; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#04ACEC, endColorstr=#0186BA); background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) !important; background: -moz-linear-gradient(top, #04ACEC, #0186BA) !important; color: #FFFFFF !important; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; text-shadow: 2px 2px 3px #FFFFFF; }
#menu-bar ul { background: #DDDDDD; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#CFCFCF); background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF)); background: -moz-linear-gradient(top, #FFFFFF, #CFCFCF); display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 30px; left: 0; border: solid 1px #B4B4B4; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-box-shadow: 2px 2px 3px #222222; -moz-box-shadow: 2px 2px 3px #222222; box-shadow: 2px 2px 3px #222222; }
#menu-bar li:hover > ul { display: block; }
#menu-bar ul li { float: none; margin: 0; padding: 0; }
#menu-bar ul a { padding:10px 0px 10px 15px; color:#424242 !important; font-size:12px; font-style:normal; font-family:arial; font-weight: normal; text-shadow: 2px 2px 3px #FFFFFF; }
#menu-bar ul li:first-child > a { border-top-left-radius: 10px; -webkit-border-top-left-radius: 10px; -moz-border-radius-topleft: 10px; border-top-right-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topright: 10px; }
#menu-bar ul li:last-child > a { border-bottom-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-bottomright: 10px; }
#menu-bar:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
#menu-bar { display: inline-block; } html[xmlns] #menu-bar { display: block; }
* html #menu-bar { height: 1%; }
Tidak usah pusing-pusing membuatnya, kode diatas tinggal copy-paste dari
situs ini.
Perhatikan kode CSS diatas terutama pada awal kode yang dimulai dengan #menu-bar, nama menu-bar merupakan nama ID dari layer tempat menampilkan menu, kalau bahasa Drupal-nya layer #menu-bar mewakili nama ID dari region tema yang kita miliki. Jadi untuk mengaktifkan kode CSS dropdown menu diatas anda cukup mengganti #menu-bar dengan #preface-first (nama ini contoh saja), dan simpan di file CSS tema Anda biasanya file style.css namun sangat disarankan Anda membuat file CSS terpisah misalkan custom.css yang ditambahkan ke file CSS tema utama Anda.
BAnyak situs-situs pembuat menu CSS secara gratis diantaranya
Semoga bermanfaat.
#menu-bar .current a, #menu-bar li:hover
EmoticonEmoticon