Menu penyesuaian menggunakan CSS. Cara membuat menu responsif getah menggunakan css

Menu penyesuaian untuk laman web moden bukan sekadar kemewahan, tetapi keperluan. Banyaknya peranti moden memerlukan juruweb untuk membuat reka letak yang dipaparkan secara logik pada skrin resolusi berbeza. Dan dalam beberapa kes, mencipta menu responsif adalah lebih sukar daripada reka bentuk itu sendiri, itulah sebabnya isu ini perlu dipertimbangkan.

Menu untuk skrin besar

Untuk memahami reka letak umum menu, anda perlu mencipta struktur menu dalam HTML dan gayakannya menggunakan CSS terlebih dahulu. Kemudian, berdasarkan bahan yang diterima, anda boleh menambah baik templat penyesuaian. Jadi struktur HTML akan kelihatan seperti ini.

Menu dua item dalam HTML

Anda perlu menambah gaya CSS pada menu yang terhasil. Mereka harus menunjukkan saiz dan warna fon, latar belakang dan kedudukan blok.

Proses onboarding

Mencipta fungsi mudah untuk skrin komputer biasa adalah mudah, dan ini boleh dilihat dalam contoh. Menu penyesuaian untuk tapak dibuat hanya apabila ada sesuatu untuk dikerjakan, iaitu apabila item navigasi telah ditambahkan. Pilihan menu yang paling optimum untuk peranti mudah alih dan tablet ialah ikon hamburger - medan segi empat sama di mana tiga dilukis. Apabila ditekan, semua item menu terbuka. Untuk membuat navigasi sedemikian, anda perlu menambah tag pada dokumen HTML.

Seterusnya, anda perlu menambah gaya yang sesuai pada teg ini untuk mencipta menu yang menarik dan boleh dibaca secara visual. Sebagai tambahan kepada reka bentuk visual navigasi dan ikon menu, anda perlu mereka bentuk kedudukan imej dengan sewajarnya. Oleh itu, syarat menu_icon span:nth-child(1) (top:0 px); diperkenalkan. Iaitu, lekukan imej dari atas akan menjadi sifar piksel. Begitu juga, anda perlu menetapkan nilai untuk sisi lain.

Kini menu responsif hampir siap. Perlu diberi perhatian kepada syarat: Secara lalai, ikon menu tidak akan kelihatan di tapak, jadi anda perlu menambah kelas tambahan pada dokumen CSS dengan syarat berikut: .menu__icon (display: inline-block;) . Ini akan menjadikan navigasi kelihatan.

Selain itu, anda perlu menambah tugasan pada helaian gaya berlatarkan yang akan menyembunyikan perenggan dan subperenggan mengikut keperluan. Untuk melakukan ini, anda perlu menetapkan kedudukan menu tetap dalam CSS, reka bentuk paparan dan penjajaran. Item disembunyikan menggunakan syarat overflow:auto; kelegapan:0; indeks z:1000. Anda juga boleh menambah kelas menu__links-item, yang akan menunjukkan gaya untuk item menu, tetapi ini adalah atas permintaan pembangun.

Sentuhan penamat

Oleh itu, menu responsif CSS hampir lengkap. Agar ia dipaparkan apabila anda mengklik pada ikon, anda perlu menambah fungsi. Untuk kesederhanaan, lebih baik menggunakan jQuery, tetapi jika anda mahu, anda boleh mencipta JavaScript tulen. Dalam kedua-dua kes keadaan yang sama akan digunakan:

(function($)($(function() $(".menu__icon").on("klik", function() $(this).closest(".menu").toggleClass("menu_state_open");)) ;));))(jQuery).

Ini menyimpulkan susun atur navigasi adaptif. Tetapi ini hanyalah salah satu daripada beberapa pilihan untuk mencipta fungsi jenis ini, jadi patut dipertimbangkan yang lain. Sekurang-kurangnya beberapa daripada mereka.

Tanpa mengubah piawaian

