Saya hanya akan menjelaskan konsep ini secara cepat dan nyaris nonverbal, jadi perhatikan dan jangan lupa untuk membaca komentar-komentar di dalam aba-aba CSS dan HTML yang Saya tuliskan. Pada dasarnya kita hanya akan menciptakan hidangan biasa, yang kemudian kita lengkapi dengan ikon sebagai tombol penampil menu. Secara normal, ikon tersebut akan disembunyikan dan hidangan navigasi akan ditampilkan pada perangkat desktop/device berukuran besar, hingga ketika kita berada pada perangkat yang lebih kecil, maka CSS akan melaksanakan hal sebaliknya, yaitu akan menyembunyikan hidangan dan menampilkan ikon/navicon.
Demo
Markup HTML
Kita membutuhkan enam buah elemen HTML yaitu <nav>, <ul>, <li>, <input type="checkbox">, <label> dan <a>
| Tag HTML | Keperluan |
|---|---|
<nav>, <ul>, <li> | Semantik. Semua navigasi standar dibangun dengan elemen ini |
<a> | Setiap navigasi juga mempunyai tautan-tautan yang berfungsi untuk mengarahkan pengunjung menuju sebuah kawasan tertentu ketika tautan-tautan tersebut diklik |
<input type="checkbox"> | Elemen ini dipakai untuk menampilkan dan menyembunyikan hidangan pada tampilan mobile. Dengan CSS3 :checked, kita dapat menciptakan dampak toggle memakai elemen checkbox (baca di sini) |
<label> | Elemen ini dipakai untuk keperluan visual saja. Lebih tepatnya, elemen ini akan menjadi ikon yang akan tampak sebagai tombol, padahal tombol hidangan yang gotong royong yaitu elemen checkbox yang disembunyikan dengan opacity:0. |
<!-- Markup yang dibutuhkan: <nav>, <ul>, <li>, <input type=checkbox>, <label>, <a> --> <nav> <input type="checkbox"> <label>≡</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 hidangan dengan mengatur tampilan elemen <nav> mencakup tipe font, warna latar dan huruf:
/* navigasi: tentukan font, warna karakter dan latar */ nav { font:normal bold 11px Arial,Sans-Serif; color:gray; background-color:black; height:30px; }Kemudian set layout daftar hidangan 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 hidangan */ nav ul {height:30px} /* set layout hidangan menjadi berjajar/horizontal */ nav li { float:left; display:inline; }Ubah semua tautan di dalam navigasi menjadi elemen blok supaya lebih gampang dalam pengaturan tinggi, padding dan hal-hal lain yang kebanyakan dapat dilakukan oleh elemen blok:
/* tautan */ nav a { display:block; line-height:30px; padding:0 14px; text-decoration:none; color:white; }Ganti juga warna item hidangan kalau pointer mouse berada di atasnya:
/* perilaku hover item hidangan */ nav a:hover {background-color:#39f}Ikon Menu (Navicon)
Bentuknya menyerupai ini: `≡`. Simbol disamping Saya buat dengan entitas HTML ≡. Kita akan meletakkan simbol itu di dalam elemen <label> menyerupai ini:
<label>≡</label>Sebenarnya ada beberapa bentuk lain yang biasa dijadikan sebagai simbol untuk menyatakan hidangan (baca di sini), tapi bentuk yang paling gampang dibentuk dan yang paling umum dipakai yaitu 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 hidangan 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 hidangan sebagai hidangan vertikal. Tampilkan ikon dan sembunyikan semua menu:
@media (max-width:767px) { nav { /* kita akan mengeset posisi hidangan dan ikon sebagai elemen sewenang-wenang 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 hidangan */ } /* set tampilan hidangan supaya 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 dampak toggle dengan CSS :checked. Ubah warna ikon ketika tombol hidangan diklik, dan tampilkan hidangan yang tersembunyi:
@media (max-width:767px) { ... ... /* ubah warna ikon ketika tombol hidangan diklik, dan tampilkan hidangan yang tersembunyi ketika checkbox dicek */ nav input:checked + label {color:white} nav input:checked ul {display:block} }Kode Lengkap
HTML
<nav> <input type="checkbox"> <label>≡</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 hidangan */ 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 hidangan */ 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 hidangan */ } /* set the hidangan 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 hidangan icon */ } nav input {z-index:4} /* always place the checkbox above the label element */ /* highlight the label element and show the hidangan if the checkbox is checked */ nav input:checked + label {color:white} nav input:checked ul {display:block} }