Cara Membuat Navigasi yang Responsif

Salah satu bagian yang paling sulit tanggap di situs web “Navigasi”, bagian ini sangat penting untuk aksesibilitas situs web, karena ini adalah salah satu cara pengunjung melompati halaman web.

Sebenarnya ada banyak cara untuk membuat navigasi situs web responsif dan bahkan beberapa plugin jQuery tersedia untuk melakukannya dalam sedetik.

Namun, daripada menerapkan solusi instan, dalam posting ini, kami akan memandu Anda cara membangun navigasi sederhana dari tanah dan menggunakan kueri media CSS3 dan sedikit jQuery untuk menampilkannya dalam ukuran layar kecil seperti smartphone dengan benar.

Jadi, mari kita mulai saja.

Demo
Sumber Unduhan

HTML

Pertama-tama, mari tambahkan meta viewport di dalam kepala menandai. Ini viewa meta tag diperlukan untuk halaman kami untuk skala dengan benar di dalam ukuran layar apa pun, terutama di viewport seluler.

... dan kemudian tambahkan potongan berikut sebagai markup navigasi di dalam tubuh menandai.

   Rumah
 Bagaimana caranya
 Ikon
 Desain
 Web 2.0
 Alat
 
 Menu

Seperti yang Anda lihat di atas, kami memiliki enam tautan menu utama dan menambahkan satu tautan lagi setelahnya. Tautan tambahan ini akan digunakan untuk Tarik navigasi menu ketika disembunyikan di layar kecil.

Bacaan lebih lanjut: Jangan lupa tag meta viewport.

Gaya

Di bagian ini, kami mulai menata navigasi. Gaya di sini hanya dekoratif, Anda dapat memilih warna apa pun yang Anda inginkan. Tetapi dalam hal ini, kami (saya pribadi) menginginkan tubuh memiliki warna yang lembut dan lembut.

 body background-color: # ece8e5;

Itu nav tag yang menentukan navigasi akan miliki 100% lebar penuh jendela browser, sedangkan jendela ul di mana itu berisi tautan menu utama kami 600px untuk lebar.

 nav tinggi: 40px; lebar: 100%; latar belakang: # 455868; ukuran font: 11pt; font-family: 'PT Sans', Arial, sans-serif; font-weight: bold; posisi: relatif; border-bottom: 2px solid # 283744;  nav ul padding: 0; margin: 0 otomatis; lebar: 600px; tinggi: 40px;

Kalau begitu, kita akan melakukannya mengapung menu tautan ke kiri, sehingga mereka akan ditampilkan secara horizontal berdampingan, tetapi melayang elemen juga akan menyebabkan induknya runtuh.

 nav li display: inline; mengapung: kiri;

Jika Anda perhatikan dari markup HTML di atas, kami telah menambahkan clearfix dalam kelas atribut untuk kedua nav dan ul untuk menghapus hal-hal di sekitar ketika kita mengapung elemen di dalamnya menggunakan hack clearfix CSS ini. Jadi, mari kita tambahkan aturan gaya berikut di lembar gaya.

 .clearfix: before, .clearfix: after content: ""; tampilan: tabel;  .clearfix: after clear: Keduanya;  .clearfix * zoom: 1;

Karena kami memiliki enam tautan menu dan kami juga telah menentukan wadah untuk 600px, setiap tautan menu akan memiliki 100px untuk lebar.

 nav a color: #fff; display: inline-block; lebar: 100px; perataan teks: tengah; teks-dekorasi: tidak ada; garis-tinggi: 40px; text-shadow: 1px 1px 0px # 283744;

Tautan menu akan dipisahkan dengan 1px perbatasan kanan, kecuali yang terakhir. Ingat posting kami sebelumnya pada model kotak, lebar menu akan diperluas 1px membuatnya 101px sebagai tambahan perbatasan, jadi di sini kita mengubah ukuran kotak model untuk kotak perbatasan untuk menjaga menu tetap 100px.

 nav li a border-right: 1px solid # 576979; ukuran kotak: kotak batas; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;  nav li: last-child a border-right: 0;

Selanjutnya, menu akan memiliki warna lebih cerah saat berada di : melayang atau :aktif negara.

 nav a: hover, nav a: aktif background-color: # 8c99a4;

... dan terakhir, tautan tambahan akan disembunyikan (untuk layar desktop).

 nav a # pull display: none;

Pada titik ini, kami hanya menata navigasi dan tidak akan terjadi apa-apa ketika kami mengubah ukuran jendela browser. Jadi, mari kita lompat ke langkah selanjutnya.

Bacaan lebih lanjut: Ukuran Kotak CSS3 (Hongkiat.com)

Kueri Media