Majoriti pengguna Internet mengharapkan untuk melihat bar navigasi di bahagian atas tapak. Ini telah menjadi sejenis standard, jadi menu mendatar penyesuaian harus mempunyai penampilan yang baik. Ia boleh dilakukan menggunakan CSS, kedua-duanya dalam contoh yang diberikan di atas, dan dengan menyambungkan skrip pengendali. Secara umum, mencipta menu responsif terdiri daripada 3 langkah:

Menulis tag HTML

Menggayakannya menggunakan Cascading Style Sheets (CSS).

Adaptasi menu sedia ada.

Sememangnya, semua tapak mempunyai bar menu mereka sendiri, tetapi jika sumber itu dibuat pada CMS, maka lebih mudah untuk mencipta menu penyesuaian baharu.

Bootstrap

Mencipta fungsi responsif bukanlah masalah yang serius jika anda menggunakan alat Bootstrap. Templat untuk mencipta menu mendatar telah disediakan di sini. Anda hanya perlu menyambung ke sumber fail bootstrap.js. Dengan bantuan rangka kerja ini, juruweb mendapat peluang untuk membuat navigasi dengan sebarang kerumitan. Menu responsif dengan Bootstrap dibuat menggunakan beberapa kod.

Ciri-ciri kaedah

Kod ini mungkin menyusahkan, tetapi ia boleh difahami. Perlu diingat bahawa peranan utama di sini dimainkan oleh tag nav, yang bertanggungjawab untuk mencipta navigasi dan penampilannya. Bekas juga disambungkan di sini bekas-cecair Dan bekas, yang menetapkan lebar mata. Dengan bantuan mereka, anda boleh memaksa menu untuk mengembangkan pada skrin resolusi berbeza atau membiarkannya tetap.

Kelas memainkan peranan penting dalam mewujudkan fungsi penyesuaian di sini. runtuh Dan navbar-runtuh yang bertanggungjawab untuk gaya. Menu itu sendiri dicipta dengan menulis item yang diletakkan secara mendatar.

Jika anda menggunakan kod pembingkaian ini untuk membuat navigasi, maka pada skrin lebar ia akan kelihatan seperti sepanduk mendatar. Pada mulanya akan ada nama sumber, dan kemudian item dalam urutan yang ditentukan dengan ketat. Pada skrin sempit, hanya nama tapak dan ikon hamburger akan dipaparkan, yang, apabila diklik, akan memaparkan item menu dalam senarai menegak.

Menu lungsur

Sumber Bootstrap akan menjadi pembantu yang hebat untuk mencipta menu lungsur turun responsif. Untuk melakukan ini, cuma gantikan baris tag

daripada contoh sebelumnya kepada kod di bawah.

Item drop-down

Ini boleh dilakukan untuk satu item atau beberapa. Anak panah yang menunjuk ke bawah akan muncul berhampiran kedudukan dengan sub-item lungsur turun. Apabila diklik, senarai yang dibuat akan muncul. Jika navigasi dipaparkan pada skrin kecil, maka item dengan senarai juntai bawah juga akan ditunjukkan dengan anak panah, tetapi dengan arah ke kanan. Apabila diklik, satu lagi senarai menegak sub-item akan muncul.

Menu pelbagai peringkat

Walau bagaimanapun, anda boleh membuat bukan sahaja menggunakan Bootstrap. Jika pustaka ini tidak disambungkan, anda boleh mencipta menu berbilang peringkat responsif menggunakan HTML dan CSS dan kemudian menyambungkan fungsi PHP.

Pertama, anda perlu membuat senarai tidak tertib dalam fail HTML yang termasuk senarai lain. Untuk melakukan ini, anda harus menggunakan tag standard

. Kita juga tidak harus melupakan pembentukan kelas yang kemudiannya akan diproses oleh helaian gaya cascading CSS. Untuk menjadikannya lebih jelas, anda perlu memberikan contoh kecil senarai menulis dan membuat kelas.
Animasi menu lungsur turun responsif ditetapkan menggunakan helaian gaya berlatarkan. Di sini anda perlu menentukan parameter untuk menu apabila skrin dikurangkan sebanyak 50, 75 dan 25%. Pendekatan untuk mencipta fungsi penyesuaian ini memastikan susun atur yang cekap, di mana menu tidak "bergerak keluar".
Dan akhirnya, anda perlu memasukkan fungsi yang ditunjukkan di bawah ke dalam dokumen.

