Konsep Navigasi Mobile dengan Media Queries

Tabel Konten
  1. Demo 
  2. Markup HTML 
  3. CSS 
    1. Ikon Menu (Navicon) 
  4. Media Queries 
  • Kode Lengkap 
    1. HTML 
    2. CSS 
  • Navigasi/Menu pada perangkat mobile

    Saya hanya akan menjelaskan konsep ini secara cepat dan nyaris nonverbal, jadi perhatikan dan jangan lupa untuk membaca komentar-komentar di dalam kode CSS dan HTML yang Saya tuliskan. Pada dasarnya kita hanya akan membuat menu biasa, yang kemudian kita lengkapi dengan ikon sebagai tombol penampil menu. Secara normal, ikon tersebut akan disembunyikan dan menu navigasi akan ditampilkan pada perangkat desktop/device berukuran besar, sampai ketika kita berada pada perangkat yang lebih kecil, maka CSS akan melakukan hal sebaliknya, yaitu akan menyembunyikan menu dan menampilkan ikon/navicon.

    Demo 

    Lihat Demo Salinan di CSS Deck

    Markup HTML 

    Kita membutuhkan enam buah elemen HTML yaitu <nav>, <ul>, <li>, <input type="checkbox">, <label> dan <a>

    Tag HTMLKeperluan
    <nav>, <ul>, <li>Semantik. Semua navigasi standar dibangun dengan elemen ini
    <a>Setiap navigasi juga memiliki tautan-tautan yang berfungsi untuk mengarahkan pengunjung menuju sebuah tempat tertentu saat tautan-tautan tersebut diklik
    <input type="checkbox">Elemen ini digunakan untuk menampilkan dan menyembunyikan menu pada tampilan mobile. Dengan CSS3 :checked, kita bisa membuat efek toggle menggunakan elemen checkbox (baca di sini)
    <label>Elemen ini digunakan untuk keperluan visual saja. Lebih tepatnya, elemen ini akan menjadi ikon yang akan tampak sebagai tombol, padahal tombol menu yang sebenarnya adalah elemen checkbox yang disembunyikan dengan opacity:0.
    <!-- Markup yang dibutuhkan: <nav>, <ul>, <li>, <input type=checkbox>, <label>, <a> -->
    
    <nav>
        <input type="checkbox">
        <label>&equiv;</label>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Archive</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

    CSS 

    Pertama-tama kita set dasar dimensi menu dengan mengatur tampilan elemen <nav> meliputi tipe font, warna latar dan huruf:

    /* navigasi: tentukan font, warna huruf dan latar */
    nav {
      font:normal bold 11px Arial,Sans-Serif;
      color:gray;
      background-color:black;
      height:30px;
    }

    Kemudian set layout daftar menu menjadi horizontal. Hapus margin, padding dan bullet bawaan dari User Agent Style Sheet:

    /* daftar menu: hilangkan margin, padding dan bullet */
    nav ul,
    nav li {
      margin:0 0;
      padding:0 0;
      list-style:none;
    }
    
    /* set tinggi menu */
    nav ul {height:30px}
    
    /* set layout menu menjadi berjajar/horizontal */
    nav li {
      float:left;
      display:inline;
    }

    Ubah semua tautan di dalam navigasi menjadi elemen blok agar lebih mudah dalam pengaturan tinggi, padding dan hal-hal lain yang kebanyakan bisa dilakukan oleh elemen blok:

    /* tautan */
    nav a {
      display:block;
      line-height:30px;
      padding:0 14px;
      text-decoration:none;
      color:white;
    }

    Ganti juga warna item menu jika pointer mouse berada di atasnya:

    /* sikap hover item menu */
    nav a:hover {background-color:#39f}

    Ikon Menu (Navicon) 

    Bentuknya seperti ini: ``. Simbol disamping Saya buat dengan entitas HTML &equiv;. Kita akan meletakkan simbol itu di dalam elemen <label> seperti ini:

    <label>&equiv;</label>

    Sebenarnya ada beberapa bentuk lain yang biasa dijadikan sebagai simbol untuk menyatakan menu (baca di sini), tapi bentuk yang paling mudah dibuat dan yang paling umum digunakan adalah bentuk yang Saya tuliskan di atas.

    Kali ini kita akan mengerjakan CSS elemen checkbox dan label. Secara normal tampilannya akan disembunyikan:

    nav input {display:none}
    nav label {display:none}

    Kemudian set beberapa pengaturan. Sembunyikan wujud elemen checkbox dengan mendeklarasikan opacity:0, dan atur dimensinya dengan tinggi dan lebar yang (disarankan) sama dengan tinggi menu:

    /* checkbox: sebagai tombol menu pada tampian mobile */
    nav input {
      display:none;
      margin:0 0;
      padding:0 0;
      width:30px;
      height:30px;
      opacity:0; /* sembunyikan wujud */
      cursor:pointer;
    }
    
    /* elemen label: sebagai ikon */
    nav label {
      display:none;
      font-size:200%;
      width:30px;
      height:30px;
      /* teks berada di tengah secara vertikal dan horizontal */
      line-height:30px;
      text-align:center;
    }

    Media Queries 

    Hanya membutuhkan satu media query untuk menyatakan bahwa kita sedang berada pada perangkat mobile. Misalnya berada pada ukuran layar maksimal 767px

    @media (max-width:767px) {
      ...
    }

    Saat kita berada pada ukuran layar maksimal 767 piksel, set tampilan menu sebagai menu vertikal. Tampilkan ikon dan sembunyikan semua menu:

    @media (max-width:767px) {
      nav {
        /* kita akan mengeset posisi menu dan ikon sebagai elemen absolut terhadap navigasi, jadi kita memerlukan deklarasi ini */
        position:relative;
      }
      nav ul {
        background-color:#200;
        position:absolute;
        top:100%;
        right:0;
        left:0;
        height:auto;
        display:none; /* sembunyikan menu */
      }
      /* set tampilan menu agar bersusun secara vertikal */
      nav li {
        display:block;
        float:none;
        width:auto;
      }
      nav input,
      nav label {
        position:absolute;
        top:0;
        right:0;
        display:block; /* tampilkan elemen checkbox dan label */
      }  
      nav input {z-index:4} /* selalu pastikan bahwa checkbox berada di atas label */
    }

    Kemudian buat efek toggle dengan CSS :checked. Ubah warna ikon saat tombol menu diklik, dan tampilkan menu yang tersembunyi:

    @media (max-width:767px) {
      ...
      ...
      /* ubah warna ikon saat tombol menu diklik, dan tampilkan menu yang tersembunyi saat checkbox dicek */
      nav input:checked + label {color:white}
      nav input:checked ~ ul {display:block}
    }

    Kode Lengkap 

    HTML 

    <nav>
        <input type="checkbox">
        <label>&equiv;</label>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Archive</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

    CSS 

    /* horizontal navigation: define the navigation font and basic background */
    nav {
      background-color:black;
      font:normal bold 11px Arial,Sans-Serif;
      color:gray;
      height:30px;
    }
    
    /* lists: remove the nested list margin, padding & bullets */
    nav ul,
    nav li {
      margin:0 0;
      padding:0 0;
      list-style:none;
    }
    
    /* navigation height */
    nav ul {height:30px}
    
    /* inline layout menu */
    nav li {
      float:left;
      display:inline;
    }
    
    /* the anchor */
    nav a {
      display:block;
      line-height:30px;
      padding:0 14px;
      text-decoration:none;
      color:white;
    }
    
    /* hover state menu */
    nav a:hover {background-color:#39f}
    
    /* checkbox element: for mobile navigation button */
    nav input {
      display:none;
      margin:0 0;
      padding:0 0;
      width:30px;
      height:30px;
      opacity:0;
      cursor:pointer;
    }
    
    /* for visual purpose */
    nav label {
      display:none;
      font-size:200%;
      width:30px;
      height:30px;
      /* center vertically and horizontally */
      line-height:30px;
      text-align:center;
    }
    
    
    /* MOBILE NAVIGATION */
    
    @media (max-width:767px) {
    
      nav {
        /* we want to absolute positioning the menu, checkbox and label element to its parent, so this is needed */
        position:relative;
      }
    
      nav ul {
        background-color:#200;
        position:absolute;
        top:100%;
        right:0;
        left:0;
        height:auto;
        display:none; /* hide the menu */
      }
    
      /* set the menu as a block list item */
      nav li {
        display:block;
        float:none;
        width:auto;
      }
    
      /* now show the checkbox and label element in mobile device */
      nav input,
      nav label {
        position:absolute;
        top:0;
        right:0;
        display:block; /* show the menu icon */
      }
      
      nav input {z-index:4} /* always place the checkbox above the label element */
    
      /* highlight the label element and show the menu if the checkbox is checked */
      nav input:checked + label {color:white}
      nav input:checked ~ ul {display:block}
    
    }

    23 Komentar

    • Kang Kapuk

      Praktekin dulu.....uji coba buat template baruku....

    • Unknown

      Wah ternyata bisa hanya dengan CSS3..

    • Unknown

      walah baru tau, biasanya klw saya pake condition buat utak atik css di mobile

      kode css disini

      ternyata pake
      @media (max-width:767px)
      lebih simple ^_^

    • Anonim

      kok gak bisa, ada tulisan ...The element type "input" must be terminated by the matching end-tag ""

    • Taufik Nurrohman

      Kalau tetap tidak bisa, coba tambahkan penutup pada elemen checkbox:

      <input type="checkbox" />
    • ireng_ajah

      Keren.. Untuk membuka dan menutupnya, apakah bisa dibuat lebih halus?

    • Unknown

      mas saya mau bikin templatenya pake dropdown menu, kalo dropdown menu kaya gimana yah mas caranya supaya kaya punya mas gini pas tampilan mobilenya? mohon penjelasannya mas :)

    • Taufik Nurrohman

      Sama saja dengan yang lain. Di sini Saya cuma mengubah posisi menu dari sejajar menjadi blok saat layar tidak cukup lebar. Mengenai dropdown dipindah saja jadi posisi statis:

      nav li {
      float:left;
      display:inline;
      }
      @media (max-width:767px) {
      nav li {
      float:none;
      display:block;
      }
      nav li ul {
      position:static;
      width:auto;
      }
      }
    • Unknown

      Saya punya menu yang sudah terpasang dengan kode yang lebih rumit karena banyak tambahan kode li dan span seperti ul ul li, ul ul span, dsb di tablet.webmila [dot ] com . Bisa ga' di buat menu versi mobilenya ? Saya sudah coba dan icon garis datar 3 ( `≡` ) sudah muncul di versi mobile layar 320px, tapi kalau di klik, menu li tidak muncul. Mohon bantuannya mas :D

      Tambahan : Sy tes responsivenya di h x x p://quirktools.com/screenfly

    • Taufik Nurrohman

      Dukungan CSS3 :checked sepertinya memang masih sangat terbatas, bisa dicoba di-backup pakai JavaScript seperti ini:

      $('nav input[type="checkbox"]').on("change", function() {
      $(this).next()[this.checked ? "addClass" : "removeClass"]('active')
      .next()[this.checked ? "addClass" : "removeClass"]('show');
      });
      ...
      ...
      nav input:checked + label,
      nav label.active {color:white}
      nav input:checked ~ ul,
      nav ul.show {display:block}
      ...
      ...

      http://cssdeck.com/labs/9rvje3cy

    • Unknown

      Terima kasih jawabannya mas tapi sekarang sy malah lebih tertarik dengan toggle menu DTE yang muncul dari samping :D gara gara menguji responsive DTE . Sekarang sy sedang berusaha membuatnya dan sampai sekarang masih gagal karena content-wrapper yang seharusnya berada di tengah selalu rapat ke kiri meskipun menu togglenya sudah sempurna :(

      OIYa.. mas maaf sebelumnya. Komentar ini mungkin tidak berhubungan dengan artikel di atas tapi masih seputar responsive. sy punya masalah responsive yang sudah lebih 1 bulan tapi belum dapat juga solusinya, sy harap mas mau membantu :D

      Masih dengan blog dan tools yang sama pada komentar sy sebelumnya. Blog sy selalu menampilkan versi mobile ( bukan tampilan yang sudah di atur dengan media query ) sehingga sidebar tidak muncul pada layar 320px iphone. Masih dengan lebar layar sama tapi menggunakan gadget asus galaxy 7, css media query bekerja dengan baik. Awalnya sy pikir tools untuk menguji responsivenya yang bermasalah. Tapi setelah sy coba langsung di Iphone, media querynya ternyata memang tidak bekerja. Untuk jawabannya, terima kasih sebelum dan sesudahnya. :D

    • Taufik Nurrohman

    • Unknown

      Thx mas taufik. Sy langsung meluncur ke TKP :D

    • Unknown

      Selamat siang mas taufik. Sy sudah berhasil membuat off canvas seperti di link yang mas taufik berikan. Tapi saat icon menu di klik untuk menampilkan menu offcanvasnya muncul scroll di kesamping yang terlihat pada bambar di bawah ini :

      DTE tidak muncul scroll saat menunya di tampilkan. Bagaimana cara mengatasinya mas ???

    • Taufik Nurrohman

      Tambahkan overflow-x:hidden ke body

      body {
      ...
      overflow-x:hidden;
      }
    • Unknown

      sy baru tahu kalau overflow bia ditambahkan minus x atau minus Y :'(

      Awalnya sy sudah coba overflow:hidden; tapi scroll ke bawah juga hilang :D untung ada mas taufik ... :D
      Terima kasih bertubi-tubi mas taufik :D sukses selalu.....

    • Unknown

      Mas klo di tambahi id (misal nav id="menu") kok berantakan ya jadinya, ap yg hrus d sesuaikan agar tdk berantakan mas

    • Taufik Nurrohman

      Cek dulu, siapa tahu ada kode CSS yang memiliki selektor #menu seperti ini:

      #menu {}
      #menu ul {}
      #menu ul li {}
    • Unknown

      seep kelar mas hehehehe, makasih

    • Anonim

      java script nya mana gan

    • Unknown

      ini gak pake javascript
      ini cuman modal CSS ama HTML label dan Input
      jadi ikuti aja tutor diatas pasti work (y)

    • Arsyad

      Gan kode saya gini
      color:#666666;
      display:block;
      padding:0 8px;
      }
      .nav-menu li a:hover {
      background:#f5f5f5;
      }
      ul.nav-social {
      height:38px;
      margin:0 0 0 0;
      padding:0 0;
      float:right;
      }
      ul.nav-social li {
      display:inline-block;
      list-style-type:none;
      float:right;
      margin:0 0;
      padding:0 0;
      border-right:none;
      border-left:1px solid #e5e5e5;
      }
      ul.nav-social li a {
      display:inline-block;
      line-height:38px;
      height:38px;
      padding:0 8px;
      margin:0 0 0 0;
      color:#666666;
      }
      ul.nav-social li a i {
      line-height:38px;
      }
      ul.nav-social li a:hover {
      color:#fff;
      }
      ul.nav-social li a.fcb:hover {
      background:#3B5A9B;
      }
      ul.nav-social li a.gpl:hover {
      background:#DD4B39;
      }
      ul.nav-social li a.twt:hover {
      background:#1BB2E9;
      }
      ul.nav-social li a.ytb:hover {
      background:#ED3F41;
      }

      bantu saya bagai mana buat MOBILE NAVIGATION nya gan.. masih belajar gan

    • smartpulsa-88

      Live Demo-nya error 404 Gan...?

    Komentar telah ditutup.