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:
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');
});
});
9 Komentar
Aldy
wah, keren sob :D
Taufik Nurrohman
@Sadeva Aldy Pratama: Iya.. hehe...
Unknown
Mantap gan... Tetap Berkarya...
Unknown
Siip mas :-bd
Lah ada pertanyaan nie mas... :\
Diatas kan ada kode jQuery,,, itu kodenya taruh di mana ???
Aku belum mengerti tentang kode jQuery... **p
Kalau kode CSS si pasti di taruh di atas ]]></b:skin> atau </style>
Tapi kalau jQuery koh mas,,,
Mohon pencerehaannya... :)
Taufik Nurrohman
@trii waluyo Di dalam tag
<script>
, di atas tag</head>
Unknown
mas kalo misalnya saya ingin membuat 2 buah popup menu dalam satu halaman apa yg perlu ditambahkan lagi? karena saya sudah menggandakan html popnav nya, tapi ketika di klik popupnya gak mau muncul
Taufik Nurrohman
Jangan memakai ID. Pakai kelas:
Demo: http://jsfiddle.net/tovic/XHEyK/
Unknown
makasih mas atas respon nya, akan saya coba menggunakan kelas seperti di demo :)
DiNk
kalo yang kayak punya ente gimana kang?? yang kategori, entri populer, arsip blog, dll, gimana tu cara bikinnya?? keren banget, mo nyoba tak pasang di blogku. :-bd