Mungkin Anda pernah melihat beberapa sajian navigasi yang biasanya terletak di sebelah kanan bawah artikel. Saat sajian tersebut diklik, sebaris label/tautan akan muncul ke atas dan bukannya ke bawah menyerupai menu-menu pada umumnya. Saya menciptakan konsep sederhananya di sini. Karena konsepnya sangat mudah, yaitu hanya berada di sekitar fungsi .slideUp(), .slideToggle(), .removeClass() dan .toggleClass(), kali ini Saya cukup menjelaskan cara kerjanya pada script secara langsung:
HTML
<nav id='popnav'>Label <ul class='fallback'> <li><a href='#'>JavaScript</a></li> <li><a href='#'>jQuery</a></li> <li><a href='#'>CSS</a></li> <li><a href='#'>HTML</a></li> <li><a href='#'>PHP</a></li> </ul> </nav>CSS
#popnav { width:60px; margin:10px 0; background-color:#362C23; padding:7px 15px; font:normal normal 11px Arial,Sans-Serif; text-transform:uppercase; color:#A1917B; position:relative; cursor:pointer; } #popnav:after { content:""; width:0; height:0; border:5px solid transparent; border-bottom-color:white; position:absolute; top:6px; right:12px; } /* Kelas 'down' akan diciptakan oleh jQuery */ #popnav.down:after { border:5px solid transparent; border-top-color:white; top:13px; } #popnav ul { border-top:2px solid #2D6D67; width:170px; background-color:#201A16; position:absolute; bottom:100%; left:0; z-index:999; margin:0 0; padding:0 0; display:none; } #popnav li { list-style:none; margin:0 0; padding:0 0; } #popnav li a { padding:10px 15px; display:block; text-decoration:none; color:#ccc; font-weight:bold; font-size:11px; } #popnav li a:hover { background-color:#439A91; color:white; } /* Fallback jikalau JavaScript dinonaktifkan */ #popnav:hover ul.fallback {display:block}jQuery
$(function() { // Hilangkan class 'fallback' pada elemen <ul> // untuk menonaktifkan deklarasi fallback pada selektor CSS '#popnav:hover ul.fallback' // Proses pembukaan dan penutupan sajian akan digantikan oleh jQuery $('#popnav ul').removeClass('fallback'); // Saat #popnav diklik... $('#popnav').click(function(e) { // Tambahkan/hilangkan kelas `down` (toggle). Ini dipakai untuk // mengubah simbol panah atas menjadi panah bawah atau sebaliknya $(this).toggleClass('down'); // Tampilkan/sembunyikan elemen <ul> yang berada di dalamnya dengan dampak .slideToggle() $('ul', this).slideToggle(); // Cegah `event bubbling` // Secara normal, ketika kita mengeklik sembarang pada menu, // itu akan menciptakan peramban kesulitan untuk menentukan... // ... apakah kita sedang mengeklik sajian ataukah sedang mengeklik dokumen // Dalam perkara ini, `event.stopPropagation()` akan memberitahu peramban... // ... bahwa yang kita klik yaitu menu, bukan dokumen secara keseluruhan e.stopPropagation(); }); // Saat dokumen diklik (katakanlah: ketika sesuatu selain #popnav diklik) ... $(document).click(function() { // Hilangkan sajian yang tampak dengan dampak `.slideUp()` $('#popnav ul:visible').slideUp(); // Hilangkan juga kelas `down` pada #popnav untuk mengembalikan panah bawah menuju ke atas $('#popnav').removeClass('down'); }); });