Jika tapak tersebut tidak memikirkan penggunaan mana-mana fungsi selain daripada ini, maka anda masih perlu membuat dokumen skrip berasingan untuknya. Jika anda meletakkannya dalam HTML biasa, ia hanya akan muncul dalam tetingkap penyemak imbas sebagai sebahagian daripada teks dan tidak akan berfungsi.
JQuery
Satu lagi penyelesaian hebat ialah membuat bar navigasi menggunakan pemalam JQuery. Menu penyesuaian pada perkhidmatan sedemikian hanya mengambil masa beberapa minit. Plugin itu sendiri boleh dimuat turun di Internet, ia mempunyai antara muka yang mudah dan jelas yang mudah dan mudah digunakan. Jadi tidak sepatutnya ada masalah menyambungkan fail gaya.
Selepas fail gaya disambungkan, anda perlu menulis skrip untuk membuat navigasi adaptif.
Selepas ini, anda perlu mencipta navigasi jika ia belum wujud. Segala-galanya di sini beroperasi mengikut prinsip: "Semua yang bijak adalah mudah." Dalam dokumen HTML anda perlu membuat senarai bertitik tumpu dalam teg nav. Anda boleh menggunakan contoh yang telah diberikan sebelum ini atau versi ringkasnya, yang kelihatan seperti yang ditunjukkan di bawah.
Pada peringkat kerja ini, hanya logo akan dipaparkan dalam penyemak imbas, dan menu itu sendiri akan disembunyikan. Untuk ia muncul, anda perlu menambah fungsi yang menyebabkan perubahan pada pemalam - okayNav.

var navigation = $("#nav-main").okayNav();

Sekarang anda boleh melihat hasil kerja. Dengan lebar biasa tetingkap penyemak imbas, menu ini kelihatan normal sepenuhnya, tetapi jika anda mengurangkan skrin, item terakhir akan hilang. Sebaliknya, tiga titik besar muncul, terletak secara menegak. Apabila ditekan, ia kelihatan terbalik, mengambil kedudukan mendatar, dan item menu tersembunyi didedahkan dalam senarai menegak di penjuru kanan sebelah atas skrin.
Penyelesaian ini kelihatan sangat moden, dan kesan animasi yang digunakan meletakkan sumber dalam cahaya yang baik kepada pelawat.
Joomla
Dan pilihan terakhir untuk mencipta menu adaptif menggunakan sistem Joomla. Ini adalah perkhidmatan penciptaan laman web percuma yang merupakan sistem pengurusan kandungan CMS. Dan seperti yang telah disebutkan pada awalnya, jika tapak dibuat menggunakan CMS, dan anda perlu menukar menu sedia ada kepada penyesuaian, maka yang terbaik adalah untuk mula mencipta fungsi tapak dari teg pertama. Sama seperti dalam contoh sebelumnya, anda perlu membuat senarai menu bertitik tumpu dalam HTML. Hanya untuk setiap item anda perlu menulis kelas anda sendiri. Secara keseluruhan, semuanya kelihatan seperti di bawah.
Seterusnya anda perlu menambah gaya. Sebaiknya tetapkan semua padding kepada 0 px dan gunakan saiz kotak: kotak sempadan. Ini akan memungkinkan untuk mengekalkan lebar elemen yang ditentukan, tidak kira berapa banyak inden yang ada. Seterusnya, anda harus menetapkan lebar elemen menu induk (div) kepada 90% dan kemudian mula menggayakan setiap item secara individu.
Anda boleh mengalih keluar sempadan, menukar warna dan mengisi serta membuat reka bentuk yang akan muncul apabila anda menuding kursor. Pendek kata, lakukan semua yang sesuai dengan reka bentuk sumber. Langkah terakhir untuk mencipta menu Joomla responsif ialah menukarnya. Selalunya, Joomla mencipta menu yang, apabila saiz skrin berubah, dibina semula secara automatik, membahagikan kepada beberapa baris. Ini semua dilakukan dalam CSS, satu-satunya fungsi yang perlu disertakan ialah syarat penyemak imbas silang. Ia membolehkan menu kelihatan sama dalam pelayar yang berbeza.
Fungsi merentas pelayar

