Menu merupakan hal yang wajib ada pada website/blog untuk dapat mempermudah pembaca dalam mendapatkan artikel mereka inginkan. Baik itu diisikan dengan sebuah link yang hanya menuju ke satu artikel ataupun menuju kategori tertentu. Menu ada yang diletakkan dibagian atas atau bawah artikel serta ada juga di sidebar.

Seiring dengan perkembangan teknologi dan dengan bermunculannya smartphone/tablet dengan ukuran layar yang berbeda-beda. Mau tidak mau banyak dari blogger mulai memikirkan untuk membuat blognya menjadi responsive (dapat menyesuaikan dengan layar). Salah satu bagian yang perlu dibuat responsive tidak lain yaitu pada menu.

Sebenarnya diluar sana banyak script untuk mempermudah dalam pembuatan menu yang responsive. Ada dengan metode merubahnya menjadi tag select, merubah menu menjadi tulisan more dan masih banyak lagi. Sedangkan menu yang saya buat ini menggunakan jQuery sehingga setidaknya jQuery library harus sudah ada terpasang agar dapat berfungsi.

Pada template yang saya buat sebelumnya saya sering menggunakan jQuery clone() ataupun script dari SelectNav untuk membuat menu responsivenya. Hal itu karena saya masih kurang mengerti tetang jQuery. Berbeda pada template, saya membuatnya dengan memanfaatkan jQuery resize() yang digabungkan dengan fungsi if untuk mengetahui ukuran layar. Sehingga efeknya slidenya juga masih berfungsi serta tidak membuat dua struktur html seperti ketika menggunakan jQuery clone()

Nah kali ini saya akan menjelaskan bagaimana membuat menu navigasi dengan jguery dengan efek slidedown.

Struktur HTML

<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)

nav {
  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

(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 saya ketahui.
Semoga dapat berguna bagi anda yang membaca.
Sukses Selalu bagi Anda
Satank Mkr