Kali ini Saya akan menjelaskan langkah demi langkah ihwal bagaimana sebuah elemen list sanggup menjadi sebuah sajian navigasi dan juga submenunya. Mungkin tidak begitu detail, tapi setidaknya ini semua cukup untuk membantu Anda mempermudah memodifikasi setiap tema drop down menu yang Anda dapatkan.
Pertama-tama, mungkin Anda merasa ingin tau ihwal bagaimana sanggup sebuah elemen list/daftar sanggup menjadi sajian navigasi bertingkat. bagaimana sanggup ketika sebuah sajian disentuh, beberapa sajian komplemen akan muncul di bawahnya??
Dasar: Membangun Daftar
Setiap sajian navigasi yang baik yakni berupa elemen <ul> yang dibungkus oleh elemen <nav>. Pertama-tama kita buat kerangka sajian sederhana menyerupai ini:
<nav id='nav'> <ul> <li><a href='#'>Beranda</a></li> <li><a href='#'>Profil</a></li> <li><a href='#'>Jurnal</a></li> <li><a href='#'>Komentar</a></li> </ul> </nav>Dari instruksi di atas sanggup Anda bayangkan bahwa sajian tersebut terdiri dari sajian Beranda, Profil, Jurnal dan Komentar. Elemen <a> yang mengelilingi setiap sajian yakni tautan yang dipakai untuk memilih ke mana/ke halaman mana sajian akan mengantarkan Anda ketika sajian tersebut diklik. (# mewakili URL halaman).
Hasil jadinya kira-kira menyerupai ini:
Menambahkan Submenu
Setelah itu kita sanggup menambahkan sub-sub daftar sebagai submenu yang nantinya akan menjadi drop down menu ketika sajian telah selesai dibuat. Caranya cukup dengan menyisipkan elemen <ul> gres ke dalam setiap elemen <li> yang ingin dilengkapi dengan submenu.
Penambahan submenu tidak ada batasan. Setiap elemen <li> sanggup disisipi oleh elemen <ul> baru, dan setiap elemen <li> yang berada di dalam setiap elemen <ul> gres juga sanggup disisipi dengan elemen <ul> yang gres lagi sebagai anak sajian level 3 dan seterusnya:
<nav id='nav'> <ul> <li><a href='#'>Beranda</a></li> <li><a href='#'>Profil</a> <ul> <li><a href='#'>Submenu 1</a></li> <li><a href='#'>Submenu 2</a></li> <li><a href='#'>Submenu 3</a></li> <li><a href='#'>Submenu 4</a></li> </ul> </li> <li><a href='#'>Jurnal</a></li> <li><a href='#'>Komentar</a></li> </ul> </nav><nav id='nav'> <ul> <li><a href='#'>Beranda</a></li> <li><a href='#'>Profil</a> <ul> <li><a href='#'>Submenu 1</a></li> <li><a href='#'>Submenu 2</a> <ul> <li><a href='#'>Submenu 2.1</a></li> <li><a href='#'>Submenu 2.2</a></li> <li><a href='#'>Submenu 2.3</a></li> <li><a href='#'>Submenu 2.4</a></li> </ul> </li> <li><a href='#'>Submenu 3</a></li> <li><a href='#'>Submenu 4</a></li> </ul> </li> <li><a href='#'>Jurnal</a></li> <li><a href='#'>Komentar</a></li> </ul> </nav>Beginilah kira-kira sehabis Saya menambahkan sub-sub sajian pada sajian Beranda, Profil, Jurnal dan Komentar. Khusus untuk sajian Komentar Saya telah menambahkan satu level lagi pada salah satu anak menu:
Metode Menampilkan dan Menghilangkan Submenu dengan CSS
Selanjutnya, kita hilangkan bawah umur sajian dengan CSS. Caranya cukup dengan menargetkan elemen <ul> yang merupakan anak elemen <li> utama saja, yaitu elemen yang tidak mempunyai induk selain elemen <ul> terdekat dari <nav>:
#nav li ul { display:none; }Kode di atas akan menghilangkan elemen <ul> yang berada di dalam elemen <li> yang berada di dalam elemen <nav id='nav'>
Setelah itu kita ingin biar elemen <ul> yang merupakan anak dari elemen <li> muncul ketika elemen <li> disentuh oleh pointer mouse. Ini sanggup kita lakukan dengan CSS Pseudo Classes :hover
/* Hilangkan semua elemen `<ul>` yang merupakan anak dari elemen `<li>` yang berada paling bersahabat dengan elemen `<nav id='nav'>` */ #nav li ul { display:none; } /* Saat pointer mouse berada di atas elemen `<li>`, ubah status elemen `<ul>` yang tadinya berupa `display:none` menjadi `display:block` */ #nav li:hover > ul { display:block; }Kode #nav li:hover ul {display:block} bahwasanya sanggup dipakai dan tampak lebih masuk akal, tapi ini yakni selektor yang tidak spesifik. Kode ini hanya efektif ketika diterapkan pada sajian yang hanya mempunyai satu level anak sajian saja.#nav li:hover > ul {display:block} lebih spesifik, alasannya selektor ini hanya akan mencari anak elemen <ul> yang merupakan anak pertamanya saja, sedangkan elemen <ul> yang merupakan anak dari anak level pertama tidak akan ikut mendapat deklarasi display:block.
Tahap Pemodelan
Bagi Anda, mungkin ini yakni bab yang cukup berat, yaitu ketika mencoba untuk mengubah elemen daftar menjadi sajian navigasi dengan orientasi horizontal. Tapi jangan khawatir. Pada dasarnya hanya ada beberapa bab pokok saja yang harus diperhatikan, sementara yang lainnya merupakan dekorasi tambahan:
Selektor #nav umumnya hanya dipakai untuk mendeklarasikan hal-hal global menyerupai jenis fon menu, warna latar belakang dan warna karakter secara keseluruhan:
#nav { font:normal normal 12px/normal Arial,Sans-Serif; }Selektor #nav li dipakai untuk mengatur penampilan elemen <li>. Di sini kita akan menghilangkan bulatan-bulatan yang berada di samping daftar dengan cara mendeklarasikan list-style:none dan juga mengatur orientasi daftar menjadi horizontal dengan mendeklarasikan float:left dan display:inline
#nav li { float:left; display:inline; list-style:none; /* Digunakan untuk memastikan biar anak elemen `<ul>` adikara akan memposisikan dirinya terhadap elemen ini, bukannya terhadap layar peramban */ position:relative; }Atur posisi anak elmen <ul> sebagai elemen adikara dengan mendeklarasikan position:absolute. Selain itu, atur juga ukuran lebarnya. Dan juga, untuk bawah umur elemen <li> yang ada di dalamnya harus berupa elemen blok, oleh alasannya itu kita harus menetralkan deklarasi float:left dan display:inline pada deklarasi yang sudah kita tuliskan sebelumnya:
#nav li ul { position:absolute; top:100%; left:0; z-index:10; width:120px; display:none; } #nav li li { float:none; display:block; } #nav li:hover > ul { display:block; }Dan beginilah kira-kira hasil akhirnya. Memang masih tampak berantakan, tapi kita sudah sanggup membuat sistemnya berfungsi!
Sentuhan Akhir
Pada dasarnya pekerjaan kita sudah berhasil hingga sejauh ini. Sisanya tinggal tahap penggantengan dan penambahan beberapa imbas yang umum. Misalnya, ketika menu-menu tersebut disentuh, kita ingin biar sajian tersebut berubah warna menjadi biru tua. Kita sanggup menerapkan selektor #nav a:hover {background-color:darkblue} untuk mengubah warna sajian menjadi biru renta ketika pointer mouse berada di atasnya:
#nav { background-color:black; color:white; font:normal normal 10px/normal Arial,Sans-Serif; text-transform:uppercase; } #nav ul { margin:0; padding:0; height:30px; } #nav li { /* Mengatur orientasi sajian menjadi horizontal */ margin:0; padding:0; float:left; display:inline; list-style:none; position:relative; } #nav a { display:block; /* Penting! */ padding:0 15px; line-height:30px; text-decoration:none; background-color:black; color:white; } #nav a:hover { background-color:darkblue; /* Warna sajian ketika pointer mouse berada di atasnya */ } #nav li ul { width:170px; height:auto; position:absolute; top:100%; left:0; z-index:10; display:none; /* Menyembunyikan submenu */ } #nav li li { display:block; /* Menetralkan `display:inline` */ float:none; /* Menetralkan `float:left` */ } #nav li:hover > ul { display:block; /* Menampilkan submenu yang disembunyikan */ } #nav li ul ul { left:100%; /* Menggeser anak sajian level 3 dan di atasnya ke sebelah paling kanan */ top:0; }Secara default, setiap elemen intinya mempunyai margin dan paddingnya sendiri-sendiri yang telah ditentukan oleh masing-masing CSS bawaan —User Agent Stylesheet— peramban. Oleh alasannya itu, kita seringkali harus menetralkan nilai margin dan padding bawaan dari peramban tersebut dengan menuliskannya di dalam selektor menyerupai ini:
#nav ul { margin:0; padding:0; } #nav li { margin:0; padding:0; }Tingkat Lanjut: jQuery untuk Menciptakan Efek
Hal pertama yang harus Anda perhatikan yakni bahwa ketika kita memakai JavaScript untuk membuat efek, seringkali/disarankan biar kita menghilangkan deklarasi yang berafiliasi degan :hover yang terkait pribadi kepada proses pemunculan/penghilangan submenu alasannya proses pemuculan elemen dengan CSS terlalu cepat dan sanggup mengganggu imbas animasi yang seharusnya sanggup ditampilkan dengan imbas yang lambat.
Sebelum menerapkan JavaScript (jQuery), kita buang terlebih dahulu selektor #nav li:hover > ul dari instruksi CSS. Tugas pemunculan dan penghilangan submenu akan digantikan oleh JavaScript:
#nav li:hover > ul { display:block; }jQuery
Kodenya sangat sederhana. Kita hanya akan menuliskan perintah bahwa ketika pointer mouse berada di atas elemen <li>, tampilkan submenu yang ada di dalamnya dengan imbas .slideDown():
$(function() { // Saat pointer mouse berada di atas menu... $('#nav li').hover(function() { // Tampilkan submenu dengan imbas `.slideDown()` $(this).children('ul').slideDown('fast'); }, function() { // Sembunyikan submenu dengan imbas `.slideUp()` ketika pointer mouse meninggalkannya $(this).children('ul').slideUp('fast'); }); });Unduh/Download Tema Menu Lengkap
Saya telah membuat paket drop down menu lengkap dimulai dari sajian horizontal, vertikal, drop down menu dengan submenu vertikal dan horizontal, sajian terbalik, sajian dengan imbas jQuery dan beberapa yang lain. Ini semua yakni tema dasar yang sudah Saya buat sesederhana mungkin biar gampang dimodifikasi.
Sumber https://www.dte.web.id/