Mencipta menu responsif sebenarnya tidak mudah; ia memerlukan pengetahuan dan pengalaman. Semua contoh yang diterangkan hanyalah sebahagian kecil daripada variasi yang mungkin, tetapi ia juga boleh berguna jika seseorang mempunyai pengetahuan asas tentang HTML dan CSS.

Portal dengan menu yang rumit. Kami memutuskan untuk menulis skrip hanya jika kami tidak menemui apa yang kami perlukan dalam talian. Beberapa navigasi berbeza dengan ciri berbeza telah diilhamkan. Nasib baik untuk kami, hampir semuanya ditemui kecuali satu. Walau bagaimanapun, sebelum memulakan kerja menulis menu ini, kami masih berjaya mencari apa yang kami perlukan.
Kami mencuba beberapa menu adaptif. Dalam topik ini, saya memutuskan untuk membuat pilihan yang paling berbaloi dan menarik yang perlu kami cuba. Semua menu penyesuaian tidak sama dan direka bentuk secara eksklusif untuk tugas tertentu.
Jadi. Berikut adalah 5 menu penyesuaian untuk semua majlis.
flexMenu Ini betul-betul menu yang sukar dicari dan fungsinya yang kami akan mula menulis.
flexMenu - menu yang sesuai untuk tapak dengan lebar yang berubah secara dinamik. Ciri utama dan uniknya ialah penambahan item "Lagi" dan pemindahan ke senarai juntai bawah item yang tidak sesuai dengan lebar keseluruhan navigasi. Iaitu, jika kita melihat monitor besar, kita akan melihat semua titik. Sebaik sahaja kami mula mengecilkan tetingkap penyemak imbas, item "Lagi" akan muncul di penghujung menu dan item yang tidak sesuai kerana tetingkap mengecut akan dialihkan secara dinamik ke senarai juntai bawahnya. Oleh itu, kita akan mempunyai menu dengan ketinggian tetap dan lebar "bermain".
Apabila bekerja dengan flexMenu kami menghadapi satu masalah. Dalam kes kami, di sebelah kanan ialah logo dengan float: left;, di sebelah kanan ialah menu ini juga dengan float: left; dan di sebelah kanan dengan apungan: kanan; terdapat satu lagi blok. Apabila mengubah saiz tetingkap penyemak imbas, ternyata blok di sebelah kanan melompat di bawah menu, kemudian semua ini melompat di bawah logo, dan kemudian fungsi pemampatan menu diaktifkan. Cara menangani ciri susun atur ini akan dibincangkan dalam topik seterusnya. Nantikan Kod Menu Navigasi Responsif Contoh hebat menu navigasi. Apabila mengubah saiz tetingkap penyemak imbas, kita akan melihat bahawa item bertindih antara satu sama lain dan diselaraskan dalam lebar. Nampak kemas sangat. Paling penting, menu penyesuaian ini akan kelihatan hebat pada peranti mudah alih dan, yang lebih penting, ia mudah digunakan pada peranti dengan paparan sentuh.
Menu Rata Berbilang peringkat - navigasi adaptifMenu Rata berbilang peringkat ialah menu berbilang peringkat penyesuaian yang berfungsi menggunakan perpustakaan Jquery. Pada monitor desktop kita melihat menu mendatar yang biasa dan biasa. Pada peranti mudah alih, navigasi mendatar berubah menjadi senarai juntai bawah.
Menu Flat berbilang peringkat ialah pilihan yang bagus jika anda perlu menjimatkan ruang pada halaman.

