Meneruskan postingan ox yang berjudul Penerapan sederhana dari Responsive Web Design di mana itu adalah tentang design layout utama web. Nah, tidak sebagai pelengkap tentu harus ada design menu di dalamnya. Karena ceritanya tentang responsive, tentu menu yang ini juga harus responsive juga. Ya, ox masih dan terus belajar responsive. Iya, menu ini nantinya jika di klik akan di hidden dan di klik lagi akan muncul lagi, istilah kerennya toggle. Tentu semua itu dengan sedikit bantuan jQuery. Yuk ah intip-intip:

contoh tampilan diberbagai width/lebar

Seperti design template pada umumnya, di mulai dari html lanjut ke css kemudian beri sentuhan javascript :D

1. membuat html, element menu

sederhana, tulis seperti di bawah:

<div class="menu">
<ul class="menu">
 <li><a href="#">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Contact</a></li>
 <li><a href="#">Products</a></li>
 <li><a href="#">Tools</a></li> 
 <li><a href="#">Downloads</a></li> 
</ul>
<a href="#" id="pull">Menu</a>
</div>

Iya, begitu bentuk menu secara umum, menggunakan element ul dan li.

2. membuat css

Ada beberapa penjelasan css, di karenakan lumayan panjang jadi di tulis secara garis besar dan yang sekiranya penting saja.

div {
 height: 50px;
 width: 100%;
}

karena parent dari menu adalah div, maka div tersebut wajib di beri satuan lebar/width berupa prosentasi %, bukan px ataupun em. Beri 100%, nilai 100% di maksudkan untuk lebar monitor 1024 dan di atasnya.

div ul {
 margin: 0 auto;
 width: 620px;
}

margin di beri nilai auto agar posisi menu berada di tengah, sedangkan width di beri nilai 620px berdasarkan perhitungan 6x100 yaitu ada 6 halaman yang masing-masing di beri width 100px. Sisa 20px untuk padding, margin,border di antara menu itu.

@media screen and (max-width: 600px) {
   div li {
    width: 50%;
    float: left;
    position: relative;
   }
}

Nah, baris pada @media di atas artinya untuk lebar monitor di bawah 600px akan ada 2 baris menu saja. lihat bagian div li point width:50%, itu script yang di maksud(50%+50% = 100%). Perhatikan gambar hasil akhir di atas.

@media only screen and (max-width : 480px) {
 div ul {
  display: none;
  height: auto;
 }
 div a#pull {
  display: block;
  background-color: #333;
  width: 100%;
  position: relative;
 }
 div a#pull:after {
  content:"";
  background: url('nav-icon.png') no-repeat;
 }
}

Perhatikan div ul pada bagian display:none, artinya menyembunyikan menu. Karena lebar di bawah 480px itu cukup sempit, maka di buat link menu saja. Jadi nanti jika di klik link menu(berupa gambar) maka akan muncul menu aslinya(6 halaman) yang di buat toggle dengan bantuan jQuery.

Perhatikan div a#pull, nah ini adalah style dari link menu tadi, jadi kalau lebar monitor ada di atas 480px itu menu ini di sembunyikan display:none, maka sebaliknya jika lebar kurang dari 480px lantas di tampilkan.
Sedangkan div a#pull:after berfungsi untuk menempelkan gambar yang berwarna putih.

3. Penambahan Javascript

Javascript di sini berfungsi untuk menambahkan efek toggle menu, tidak ada yang istimewa sih. Cukup script sederhana seperti di bawah.

   var menuHeight = $('div ul').height();

   $('#pull').on('click', function(e) {
    e.preventDefault();
    $('div ul').slideToggle('fast');
   });

   $(window).resize(function(){
          var w = $(window).width();
          if(w > 320 && $('div ul').is(':hidden')) {
           $('div ul').removeAttr('style');
          }
      });

Indah bukan? hhaha, download zip untuk demonya. Ingat, link jQuery dan font di demo tersebut memakai CDN google, jadi sebaiknya jalankan demo dalam keadaan internet On. Meneruskan postingan ox yang berjudul Penerapan sederhana dari Responsive Web Design  di mana itu adalah tentang design layout utama web ....