jQuery Pull Out Menu

Mungkin Anda pernah melihat beberapa menu navigasi yang biasanya terletak di sebelah kanan bawah artikel. Saat menu tersebut diklik, sebaris label/tautan akan muncul ke atas dan bukannya ke bawah seperti menu-menu pada umumnya. Saya membuat 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:

Lihat Demo

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 jika 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 menu akan digantikan oleh jQuery
    $('#popnav ul').removeClass('fallback');

    // Saat #popnav diklik...
    $('#popnav').click(function(e) {

        // Tambahkan/hilangkan kelas `down` (toggle). Ini digunakan untuk
        // mengubah simbol panah atas menjadi panah bawah atau sebaliknya
        $(this).toggleClass('down');
        // Tampilkan/sembunyikan elemen <ul> yang berada di dalamnya dengan efek .slideToggle()
        $('ul', this).slideToggle();

        // Cegah `event bubbling`
        // Secara normal, saat kita mengeklik sembarang pada menu,
        // itu akan membuat peramban kesulitan untuk menentukan...
        // ... apakah kita sedang mengeklik menu ataukah sedang mengeklik dokumen
        // Dalam kasus ini, `event.stopPropagation()` akan memberitahu peramban...
        // ... bahwa yang kita klik adalah menu, bukan dokumen secara keseluruhan
        e.stopPropagation();
    });

    // Saat dokumen diklik (katakanlah: saat sesuatu selain #popnav diklik) ...
    $(document).click(function() {

        // Hilangkan menu yang tampak dengan efek `.slideUp()`
        $('#popnav ul:visible').slideUp();

        // Hilangkan juga kelas `down` pada #popnav untuk mengembalikan panah bawah menuju ke atas
        $('#popnav').removeClass('down');
    });
});