Habr, hello!
Terdapat banyak penyelesaian yang baik daripada pakar berbeza yang muncul di Codepen, dan saya percaya bahawa penyelesaian terbaik harus dikumpulkan di satu tempat. Oleh itu, 2 tahun lalu saya mula menyimpan skrip menarik mengenai pelbagai topik di komputer saya.
Saya pernah menyiarkannya dalam kumpulan produk mr cloud IDE. Gefest, ini adalah himpunan 5-8 penyelesaian. Tetapi sekarang saya telah mula mengumpul 15-30 skrip dalam topik yang berbeza (butang, menu, petua alat, dan sebagainya).
Set besar sedemikian harus ditunjukkan kepada lebih ramai pakar. Itulah sebabnya saya menyiarkannya di Habr. Saya harap mereka akan berguna kepada anda.

Dalam ulasan ini kita akan melihat menu pelbagai peringkat.
Navigasi Mendatar Rata
Bar navigasi yang cantik dengan submenu yang kelihatan lancar. Kod ini berstruktur dengan baik dan menggunakan js. Berdasarkan ciri yang digunakan, ia berfungsi dalam ie8+.
http://codepen.io/andytran/pen/kmAEy
Pengepala Nav Bahan dengan Turun Jajar
Bar pautan penyesuaian dengan submenu dua lajur. Semuanya dilakukan dalam css dan html. Pemilih css3 terpakai yang tidak disokong dalam ie8.
http://codepen.io/colewaldrip/pen/KpRwgQ
Menu Jatuh Turun Akordion Lancar
Menu menegak yang bergaya dengan elemen pembukaan yang lancar. Peralihan, mengubah kod js digunakan.
http://codepen.io/fainder/pen/AydHJ
Menu Navigasi Sebaris Gelap CSS tulen
Bar navigasi menegak gelap dengan ikon daripada ionicon. JavaScript digunakan. Dalam ie8 kemungkinan besar ia akan berfungsi tanpa animasi.
http://codepen.io/3lv3n_snip3r/pen/XbddOO
Menu Dropdown Mega CSS3 Tulen Dengan Animasi
Menu bergaya dengan dua format output: mendatar dan menegak. Ikon dan animasi CSS3 digunakan. Ia pasti akan kelihatan mengerikan dalam ie8, tetapi dalam pelayar lain semuanya sejuk.
Pautan menegak: http://codepen.io/rizky_k_r/full/sqcAn/
Pautan ke mendatar: http://codepen.io/rizky_k_r/pen/xFjqs
Menu Jatuh turun CSS3
Menu mendatar dengan elemen besar dan senarai juntai bawah pautan. Kod bersih dan minimalis tanpa js.
http://codepen.io/ojbravo/pen/tIacg
Menu Jatuh Turun CSS Tulen Mudah
Menu mendatar yang ringkas tetapi bergaya. Menggunakan fon-hebat. Semuanya berfungsi pada css dan html, tanpa js. Ia akan berfungsi dalam ie8.
http://codepen.io/Responsive/pen/raNrEW
Menu lungsur turun 3 mega Bootstrap
Penyelesaian yang sangat baik untuk kedai dalam talian. Memaparkan beberapa peringkat kategori dan imej besar (contohnya, produk yang dijual). Ia berdasarkan boostrap 3.
http://codepen.io/organizedchaos/full/rwlhd/
Navigasi Rata
Bar navigasi bergaya dengan submenu lancar. Dalam pelayar lama ia akan memaparkan masalah.
http://codepen.io/andytran/pen/YPvQQN
Navigasi bersarang 3D
Menu mendatar dengan animasi yang sangat keren tanpa js!
http://codepen.io/devilishalchemist/pen/wBGVor
Menu Mega Responsif - Navigasi
Menu responsif mendatar. Ia kelihatan baik, tetapi versi mudah alih sedikit pincang. CSS, html dan js digunakan.
http://codepen.io/samiralley/pen/xvFdc
Menu Css3 Tulen
Menu asal. Dengan kod mudah dan bersih tanpa js. Gunakan untuk kesan "wow".
http://codepen.io/Sonick/pen/xJagi
Menu Jatuh Turun CSS3 Penuh
Menu lungsur berwarna-warni dengan satu tahap bersarang. Ikon daripada font-awesome, html dan css digunakan.
http://codepen.io/daniesy/pen/pfxFi
Css3 sahaja menu lungsur turun
Menu mendatar yang agak baik dengan tiga peringkat bersarang. Berfungsi tanpa js.
http://codepen.io/riogrande/pen/ahBrb
Menu lungsur turun
Menu minimalis dengan kesan asal senarai elemen bersarang yang muncul. Saya gembira bahawa penyelesaian ini juga tanpa javascript.
http://codepen.io/kkrueger/pen/qfoLa
Menu Jatuh Turun CSS Tulen
Penyelesaian primitif tetapi berkesan. Hanya css dan html.
http://codepen.io/andornagy/pen/xhiJH
Menu Tarik - Konsep Interaksi Menu
Konsep menu yang menarik untuk telefon bimbit. Saya tidak pernah melihat perkara seperti ini sebelum ini. Menggunakan html, css dan javascript.
http://codepen.io/fbrz/pen/bNdMwZ
Buat Menu Jatuh Turun Mudah
Kod yang bersih dan ringkas, tiada js. Ia pasti akan berfungsi dalam ie8.
http://codepen.io/nyekrip/pen/pJoYgb
lungsur turun CSS tulen
Penyelesaiannya tidak buruk, tetapi ia menggunakan terlalu banyak kelas. Saya gembira tiada js.
http://codepen.io/jonathlee/pen/mJMzgR
Menu lungsur turun
Menu menegak yang bagus dengan kod javascript yang minimum. JQuery tidak digunakan!
http://codepen.io/MeedithU/pen/GAinq
Menu Jatuh Turun CSS 3
Menu mendatar dengan kapsyen tambahan boleh menghiasi tapak web anda dengan baik. Kodnya mudah dan jelas. Javascript tidak digunakan.
http://codepen.io/ibeeback/pen/qdEZjR
Penyelesaian yang cantik dengan banyak kod (html, css dan js). 3 format submenu telah dibuat. Penyelesaiannya sangat sesuai untuk kedai dalam talian.
http://codepen.io/martinridgway/pen/KVdKQJ
Dropdown Menu CSS3 (penyelesaian khas)!
Menu mendatar gelap dengan tiga belas (13) pilihan animasi! Saya pasti menasihati anda untuk membacanya, ia akan berguna dalam kehidupan seharian.
http://codepen.io/cmcg/pen/ofFiz
P.S.
Saya harap anda menyukai koleksi 23 penyelesaian. Jika anda ingin terus membacanya, kemudian ambil tinjauan di bawah.
Nikmati kerja anda semua.

