jQuery Pull Out Menu

Tabel Konten
  1. HTML 
  2. CSS 
  3. jQuery 

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

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:

      <nav class='popnav'> ... </nav>
      .popnav {
      display:inline-block;
      width:60px;
      margin:10px 0;
      background:#362C23;
      padding:7px 15px;
      font: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:#fff;
      position:absolute;
      top:6px;
      right:12px;
      }
      /* Kelas 'down' akan diciptakan oleh JQuery */
      .popnav.down:after {
      border:5px solid transparent;
      border-top-color:#fff;
      top:13px;
      }
      .popnav ul {
      border-top:2px solid #2D6D67;
      width:170px;
      background:#201A16;
      position:absolute;
      bottom:100%;
      left:0;
      margin:0 0;
      padding:0 0;
      z-index:999;
      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:#439A91;
      color:#fff;
      }
      /* Fallback jika JavaScript dinonaktifkan */
      .popnav:hover ul.fallback {display:block}
      $(function() {
      $('.popnav ul').removeClass('fallback');
      $('.popnav').click(function(e) {
      $(this).toggleClass('down');
      $('ul', this).slideToggle();
      e.stopPropagation();
      });
      $(document).click(function() {
      $('.popnav ul:visible').slideUp();
      $('.popnav').removeClass('down');
      });
      });

      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

Komentar telah ditutup.