Membuat Menu Sliding Bootstrap Untuk Mobile

Membuat Menu Sliding Bootstrap Untuk Mobile
Sumber : root93

ROOT93 - Secara default menu boostrap ketika dalam ukuran resolusi layar tertentu akan disembunyikan didalam colapse atau toogle menu dan menu toogle ini akan muncul secara vertikal atau dari atas kebawah ketika di klik.

Bila kita misalnya ingin memunculkan menu tersebut secara horizontal didalam toogle atau memberikan efek sliding dari kiri ke kanan ketika menu toogle di klik, maka kita perlu memberikan sedikit modifikasi didalam menu navigasi bootstrap.

Berikut ini contohnya :

#1 HTML

<body>
<div class="row">
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
<!--Trigger didalam toogle colapse -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="slide-collapse" data-target="#slide-navbar-collapse" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="beranda"><i class="fa fa-home fa-fw"></i> <?php echo "$row[nama_sekolah]";?></a>
    </div>
<!--Memanggil id collapse colapse -->
    <div class="collapse navbar-collapse" id="slide-navbar-collapse">
      <ul class="nav navbar-nav">
       </ul>
           <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="beranda">Beranda <span class="sr-only">(current)</span></a></li>
        <li><a href="pengumuman-kelulusan"><i class="fa fa-microphone fa-fw"></i>Pengumuman</a></li>
        <li><a href="daftar"><i class="fa fa-edit fa-fw"></i>Daftar</a></li>
         <li><a href="faq"><i class="fa fa-question fa-fw"></i>FAQ</a></li>
         <li><a href="sudah-daftar"><i class="fa fa-user fa-fw"></i>Data Pendaftar</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i class="fa fa-print fa-fw"></i>Print<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="bukti-pendaftaran">Bukti Pendaftaran</a></li>
            <li><a href="kartu-peserta">Kartu Peserta</a></li>
            
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
 <div class="menu-overlay"></div>

#2 CSS

@media (max-width: 767px) {
  #slide-navbar-collapse {
    position: fixed;
    top: 20px;
    left: 5px;
    z-index: 999;
    width: 250px;
    height: 100%;
    background-color: #c33e38;
    overflow: auto;
  }
  .menu-overlay {
    display: none;
    background-color: #000;
    bottom: 0;
    left: 0;
    opacity: 0.5;
    filter: alpha(opacity=50);
    /* IE7 & 8 */
    position: fixed;
    right: 0;
    top: 0;
    z-index: 49;
  }
}

#3 JS

$('[data-toggle="slide-collapse"]').on('click', function() {
  $navMenuCont = $($(this).data('target'));
  $navMenuCont.animate({
    'width': 'toggle'
  }, 350);
  $(".menu-overlay").fadeIn(500);

});
$(".menu-overlay").click(function(event) {
  $(".navbar-toggle").trigger("click");
  $(".menu-overlay").fadeOut(500);
});

Refrensi code :
https://bootsnipp.com/snippets/featured/fancy-sidebar-navigation
https://bootsnipp.com/snippets/50zVX
https://bootsnipp.com/snippets/E1rAy

(Ahmad Zaelani / r93)

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple

Membuat Menu Sliding Bootstrap Untuk Mobile

0 Response to "Membuat Menu Sliding Bootstrap Untuk Mobile"

Post a Comment