Hello kawan-kawan, rakan sekerja! apa khabar? Saya harap semua orang berjaya :) Hari ini kami akan membuat menu penyesuaian yang mudah untuk halaman pendaratan kami. Orang ramai bertanya tentang perkara ini lebih kerap, dan saya menulis soalan sedemikian dan cuba menulis artikel mengenai topik ini pada masa lapang saya.
Terima kasih kerana memberi saya idea baharu dengan cara ini dan membantu membangunkan blog. By the way, apakah topik yang anda ingin baca artikel seterusnya? Sila tulis dalam komen, ini sangat penting bagi saya. Sekarang, mari kita mulakan...
Cara membuat menu responsif untuk laman web
Google telah mengesahkan bahawa bermula dari pertengahan April, responsif laman web untuk peranti mudah alih akan menjadi salah satu faktor kedudukan. Dalam hal ini, semua bahan tentang cara menjadikan halaman pendaratan anda adaptif adalah lebih relevan berbanding sebelum ini. Hari ini saya tidak akan menerangkan apa-apa yang rumit, tetapi sebaliknya, saya akan memberitahu anda cara membuat menu penyesuaian yang sangat mudah dengan masa yang minimum.
Pada asasnya ia akan menjadi html + css, tetapi anda memerlukan skrip yang sangat kecil untuk memproses klik. Jadi…
Menu mendatar responsif
Mari kita mulakan dengan html. Pertama sekali, mari masukkan perpustakaan jquery. Anda mungkin telah menggunakannya untuk masa yang lama, jadi pastikan anda tidak menyambungkannya untuk kali kedua:

