Membuat Menu Sliding Bootstrap Untuk Mobile


Membuat Menu Sliding Bootstrap Untuk Mobile root93
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)


Related Posts :

0 Response to "Membuat Menu Sliding Bootstrap Untuk Mobile"

Post a Comment

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...