Artikel ini menjelaskan bagaimana cara membuat menu navigasi yang responsive menggunakan javascript/jquery dengan efek slidedown. Menu responsive ini sangat cocok bagi website/blog yang responsive sehingga menunya juga menyesuaikan dengan ukuran layar dari browser yang digunakan sehingga mempermudah dalam navigasi pada smartphone/tablet

Membuat Menu Navigasi Responsive dengan jQuery - MKR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Artikel ini menjelaskan bagaimana cara membuat menu navigasi yang responsive menggunakan javascript/jquery dengan efek slidedown. Menu responsive ini sangat cocok bagi website/blog yang responsive sehingga menunya juga menyesuaikan dengan ukuran layar dari browser yang digunakan sehingga mempermudah dalam navigasi pada smartphone/tablet

Membuat Menu Navigasi Responsive dengan jQuery

Membuat Menu Navigasi Responsive dengan jQuery

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 MyTimeLine, 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 Beri Komentar
Bagikan kepada teman!
Garis

30 comments:

  1. Q: Can you send to me MKR-Labs template at: emad(at)arabiclabs(dot)com

    BalasHapus
  2. Trima kasih sdh berbagi ilmu lagi mas... mas kira" kalau mau belajar ilmu template secara otodidak bisa ngga yaa ?? via googling , atau nongkrongin mkr-site ini tiap hari misalnya...?? tanpa sekolah atau kursus ?? kira" berapa lama bs levelnya sampai kayak adminnya mkr ini ?? hehehehe" peace ach :d :-d =p~ x-)

    BalasHapus
    Balasan
    1. Saya sendiri juga otodidak...
      kalau sya sih kalau tdak salah 1 semester... :d
      dilihat dari pertama kali saya publish template buatan saya di ivythemes
      dan saya sendiri masih banyak kekurangan..
      kalau mau belajar lebih baik di blognya mas taufik..
      http://www.dte.web.id lebih lengkap artikelnya dan juga dia lebih hebat.. (o)



      Hapus
  3. BAgus mas , (h)
    Lihat Dari Tools ini :
    Responsive Tools
    http://bloggeritems.com/tools/smart-responsive-tester-for-web-designers

    makasih mas ,
    dapat ilmu baru lagi ,:)

    BalasHapus
    Balasan
    1. ada juga yang lainya ,
      disni : http://www.marks-mbs.blogspot.com/2013/03/navigataur-responsive-css-menu.html

      :)

      Hapus
    2. wah yang punya blog itu : (http://www.marks-mbs.blogspot.com)
      tdk menghargai kerja keras orang..
      masa pake template MyExtraNews tp menghapus kredit linknya.. :-t
      salut dapat menghapusnya..
      untuk template selanjutnya yg sy buat akan lebih sulit untuk dihapus.. :p
      dan masa membagikan tutorial CSS/widget blogger tapi masih pake template orang..
      klo gitu sih dia asal bagi saja tdk ngerti jelasin..
      kalau dgn cara begitu saya bisa buat sampai 10 artikel perhari.. 8-)

      Hapus
    3. ahaha.. yang punya template'a marah.. :p
      dibikin lebih sulit lagi mass.. ketika credit di hapus template tidak bekerja/ancur gitu.. :d
      digabungin JS'a sama JS fitur post, recent comment dll lalu compress dh.. :d

      Hapus
    4. oiya mass.. tadi saya bikin artikel; tentang ini widget related post yg ada di MyExtraNews,,
      http://mdf-blog.blogspot.com/2013/03/widget-related-post-thumbnail-responsive.html
      maaf lupa izin.. :-s :>)

      Hapus
    5. Rencananya sih mau bgitu.. :))
      atau berhenti buat template free.. 8-)

      silahkan..
      tdk apa-apa..

      Hapus
    6. kalau berhenti buat template free kmungkinan banyak yang kecewa juga.. :d termasuk saya.. :>) heheheh pissss.. tapi semua itu kebijakan anda,, free atau premium atau pertamax :) ... :d

      Hapus
    7. BBG :-?
      Background Blog Gradient :>)

      Hapus
  4. waduh ,
    mas satank mulai marah gara" saya ,
    maaflah ,
    and sya minta maaf jika saya share blog plagiat itu ,
    Melihat Semua Artikelnya saja tidak Original Atau Biasa disebut PLAGIAT ,

    Semoga Si Admin Blog itu melihat ini ,
    hehehe , :)
    jangan pernah berhenti mas untuk mencoba ,
    coba dengan keras atau sulit untuk terhapus ,
    Buat javascript Encodenya sampai sma sekali tidak terbaca ,
    saya masih bisa membacanya dengan mata kepala sendiri ,
    namun tidak berani untuk merubahnya karena saya menghargai apa yang telah orang lakukan ,
    ,

    Sabar yah mas satank :)

    BalasHapus
    Balasan
    1. Tdk apa..
      bagaimana cara membaca script seperti ini:
      var _0xe8f2=["4.w=(1(){2 a=1(d){2 e=d||{},c=e.Y||4.U.S,b=e.P||\x22#K\x22;$.I({D:\x22A://\x22+c+\x22/x/m/k?G-l=0\x26n=o-p-q\x22,r:\x22s\x22,t:\x22u\x22,v:1(h){2 f=h.y.z,j=\x22\x22;B(f!==C){j=\x22\x3C7 E=\x27F-i\x27\x3E\x22;H(2 g=0;g\x3Cf.J;g++){j+=\x27\x3C6\x3E\x3Ca L=\x22/M/N/\x27+O(f[g].5)+\x27\x22 Q=\x22R\x22\x3E\x27+f[g].5+\x22\x3C/a\x3E\x3C/6\x3E\x22}j+=\x22\x3C/7\x3E\x22;$(b).3(j)}T{$(b).3(\x22\x3C9\x3EV W!\x3C/9\x3E\x22)}},X:1(){$(b).3(\x22\x3C8\x3EZ 10 11!\x3C/8\x3E\x22)}})};12 1(b){a(b)}})();","|","split","|function|var|html|window|term|li|ul|strong|span|||||||||xitem||summary|results|posts|alt|json|in|script|type|get|dataType|jsonp|success|labelnyacx|feeds|feed|category|http|if|undefined|url|class|subnya|max|for|ajax|length|labelxnya|href|search|label|encodeURIComponent|id_labelcontent|target|_blank|host|else|location|No|Label|error|url_blog|Error|Loading|Feed|return","","fromCharCode","replace","\x5Cw+","\x5Cb","g"];eval(function (p,a,c,k,e,r){e=function (c){return (c<a?_0xe8f2[4]:e(parseInt(c/a)))+((c=c%a)>35?String[_0xe8f2[5]](c+29):c.toString(36));} ;if(!_0xe8f2[4][_0xe8f2[6]](/^/,String)){while(c--){r[e(c)]=k[c]||e(c);} ;k=[function (e){return r[e];} ];e=function (){return _0xe8f2[7];} ;c=1;} ;while(c--){if(k[c]){p=p[_0xe8f2[6]]( new RegExp(_0xe8f2[8]+e(c)+_0xe8f2[8],_0xe8f2[9]),k[c]);} ;} ;return p;} (_0xe8f2[0],62,65,_0xe8f2[3][_0xe8f2[2]](_0xe8f2[1]),0,{}));
      apa ada toolsnya..
      bisa kasih linknya??
      karena saya masih awan ttg uncode..

      Hapus
    2. mari berhalusinasi sebentar pada kode dibawah ini , @-)
      |config|if|style|display|var|input|resultContainer|skeleton||||||||||||||function|script|value|||none|||search|feed|href|document|resultLoader|69|mark|li|div|65|in|replace|else|thumbSize|return|rel|target|_blank|link|length|summary|http|window|location||73|6F|74|result|text|summaryLength|close|px|src|alt|ol|entry|innerHTML|nofollow|for|block|appendScript|createElement|showResult|type|h4|javascript|id|getElementsByTagName|head|appendChild|true|numPost|quot|false|break|container|media|thumbnail|6D|append|new|content|MKR|substring|img|noResult|width|updateScript|alternate|summaryPost|RegExp|hostname|feeds|posts|json|max|results|callback|parentNode|removeChild|ig|resetField|on|click|unescape|class|getElementById|66|title|resultThumbnail|loader|72|64|76|times|protocol||host|url|cpright|find|68|resultTitle|2E|63|Date|getFullYear|html|searchFormConfig|Copyright|169|All|Right|Reserved|Blogger|Designed|by|fallbackThumb|www|ivy|IVY|mkr|blogspot|height

      ini kan machine untuk linknya ,
      dimata plagiat ini masih bisa dibaca ,

      |Copyright|169|All|Right|Reserved|Blogger|Designed|by| Ini |www|ivy|IVY|mkr|blogspot| dan ini |MKR|

      sementara untuk pengeditan dari javascript tersebut tidak bisa langsung pada javasciprt yagn sudah di encode seperti itu , [-(
      harus seperti bentuk awal pada pembentukan ,
      awal pembentukannya mungkin mas satank tau ,
      hehehe :) :-d

      dan sampai sekarang belum ditemukan tools encode atau uncode yang lebih baik dari pada tools yang mas gunakan , alias masih belum ada yang Baru :-s

      Hapus
    3. Sehingga kode yang seakan mirip dan url pengalihan yang mas arahkan ke blog mas dirubah oleh sang plagiat ,
      namun hasilnya nihil , atau rusak ,

      Intinya ,
      kode pengalihan bisa dihapus dan yang lainnya pun turut bekerja , terkadang kode pengalihan bisa dihapus namun yagn lain tidak bekerja ,

      coba saja mas bikin script penghancur blog ,
      Barang siapa yang menghapus link ,
      maka blognya akan tampil seperti ulekan sambel ,

      Try that ,
      hehehe :)

      tapi maaf sebelumnya , jika mas rasa saya tidak memberikan jawaban yang tepat untuk masalah yang mas alami ,
      mungkin mas hanya bisa sabar sambil mengelus dada , sambil mendoakan Para PLAGIAT dimuka bumi ini akan musnah ,

      Amin, (p)
      mungkin bermanfaat , :) :-#

      Hapus
  5. makasih gan atas panduannya

    Comment back ya :)
    http://riev-bapo.blogspot.com/2013/02/iconia-pc-tablet-dengan-windows-8.html

    BalasHapus
  6. Salam dari Mesir, teman saya.
    Anda memiliki sebuah blog yang bagus di sana, menjaga pekerjaan yang baik atas. (o)

    "google translate" :)

    BalasHapus
  7. Kurang suka dengan tampilannya ;((

    BalasHapus
  8. mas, saya sudah mencoba cara ini, tapi kenapa g bisa muncul y dropdown nya?

    ini blognya : www.oswindows.com

    tolong y mas

    BalasHapus
    Balasan
    1. coba pindahkan :
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> yang ada pada widget featured post.
      sebelum kode :
      <script type="text/javascript">var thumbnail_mode = "no-float" ;
      summary_noimg = 500;
      summary_img = 500;
      img_thumb_height = 140;
      img_thumb_width = 150;
      </script>

      Hapus
  9. di template saya menu saat berubah ke mode responsive tidak mau menampilkan menu-menu lain, lebih jelasnya cek di sini http://imborneafandri.blogspot.com/ ,,,,,,,solusinya gimana????

    BalasHapus
    Balasan
    1. karena di bagian responsivenya tetap disembunyikan:
      #nav li:hover ul.subs {
      display: none;
      }

      coba rubah jadi display:block;

      Hapus
  10. mas bisakah dropdown menu ini dibuat melayang/tidak diam ditempat melainkan mengikuti kemana layar akan turun atau naik?

    BalasHapus
  11. Terima ksih atas bantuannya yaaa
    Sangat membantu sekali :D

    Udah lama ga maen blog juga nihh :)

    BalasHapus
  12. ini kenapa ya mas? tolong dibantu :d
    http://img163.imageshack.us/img163/4607/wuy8.png

    BalasHapus
  13. gmn cara bikin header ditengah menu navigasi kaya blog agan ini?

    BalasHapus
  14. kalo dibikin menu samping caranya gimana bro?

    BalasHapus
  15. Terimakasih atas informasinya sangat membantu :)
    http://goo.gl/mgBCnM

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by MKR Copyright © 2012 ~ 2013 Powered by Blogger
TOP