Sekarang tanda. Senarai biasa tidak teratur dan div kecil yang mengandungi ikon menu. Ia akan kelihatan hanya pada peleraian rendah.
Harga muat turun
Kenalan
Ulasan

Seperti yang anda lihat, ia tidak rumit, saya fikir anda boleh memperbaikinya sendiri mengikut keperluan.
Sekarang mari tambah gaya:

#menu ( latar belakang: #2ba9c0; lebar: 100%; padding: 10px 0; text-align: center; ) #menu a ( color: #fff; text-decoration: none; padding: 12px 12px; ) #menu a: tuding (bahagian bawah sempadan: 4px pepejal #fff; latar belakang: #078ecb; ) .itemsMenu li (paparan:sebaris; padding-kanan: 35px; lebar:100%; jidar: 0 auto; ) .itemsMenu li img( vertical-align : tengah; jidar-kanan: 10px; ) .iconMenu ( warna: #fff; kursor: penunjuk; paparan: tiada; ) .showitem ( paparan:sekat !penting; ) @media skrin dan (lebar maksimum: 600px) ( # menu a( padding-bottom: 13px; ) #menu a:hover ( border-bottom: none; ) .iconMenu ( display:block; ) .itemsMenu ( display:none; ) .itemsMenu li ( display:block; padding:10px 0; ))

Sekarang, apabila anda mengurangkan tetingkap penyemak imbas, anda akan melihat gambar berikut:

Saya benar-benar tidak ingin menerangkan setiap baris, kerana blog itu bukan tentang susun atur seperti itu. Biar saya cuba jelaskan.

Mula-mula, kami menetapkan paparan: harta sebaris kepada elemen li untuk menjadikannya kelihatan mendatar di sebelah satu sama lain. Saya boleh menggunakan float:left, tetapi saya memutuskan untuk melakukannya dengan cara ini. Dan sembunyikan ikon menu dengan paparan: tiada harta. Apabila resolusi skrin kurang daripada 600 piksel, alih keluar baris sebaris daripada elemen li, sembunyikannya dan tunjukkan ikon. Secara ringkasnya - ya.

Sekarang kita memerlukan skrip mudah yang akan memproses klik pada ikon menu dan menunjukkan elemennya:

$(function() ($(".iconMenu").klik(function() ( if($(".itemsMenu").is(":visible")) ($(".itemsMenu").removeClass(" showitems"); ) else ( $(".itemsMenu").addClass("showitems"); ) )); ));

Macam ni. Saya meletakkannya dalam fail berasingan dan memasukkannya sebelum teg badan penutup.

Itu sahaja. Dengan cara ini anda boleh membuat menu penyesuaian mudah untuk halaman pendaratan anda dengan cepat.

Sudah tentu, terdapat keburukan. Inden dinyatakan dalam piksel, tetapi anda juga boleh menetapkan semua jarak sebagai peratusan. Ia tidak perlu. Jika ini adalah tapak yang lengkap, maka saya akan menggunakan ikon svg atau fon, bukan png dan saya akan mengira semula inden sebagai peratusan. Dan jadi, ia adalah sedikit dadakan :) Saya harap semuanya jelas? Selamat tinggal.

Apabila kami mula bekerja dengan reka bentuk responsif, kami menemui teknik yang berbeza tentang cara terbaik mengendalikan menukar menu navigasi kami untuk skrin resolusi rendah. Kemungkinan kelihatan tidak berkesudahan. Oleh itu, saya akan menunjukkan kepada anda empat pendekatan utama dengan kelebihan dan kekurangannya. Tiga daripadanya dibuat hanya menggunakan CSS dan satu dengan sedikit JavaScript.

