1 Cara Membuat menu drop down di PHP dengan CSS

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 :

<ul id="nav">
<li><a href="#">Beranda</a></li>
<li><a href="#">Kontak</a></li>
<li><a href="#">Arsip</a>
<ul>
<li><a href="#">jQuery</a>
<ul>
<li><a href="#">Download</a></li>
<li><a href="#">Tutorial</a></li>
</ul>
</li>
<li><a href="#">Bloghack</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</li>
</ul>

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.

Untuk hasilnya kurang lebih seperti gambar di bawah ini :

Sekian cara membuat menu drop-down di PHP dengan CSS, semoga bermanfaat amien.

Komentar →