Kueri media CSS3 digunakan untuk menentukan bagaimana gaya akan berubah dalam beberapa breakpoint tertentu atau secara khusus ukuran layar perangkat.

Karena navigasi kami pada awalnya 600px fix-width, pertama-tama kita akan mendefinisikan gaya ketika dilihat di 600px atau ukuran layar yang lebih rendah, secara praktis, ini adalah breakpoint pertama kami.

Dalam ukuran layar ini, masing-masing dari dua tautan menu akan ditampilkan berdampingan, jadi ulLebar di sini akan menjadi 100% dari jendela browser sementara tautan menu akan memiliki 50% untuk lebar.

 Layar @ media dan (max-width: 600px) nav height: auto;  nav ul width: 100%; display: blok; tinggi: otomatis;  nav li width: 50%; mengapung: kiri; posisi: relatif;  nav li a border-bottom: 1px solid # 576979; border-right: 1px solid # 576979;  nav a text-align: kiri; lebar: 100%; indentasi teks: 25px;

... dan kemudian, kami juga menentukan bagaimana navigasi ditampilkan ketika layar menjadi lebih kecil 480px atau lebih rendah (jadi ini adalah breakpoint kedua kami).

Dalam ukuran layar ini, tautan tambahan yang telah kami tambahkan sebelumnya akan mulai terlihat dan kami juga memberikan tautan a “Menu” ikon di sisi kanannya menggunakan :setelah elemen semu, sementara tautan menu utama akan disembunyikan untuk menghemat lebih banyak ruang vertikal di layar.

 Layar @media saja dan (max-width: 480px) nav border-bottom: 0;  nav ul display: none; tinggi: otomatis;  nav a # pull display: block; warna latar: # 283744; lebar: 100%; posisi: relatif;  nav a # pull: after content: ""; background: url ('nav-icon.png') no-repeat; lebar: 30px; tinggi: 30px; display: inline-block; posisi: absolut; kanan: 15px; atas: 10px;

Terakhir, saat layar semakin kecil 320px dan lebih rendah menu akan ditampilkan secara vertikal dari atas ke bawah.

 @media hanya layar dan (max-width: 320px) nav li display: block; mengapung: tidak ada; lebar: 100%;  nav li a border-bottom: 1px solid # 576979;

Sekarang, Anda dapat mencoba mengubah ukuran jendela browser. Seharusnya sekarang bisa menyesuaikan ukuran layar.

Bacaan lebih lanjut: Kueri Media untuk Perangkat Standar.

Menampilkan Menu

Pada titik ini, menu akan tetap disembunyikan dan hanya akan terlihat ketika dibutuhkan dengan mengetuk atau mengklik “Menu” tautan dan kami dapat mencapai efek menggunakan jQuery slideToggle ().

 $ (function () var pull = $ ('# pull'); menu = $ ('nav ul'); menuHeight = menu.height (); $ (pull) .on ('click', function (e) e.preventDefault (); menu.slideToggle ();););

Namun, ketika Anda mengubah ukuran jendela browser tepat setelah Anda baru saja melihat dan menyembunyikan menu di layar kecil, menu akan tetap tersembunyi, karena display: tidak ada gaya yang dihasilkan oleh jQuery masih melekat pada elemen.

Jadi, kita perlu menghapus ukuran ini pada ukuran jendela, sebagai berikut:

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

Baiklah, itu semua kode yang kita butuhkan, sekarang kita dapat melihat navigasi dari tautan berikut, dan kami sarankan Anda untuk mengujinya di alat uji desain responsif, seperti Responsinator, sehingga Anda dapat melihatnya dalam berbagai lebar sekaligus.

Demo
Sumber Unduhan

Bonus: Cara Alternatif

Seperti yang telah kami sebutkan sebelumnya dalam posting ini, ada beberapa cara lain untuk melakukannya, dan menggunakan perpustakaan JavaScript yang disebut SelectNav.js adalah salah satu cara termudah. Ini adalah JavaScript murni yang tidak mengandalkan perpustakaan pihak ketiga lain seperti jQuery.

Pada dasarnya, itu akan menduplikasi menu daftar Anda dan mengubahnya menjadi menu akan menggunakan antarmuka pengguna asli dari perangkat itu sendiri.

Silakan merujuk ke dokumentasi resmi untuk implementasi lebih lanjut.

Kesimpulan

Kami telah melalui semua cara untuk membuat navigasi responsif dari awal. Ini yang kami buat di sini hanyalah salah satu contoh, dan seperti yang kami sebutkan sebelumnya di posting ini dan ditunjukkan di atas, ada banyak solusi lain yang dapat Anda implementasikan. Jadi, sekarang Anda harus memutuskan untuk memilih praktik mana yang paling cocok untuk memenuhi kebutuhan dan struktur navigasi situs web Anda.