Semua pendekatan dalam artikel ini menggunakan kod HTML mudah, yang saya panggil "menu asas". Atribut peranan digunakan untuk menunjukkan jenis tertentu: menu mendatar (mendatar penuh), senarai lungsur turun (pilih), menu lungsur (turun tersuai) dan kanvas.

Strim
Makmal
Projek
Tentang
Kenalan

skrin @media dan (lebar maksimum: 44em) ( )

Strim
Makmal
Projek
Tentang
Kenalan

@media skrin dan (lebar maksimum: 44em) ( nav ( ul > li ( lebar: 100%; ) ) )

Tiada JavaScript diperlukan
Tiada markup tambahan
Kod gaya mudah

Mengambil terlalu banyak ruang skrin

Untuk mencapai kesan ini, kita perlu menambah senarai drop-down pada markup asas. Untuk menjadikannya berfungsi, kami perlu menambah kod JavaScript yang mengubah nilai window.location .href apabila peristiwa onchange berlaku
Strim Projek Makmal Mengenai Kenalan
Menyembunyikan senarai pada skrin besar:
nav ( > pilih ( paparan: tiada; ) )
Pada skrin kecil, kami menyembunyikan menu utama dan menunjukkan senarai juntai bawah. Untuk membantu pengguna memahami bahawa ini ialah menu - kami akan menambah elemen pseudo dengan teks "Menu"
skrin @media dan (lebar maksimum: 44em) ( nav ( ul ( paparan: tiada; ) pilih ( paparan: blok; lebar: 100%; ) &:selepas ( kedudukan: mutlak; kandungan: "Menu"; kanan: 0 ; bawah: -1em; ) ) )
Dengan reka bentuk tambahan, ini adalah cara ia kelihatan pada skrin dengan resolusi rendah:

Tidak mengambil banyak ruang
Menggunakan kawalan "asli".

Memerlukan JavaScript untuk berfungsi
Kandungan pendua berlaku
Senarai jatuh turun gagal digayakan dalam semua pelayar

Ia tidak berfungsi pada versi mudah alih Safari (iOS< 6.0) . Невозможно кликнуть на label в браузере под iOS < 6.0, чтобы сработал input из-за бага. Решается добавлением пустого события onclick на label
Ia tidak berfungsi pada pelayar utama versi OS Android kurang daripada atau sama dengan 4.1.2. Lama dahulu, terdapat pepijat dalam enjin WebKit yang tidak membenarkan penggunaan kelas pseudo dengan gabungan pemilih + dan ~

H1 ~ p ( warna: hitam; ) h1: hover ~ p ( warna: merah; )
Ini tidak memberi kesan kerana penggodam kotak semak menggunakan kelas pseudo :checked dengan pemilih ~. Dan sehingga pepijat dibetulkan dalam WebKit 535.1 (Chrome 13) dan dalam WebKit 534.30, semasa untuk Android 4.1.2, penggodaman tidak berfungsi pada mana-mana peranti dengan Android OS.

Pada skrin besar kami menyembunyikan label.
label ( kedudukan: mutlak; kiri: 0; paparan: tiada; )
Pada skrin kecil kami akan meletakkan menu di luar kandungan tetingkap dan menunjukkan label dan input. Untuk menyembunyikan menu kami menetapkan lebar dan nilai kedudukan negatifnya. Untuk membantu pengguna memahami menu ini, kami juga akan menambah unsur pseudo dengan teks "≡" dalam label (sebagai kod "\2261" untuk digunakan sebagai kandungan unsur pseudo).

@media skrin dan (lebar maksimum: 44em) ( $menu_width: 20em; body ( overflow-x: hidden; ) nav ( position: absolute; left: -$menu_width; width: $menu_width; ul > li ( width: 100 %; ) ) label ( paparan: blok; ) label:selepas ( kedudukan: mutlak; kandungan: "\2261"; ) input:ditanda ~ nav ( kiri: 0; ) input:ditanda ~ .kandungan ( margin-kiri: $ menu_width + .5em; margin-right: -($menu_width + .5em); ) )

Dengan reka bentuk tambahan, ini adalah cara ia kelihatan pada skrin dengan resolusi rendah: