Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

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:

jQuery Pop Up Label

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');
    });
});

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 9 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!