Cara Membuat Menu
Dropdown di css dan PHP
Postingan kali ini bayan mau berbagi sedikit pengetahuan tentang bagai
mana cara membuat menu drop-down di PHP dengan CSS
Menu drop-down ini biasanya di gunakan pada menu yang memiliki sub menu
biar terlihat lebih rapi pada menu tersebut, oke mari kita langsung ke
TKP aj.
Untuk struktur dasarnya kita menggunakan struktur XHTML seperti di bawah
ini :
Langkah 2
Selanjutnya kita beri sentuhan CSS untuk memper indah tampilannya :
#nav, #nav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
}
Keterangan kode CSS di atas aken menhilangkan identifikasi pada browser
dan akan menghilangkan tanda bulat pada #nav dan semua element yang ada
di dalamnya. Kode "position:relative;" digunakan untuk menyusun ulang
posisi menu yang akan ditempatkan secara relative dan absolute. Hal ini
nantinya digunakan untuk menata menumenu berikutnya yang akan disusun
sesuai dengan isi blok serta atribut-atribut lainnya.
Kode "line-height:1.5em;" digunakan untuk mendefinisikan tinggi setiap
item menu. Kita dapat mengesetnya sesuai dengan tinggi yang kita
inginkan, tetapi link teks akan berada pada posisi center secara
vertikal hal ini makanya kita tidak memerlukan pengesetan margin dan
padding pada kode CSS ini.
Langkah 3
Percantik menu dengan setting CSS lebih lanjut:
/* keadaan menu normal, aktif dan pernah diakses */
#nav a:link, #nav a:active, #nav a:visited {
display:block; /* link menu di blok */
padding:0px 5px; /* jarak atas bawah 0 dan kiri kanan 5 pixel */
border:1px solid #333; /* ketebalan garis pinggir dan warna garis */
color:#fff; /* warna teks */
text-decoration:none; /* menghilangkan garis bawah pada link menu */
background-color:#333; /* warna latar belakang menu */
}
/* keadaan menu saat dipilih */
#nav a:hover {
background-color:#fff; /* warna latar belakang menu */
color:#333; /* warna huruf */
}
Kode CSS diatas ini pelengkap dari kode CSS sebelumnya, hal ini untuk
membedakan efek pada menu yang sedang dipilih (hover) dengan menu yang
tidak dipilih. Pada saat keadaan menu normal, aktif, dan pernah diakses
maka menu memiliki tampilan yang sama.
Langkah 4
Menyempurnakan tampilan dengan kode CSS berikutnya:
#nav li {
float:left; /* menu ditempatkan pada sebelah kiri */
position:relative; / * posisi relatif */
}
Kode CSS diatas akan membuat menu tersusun secara horisontal
#nav ul {
position:absolute; /* posisi absolute */
width:12em; /* lebar menu */
top:1.5em; /* jarak menu bagian atas */
display:none; /* menu disembunyikan */
}
Kode CSS diatas digunakan untuk menyembunyikan menu berikutnya (menu
utama tetap tampil). Lebar masing-masing menu ditetapkan 12em
(width:12em;) hal ini agar menumemiliki ukuran tetap, jika kurang anda
bisa set lebih lebar lagi. Jarak 1.5em (top:1.5em;) harus sama dengan
jarak yang telah ditetapkan sebelumnya di kode CSS "line-height:1.5em;"
pada #nav (lihat langkah 2)
#nav li ul a {
width:12em;
float:left;
}
Kode CSS diatas digunakan untuk mengeset lebar link menu selebar 12em.
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:12em;
margin:0px 0 0 10px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li
li li li:hover ul{
display:block;
}
#nav ul ul dan #nav li ul ul digunakan untuk memperbaiki penempatan
menu. Hal ini sangat penting untuk memperbaiki posisi menu saat dipilih
(hover) dan susunan tingkatnya.
Untuk lebih mempercantik lagi dan memiliki efek yang lembut saat
menu-menu di tampilkan.
Langkah 5
Sekarang kita beri sentuhan jQuery dan mengkombinasikan dengan menu
dropdown yang kita buat tadi, tambahkan kode seperti berikut :
$(document).ready(function(){
$(" #nav ul ").css({display: "none"});
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display:
"none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
});
Fungsi dari masing-masing script jQuery:
$(" #nav ul ").css({display: "none"}); // Perbaikan di Opera
Kode diatas merupakan perbaikan untuk Opera yang tidak mampu
menyembunyikan menu dengan cepat. Pada saat kita menggeser mouse (hover)
pada sub menu, maka menu akan memiliki efek berkedip (flicker). $("
#nav ul ") script jQuery digunakan untuk memilih semua daftar yang tidak
berurutan (unordered lists - ul) didalam #nav dan kemudian mengesetnya
menjadi tidak ditampilkan (display:none).
$(" #nav li").hover(function(){ //memberikan efek saat menu dipilih
(hover)
},function(){ //memberikan efek saat pointer mouse meninggalkan menu
});
Kode diatas untuk memberikan efek pada menu sesuai dengan posisi pointer
mouse (hovering). Sederhananya memberikan efek pada saat menu dipilih
dan tidak dipilih.
$(this).find('ul:first').css({visibility: "visible",display:
"none"}).show(400);
Kode ini berfungsi untuk menampilkan sub menu pertama yang tersembunyi
dari menu yang sedang dipilih. Sedangkan script .show digunakan untuk
menampilkan menu dengan durasi waktu yang ditentukan didalam kurung
(400). Hal ini akan memberikan efek menampilkan menu yang sangat lembut.
$(this).find('ul:first').css({visibility: "hidden"});
Kode ini berfungsi mengembalikan posisi menu kembali tersembunyi melalui
blok mode pada akhir animasinya. Menggunakan kode visibility untuk
mencegah berkedip (flicker) pada animasi menu.
Tidak ada komentar:
Posting Komentar