Membuat Menu Navigasi Responsive dengan jQuery

Membuat Menu Navigasi Responsive dengan jQuery

Membuat Menu Navigasi Responsive dengan jQuery  ala mkr-site.blogspot.com ,  Menu ini yg saya sangat suka dari tutorial Kag MKR. karena elegan dan simple,, jika kalian ingin membuat nya langsung saja gan ikuti langkah di bawah ini :

Demo Navigasi Responsive

Struktur HTML

123456789101112131415161718<nav>
<a id="tombolmenu" href="#">Menu</a>
  <ul class="menu">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="#">Menu 5</a></li>
    <li><a href="#">Menu Dgn DropDown</a>
      <ul class="hidden">
        <li><a href="#">Menu Dropdown 1</a></li>
        <li><a href="#">Menu Dropdown 1</a></li>
        <li><a href="#">Menu Dropdown 1</a></li>
        <li><a href="#">Menu Dropdown 1</a></li>		
      </ul>
    </li>	
  </ul>
</nav>

Struktur html diatas merupakan struktur dasar dalam membuat menu navigasi dengan efek slideshow.
Tag a (baris 2) dengan id tombolmenu nantinya akan berfungsi sebagai tombol yang akan menampilkan menu pada saat layar lebih kecil.
Setiap tag ul diberikan class yang berbeda, pada tag ul yang pertama saya beri class menu (baris 3) sebagai penanda itu merupakan class untuk tag ul utama.
Sedangkan pada tag ul dengan class hidden (baris 10) sebagai backup jika JS tidak berungsi.

Style (CSS)

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879nav {
  font:normal normal 11px/30px Verdana,Geneva,sans-serif;
  background-color:#313131;
}

nav,
nav * {
  display:block;
}

nav #tombolmenu {
  display:none;
}

nav ul,
nav li {
  padding:0;
  margin:0;
  list-style:none;
}

nav ul {
  height:30px;
}

nav li {
  float:left;
  position:relative;
}

nav li a {
  display:block;
  padding:0 10px;
  color:white;
  text-decoration:none;
}

nav li:hover > a {
  background-color:#1D8FC5;
}

nav li ul {
  position:absolute;
  background-color:black;
  height:auto;
  width:160px;
  display:none;
}

nav li:hover ul.hidden {
  display:block;
}

nav li li {
  float:none;
}

@media only screen and (max-width:600px) {
  nav #tombolmenu {
    display:block;
    padding:0 15px;
    background-color:black;
    text-decoration:none;
  }
  nav #tombolmenu.active {
    background-color:#1D8FC5;
    color:white;
  }
  nav ul {
    height:auto;
    display:none;
  }
  nav li {
    float:none;
  }
  nav li ul {
    width:100%;
  }
}

Dari kode CSS ini, pada kondisi normal, tag a dengan class tombolmenu tidak ditampilkan, serta tag ul class menu tingginya diatur hanya 30px sedangkan dengan class hidden dibuat auto. Dan tag li dibuat float kekiri
Pada saat layar kurang dari 600px maka tag a dengan class tombolmenu ditampilkan. Dan juga tag ul class menu tingginya dibuat auto, serta tag li di hilangkan floatnya.

Javascript/jQuery

1234567891011121314151617181920212223242526272829(function () {
    $('nav ul').removeClass('hidden');
    $('nav li').hover(function () {
        $(this).parent('ul.menu').css('overflow', 'visible');
        $(this).children('ul').filter(':not(:animated)').slideDown();
    }, function () {       
        $(this).children('ul').slideUp();
    });

    $('#tombolmenu').toggle(function () {
        $(this).addClass('active');
        $('nav > ul').slideDown();
        return false;
    }, function () {
        $(this).removeClass('active');
        $('nav > ul').slideUp();
        return false;
    });
    function checkWidth() {
        if ($(window).width() > 600) {
            $('nav > ul').css('display', 'block');
        } else if ($(window).width() <= 600 && $('#tombolmenu').attr('class') === 'active') {
            $('nav > ul').css('display', 'block');
        } else if ($(window).width() <= 600 && $('#tombolmenu').attr('class') !== 'active') {
            $('nav > ul').css('display', 'none');
        }
    }
    $(window).resize(checkWidth);
})();

Pada baris kedua akan mencari tag ul dan menghapus class hidden agar slidedownnya dapat berfungsi.
Pada baris keempat ketika tag li disorot maka menu ul dengan class menu overflow cssnya dibuat visible, hal ini karena jika pada tombol menu dengan layar lebih kecil (600px) ditekan maka overflownya akan menjadi hidden sehingga jika tidak diberikan fungsi seperti itu maka ketika tag li dengan sub menu disorot menu yang ada dibawahnya tidak terlihat.
Pada baris ke-10 - 18 merupakan fungsi toggle untuk tombol menu.
Pada baris ke-19 - 27 fungsi untuk melihat ukuran mengetahui ukuran layar beserta perbandingan untuk membuat tag dengan class menu muncul atau tidak.
Pada baris 28 fungsi jQuery resize() yang akan menjalankan fungsi checkWidth pada baris 19 - 27 jika ukuran layar dirubah. (jQuery resize() ini akan berjalan jika terjadi perubahan ukuran layar).

Nah begitulah sedikit penjelasan bagaimana membuat menu responsive yang Ala Kang MKR.
Semoga dapat berguna bagi anda yang membaca.
Sukses Selalu bagi Anda

Sumber : http://mkr-site.blogspot.com/2013/03/membuat-menu-responsive-jquery-javascript.html