Bagaimana Membuat Navigasi yang Responsif

Salah satu daripada bahagian yang paling rumit bertanggungjawab di laman web adalah “Navigasi”, bahagian ini sangat penting untuk akses laman web, kerana ini adalah salah satu cara pengunjung melompat ke halaman web.

Terdapat banyak cara untuk membuat navigasi laman web responsif dan bahkan beberapa plugin jQuery tersedia untuk melakukannya dalam sesaat.

Walau bagaimanapun, daripada menerapkan penyelesaian segera, dalam jawatan ini, kami akan membimbing anda bagaimana untuk membina navigasi mudah dari tanah dan menggunakan pertanyaan media CSS3 dan sedikit jQuery untuk memaparkannya dalam saiz skrin kecil seperti telefon pintar dengan betul.

Jadi, mari kita mulakan.

Demo
Muat turun Sumber

HTML

Pertama sekali, mari tambahkan meta viewport di dalamnya kepala tag. Ini meta viewport tag diperlukan untuk halaman kami untuk skala dengan betul di dalam mana-mana saiz skrin, terutama di viewport mudah alih.

... dan kemudian tambahkan coretan berikut sebagai markup navigasi di dalamnya badan tag.

   Rumah
 Bagaimana untuk
 Ikon
 Reka bentuk
 Web 2.0
 Alat
 
 Menu

Seperti yang anda lihat di atas, kami mempunyai enam pautan menu utama dan menambah satu lagi pautan selepasnya. Pautan tambahan ini akan digunakan untuk tarik navigasi menu apabila ia disembunyikan dalam skrin kecil.

Bacaan lanjut: Jangan lupa tag meta viewport.

Gaya

Dalam bahagian ini, kami mula melukis navigasi. Gaya di sini hanya hiasan, anda boleh memilih mana-mana warna yang anda inginkan. Tetapi dalam kes ini, kami (saya sendiri) mahukannya badan untuk mempunyai warna yang lembut dan berkrim.

 badan background-color: # ece8e5;

The nav tag yang menentukan navigasi akan ada 100% lebar lebar tetingkap penyemak imbas, sementara ul di mana ia mengandungi pautan menu utama kami akan ada 600px untuk lebar.

 nav ketinggian: 40px; lebar: 100%; latar belakang: # 455868; saiz fon: 11pt; font-family: 'PT Sans', Arial, sans-serif; font-weight: bold; kedudukan: relatif; sempadan bawah: pepejal 2px # 283744;  nav ul padding: 0; margin: 0 auto; lebar: 600px; ketinggian: 40px;

Kemudian, kita akan terapung pautan menu ke kiri, supaya ia akan dipaparkan secara mendatar di sisi, tetapi elemen terapung juga akan menyebabkan runtuh ibu bapa mereka.

 nav li display: inline; terapung: kiri;

Sekiranya anda melihat dari markup HTML di atas, kami telah menambah penjelasan jelas di dalam kelas atribut untuk kedua-dua nav dan ul untuk membersihkan perkara-perkara di sekeliling ketika kita mengapung unsur-unsur di dalamnya menggunakan hack CSS yang jelas. Jadi, mari tambahkan peraturan gaya berikut dalam helaian gaya.

 .jelas: sebelum, .clearfix: selepas kandungan: ""; paparan: jadual;  .clearfix: selepas clear: both;  .clearfix * zoom: 1;

Oleh kerana kami mempunyai enam pautan menu dan kami juga telah menetapkan bekas untuk 600px, setiap pautan menu akan ada 100px untuk lebar.

 nav a color: #fff; paparan: blok dalam talian; lebar: 100px; teks-align: center; teks-hiasan: tiada; garis ketinggian: 40px; teks-bayangan: 1px 1px 0px # 283744;

Pautan menu akan dipisahkan dengan 1px sempadan kanan, kecuali yang terakhir. Ingat model pos sebelumnya kami dalam kotak, lebar menu akan diperluas 1px menjadikannya 101px sebagai tambahan sempadan, jadi di sini kita mengubahnya kotak ukuran model kepada kotak sempadan untuk memastikan menu kekal 100px.

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

Seterusnya, menu akan mempunyai warna yang lebih terang apabila ia berada : berlegar atau : aktif negeri.

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

... dan akhirnya, pautan tambahan akan disembunyikan (untuk skrin desktop).

 nav a # pull display: none;

Pada ketika ini, kami hanya memasang navigasi dan tiada apa yang akan berlaku apabila kami mengubah saiz tetingkap penyemak imbas. Jadi, mari kita melompat ke langkah seterusnya.

Bacaan lanjut: Box-sizing CSS3 (Hongkiat.com)

Pertanyaan Media

Pertanyaan media CSS3 digunakan untuk menentukan bagaimana gaya akan beralih di beberapa titik putus tertentu atau secara khusus saiz skrin peranti.

Sejak navigasi kami pada mulanya 600px lebar lebar, kita mula-mula akan menentukan gaya ketika dilihat 600px atau saiz skrin yang lebih rendah, begitu praktikal, ini adalah titik putus pertama kami.

Dalam saiz skrin ini, setiap dua pautan menu akan dipaparkan bersebelahan, jadi ullebarnya di sini akan 100% dari tetingkap penyemak imbas sementara pautan menu akan ada 50% untuk lebar.

 @media skrin dan (max-width: 600px) nav height: auto;  nav ul width: 100%; paparan: blok; ketinggian: auto;  nav li width: 50%; terapung: kiri; kedudukan: relatif;  nav li a border-bottom: 1px solid # 576979; sempadan kanan: 1px pepejal # 576979;  nav a text-align: left; lebar: 100%; indeks teks: 25px;

... dan kemudian, kita juga menentukan cara navigasi dipaparkan apabila skrin semakin kecil oleh 480px atau lebih rendah (jadi ini adalah titik putus kedua kami).

Dalam saiz skrin ini, pautan tambahan yang kami tambah sebelum akan mula kelihatan dan kami juga memberikan pautan a “Menu” ikon di sebelah kanannya menggunakan : selepas pseudo-element, manakala pautan menu utama akan disembunyikan untuk menyimpan lebih banyak ruang menegak di skrin.

 @media skrin sahaja dan (max-width: 480px) nav border-bottom: 0;  nav ul display: none; ketinggian: auto;  nav a # pull display: block; warna latar belakang: # 283744; lebar: 100%; kedudukan: relatif;  nav a # pull: after content: ""; latar belakang: url ('nav-icon.png') no-repeat; lebar: 30px; ketinggian: 30px; paparan: blok dalam talian; kedudukan: mutlak; betul: 15px; atas: 10px;

Terakhir, apabila skrin semakin kecil oleh 320px dan menurunkan menu akan dipaparkan secara menegak ke atas.

 @media skrin sahaja dan (max-width: 320px) nav li display: block; terapung: tiada; lebar: 100%;  nav li a border-bottom: 1px solid # 576979;

Kini, anda boleh cuba mengubah saiz tetingkap penyemak imbas. Seharusnya kini dapat menyesuaikan saiz skrin.

Bacaan lanjut: Pertanyaan Media untuk Peranti Standard.

Menunjukkan Menu

Pada ketika ini, menu masih tersembunyi dan hanya akan kelihatan apabila diperlukan dengan mengetik atau mengklik pada “Menu” pautan dan kita boleh mencapai kesan menggunakan jQuery slideToggle ().

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

Walau bagaimanapun, apabila anda mengubah saiz tetingkap penyemak imbas selepas anda baru sahaja melihat dan menyembunyikan menu dalam skrin kecil, menu akan tetap tersembunyi, kerana paparan: tiada gaya yang dihasilkan oleh jQuery masih dilampirkan dalam elemen.

Oleh itu, kita perlu menghapus gaya ini apabila saiz semula tetingkap, seperti berikut:

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

Baiklah, itulah semua kod yang kita perlukan, kini kita dapat melihat navigasi dari pautan berikut, dan kami mencadangkan anda untuk mengujinya dalam alat uji reka bentuk yang responsif, seperti Resolusi, supaya anda boleh melihatnya dalam pelbagai lebar sekaligus.

Demo
Muat turun Sumber

Bonus: Cara Alternatif

Seperti yang telah kita sebutkan di dalam catatan ini, terdapat beberapa cara lain untuk melakukannya, dan menggunakan pustaka JavaScript yang dipanggil SelectNav.js adalah salah satu cara yang paling mudah. Ini adalah JavaScript tulen yang tidak bergantung kepada perpustakaan pihak ketiga lain seperti jQuery.

Pada dasarnya, ia akan menyalin menu senarai anda dan mengubahnya menjadi menu akan menggunakan antara muka pengguna asal dari peranti itu sendiri.

Sila rujuk dokumentasi rasmi untuk pelaksanaan selanjutnya.

Kesimpulannya

Kami telah melalui semua cara untuk membuat navigasi responsif dari awal. Yang kami buat di sini hanyalah salah satu daripada contoh, dan seperti yang telah kami nyatakan di post ini dan ditunjukkan di atas, terdapat banyak penyelesaian lain yang boleh anda lakukan. Oleh itu, ia kini meninggalkan keputusan anda untuk memilih yang mengamalkan yang paling sesuai untuk memenuhi keperluan dan struktur navigasi laman web anda.