Membina menu mega dengan flexbox

mata teras

Flexbox adalah model susun atur CSS yang membolehkan pemaju membuat UI yang kompleks tanpa bergantung pada helah CSS dan JavaScript yang berlebihan. Ia menggunakan model susun atur linear, menjadikannya lebih mudah untuk kandungan susun atur secara mendatar atau menegak tanpa pengiraan jarak.
Flexbox boleh digunakan untuk membuat laman web dengan menu navigasi gergasi. Model susun atur ini membolehkan membuat bar navigasi mudah, segmen menu drop-down tunggal, dan mengehadkan segmen menu drop-down tunggal ke tiga lajur. Susun atur Flex responsif terhadap unsur -unsur dalam bekas, mengurangkan keperluan untuk pertanyaan media.
Menu mega akhir yang dibuat dalam tutorial ini tidak responsif sepenuhnya. Bar menu utama akan muncul pada skrin yang lebih kecil, tetapi menu gergasi tidak akan tersedia, hanya pautan peringkat atas yang tersedia. Walau bagaimanapun, tutorial ini merupakan demonstrasi yang baik tentang kuasa dan kesederhanaan Flexbox.
Navigasi menu gergasi sangat berguna untuk memaparkan semua pilihan dan boleh digunakan dengan berkesan di laman web e-dagang. Walau bagaimanapun, adalah penting untuk mempertimbangkan kebolehgunaan ciri -ciri tersebut dan memahami kebaikan dan keburukan mereka sebelum pelaksanaan.

Seperti yang anda ketahui, Flexbox telah menarik banyak perhatian baru -baru ini apabila sokongan penyemak imbas telah meningkat. Ia membolehkan pemaju untuk membina UI yang kompleks tanpa bergantung pada css dan helah JavaScript yang berlebihan.

Flexbox menggunakan model susun atur linear, yang membolehkan kita untuk kandungan susun atur secara mendatar atau menegak tanpa pengiraan jarak. Susun atur Flex responsif terhadap unsur -unsur dalam bekas, mengurangkan keperluan untuk pertanyaan media.

Dalam artikel ini, saya akan menggunakan model susun atur ini untuk membina menu navigasi gergasi, dan dalam proses ini anda akan melihat betapa mudahnya untuk membina dan memperluaskan komponen UI menggunakan Flexbox.

Saya tidak akan membincangkan sifat flexbox individu secara terperinci di sini, tetapi fokus pada aplikasi praktikal ciri -ciri ini. Untuk pengenalan asas kepada Flexbox, sila rujuk sumber -sumber berikut:

Tutorial Flexbox Guy Routledge

• Flexbox Beginner Friendly PENGENALAN
• Panduan Lengkap Flexbox
Apa yang akan kita bina?

Untuk mengetahui apa yang saya akan tunjukkan cara membina, lihat codepen skrin penuh.

Tutorial ini dibahagikan kepada tiga bahagian:

Bina bar navigasi: Gunakan Flexbox untuk membina bar navigasi mudah untuk platform e-dagang fiksyen kami

1. Bina segmen menu drop-down tunggal
2. Hadkan segmen menu drop-down tunggal ke tiga lajur
Bina bar navigasi

Penanda bar navigasi adalah mudah. Untuk tujuan demonstrasi, saya akan menggunakan dua kelas (navbar dan menu) untuk mengendalikan segala -galanya. CSS di sini akan mengecualikan sebarang gaya yang tidak berkaitan dengan tutorial ini.

Kelas

navbar bertanggungjawab untuk memusatkan bar navigasi kami di ruang yang ada, tetapi saya akan memberi tumpuan kepada kelas menu, di mana saya akan menggunakan Flexbox.

<nav class="navbar">
  <ul class="menu">
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i></li>
    </ul>
</nav>

Saya mahu item navigasi saya disusun secara mendatar. Juga, saya mahu setiap item dijangka sama dan sempit atas permintaan jika terdapat ruang yang tidak mencukupi.

3 Sekarang semua kanak -kanak langsung dari elemen .mu (iaitu, bekas flex) akan menjadi projek flex.

display: flex Seterusnya, saya mahu item menu menjadi lebar yang sama. Saya menambah

untuk menjadikannya tumbuh sama rata dengan lebar yang sama. Inilah kod:

flex: 1

Lihat kod, anda mungkin tertanya -tanya mengapa saya menggunakan semula semua projek Flex (.Navbar .Menu Li).

<nav class="navbar">
  <ul class="menu">
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i></li>
    </ul>
</nav>

Dalam demo, warna latar belakang berubah apabila anda melayang ke atas item menu. Sekiranya saya tidak menetapkan sifat display: flex projek flex ke

, hanya elemen LI akan mempunyai lebar yang sama, dan kandungan dalamannya tidak akan (iaitu, beberapa bahagian yang diserlahkan dapat diklik, sementara yang lain tidak dapat diklik ).

display Untuk membuat kandungan berkembang ke seluruh lebar elemen induknya, saya menghidupkan projek Flex itu sendiri menjadi bekas flex. Dengan tetapan ini, saya boleh membuat setiap elemen bersarang selebar sebagai ibu bapanya (menggunakan flex), menjadikan seluruh kawasan yang diklik diklik.

Sebagai alternatif, saya juga boleh mencapai ini tanpa menetapkan elemen LI ke bekas Flex, tetapi saya perlu menggunakan tiga sifat tambahan (flex: 1,

,

), dan saya lebih suka mengelakkan keadaan ini . display: inline-block width: 100% Demo ini menunjukkan apa yang telah dilakukan setakat ini. box-sizing: border-box

Hanya dalam lima sifat CSS Flexbox, bar navigasi sudah siap. Seperti yang anda lihat, ini adalah penyelesaian yang kemas.

Di bahagian seterusnya, saya akan menunjukkan kepada anda sebahagian daripada cara membina navigasi gergasi.

Bina segmen menu drop-down tunggal

Berikut adalah markup yang akan digunakan untuk membina segmen menu drop-down tunggal yang akan diperluas ke pelbagai segmen. Projek Container__List akan disalin untuk membuat segmen tambahan.

bekas adalah bekas flex, dan setiap elemen kanak -kanak langsung (iaitu container__list) adalah projek flex. Setiap container__ed mempunyai pelbagai item navigasi, masing -masing dibungkus oleh container__listitem. Saya telah membungkus kandungan di Div dan saya akan kembali ke sana kemudian.

.navbar .menu {
  display: flex;
  position: relative;
}

.navbar .menu li {
  flex: 1;
  display: flex;
  text-align: center;
}

.navbar .menu a {
  flex: 1;
  justify-content: center;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
  padding: 20px;
}

Berikut adalah CSS:

Perhatikan bahawa saya menggunakan harta

pada container__list, tetapi saya tidak menggunakannya untuk bar navigasi itu sendiri. Seperti yang dinyatakan sebelum ini, saya tidak mahu barangan bar navigasi dibungkus apabila terdapat ruang yang tidak mencukupi. Sebaliknya, mereka mengecut sama rata apabila ruang mendatar yang ada berkurangan.

<ul class="container">
  <div class="container__list">
    <div class="container__listItem">
      <div>Televisions</div>
    </div>
  </div>
</ul>

Walau bagaimanapun, untuk projek Container__List, keperluannya adalah sebaliknya. Saya mahu item senarai saya menggunakan 25% ruang, supaya setiap baris memegang sehingga empat item, yang boleh saya lakukan dengan

. flex-wrap

Saya juga menetapkan

hingga 0. Ini berguna kerana ia menghalang item yang diedarkan secara merata kurang daripada empat. Dengan menetapkannya kepada 0, saya memaksa projek untuk menyimpan 25% ruang. flex-wrap: wrap

bagaimana dengan kandungan yang dibungkus div sekarang? Saya ingin menangani situasi di mana anda mungkin mahu mengelakkan kandungan daripada melimpah. Ini sangat mudah apabila kandungan anda berada di dalam elemen Flex Child (iaitu kontena__listitem). Saya boleh menggantikan teks potong dengan ellipsis ("...") menggunakan kod berikut.

<nav class="navbar">
  <ul class="menu">
    <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Electronics</a><i> class="fa fa-angle-down"></i></li>
    </ul>
</nav>

Walau bagaimanapun, dalam kes ini saya meletakkan kandungan dalam div yang dibungkus oleh container__listitem. Oleh itu, penyelesaian di atas tidak akan berfungsi. Artikel Flexbox dan teks dipotong memberikan penyelesaian. Dalam kod berikut, baris berikut dalam setiap blok pengisytiharan "kemas kini" adalah garis yang mengendalikan masalah ini:

.navbar .menu {
  display: flex;
  position: relative;
}

.navbar .menu li {
  flex: 1;
  display: flex;
  text-align: center;
}

.navbar .menu a {
  flex: 1;
  justify-content: center;
  color: https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bffffff;
  padding: 20px;
}

Hadkan segmen menu drop-down tunggal ke tiga lajur

Pada peringkat ini, kebanyakan kerja telah selesai. Untuk bahagian lain, saya akan menambah seksyen drop-down yang lain, yang saya akan memaksa membatasi tiga item lajur.

Seperti yang disebutkan sebelumnya, saya akan menyalin Container__List dua kali dan menggunakannya untuk segmen menu drop-down baru yang dipanggil "Peralatan". Ini adalah untuk tujuan demonstrasi. Dalam contoh praktikal, anda mungkin menjana senarai melalui JavaScript atau dalam bahasa backend.

Saya akan menambah kelas Has-Multi untuk menyesuaikan antara muka pengguna. Menggunakan kelas ini, saya perlu mengatasi beberapa sifat.

<ul class="container">
  <div class="container__list">
    <div class="container__listItem">
      <div>Televisions</div>
    </div>
  </div>
</ul>

di sini, saya tetapkan flex-basis hingga 33.333%, kerana saya mahu tiga bahagian dipaparkan di dalam bekas. Saya telah menukar hanya flex-basis, tetapi dua sifat lain flex-grow dan flex-shrink telah diwarisi dari kod seksyen tunggal. Ini memberi saya fleksibiliti apabila Container__List kurang daripada tiga. Sekiranya terdapat hanya dua senarai, projek Container__List akan berkembang dan memperuntukkan ruang di antara mereka. Iaitu, setiap item akan menduduki 50% daripada jumlah lebar.

Perhatikan bahawa .container__listitem ditetapkan kepada flex-basis: 100%, yang memastikan bahawa hanya ada satu lajur dalam container__list. Saya boleh menggunakan 50% untuk membenarkan dua lajur setiap bahagian.

Beberapa nota mengenai kebolehgunaan menu gergasi

Saya telah memilih menu mega sebagai contoh saya tanpa mempertimbangkan kebolehgunaannya terlalu banyak. Sebelum menggunakan ciri -ciri tersebut, saya telah menyediakan beberapa sumber untuk membincangkan kebaikan dan keburukannya.

Pada pendapat saya, navigasi menu mega sangat berguna untuk memaparkan semua pilihan, dan gaya navigasi ini boleh digunakan dengan berkesan untuk laman web e-dagang. Saya suka navigasi Intel.

• Kelebihan Ketersediaan dan Kekurangan Menu Mega (Mega Menu Bahagian 1)
• Menu gergasi sesuai untuk navigasi laman web
• Menu drop-down gergasi

Kesimpulan

harus diperhatikan bahawa menu mega akhir dalam tutorial ini tidak responsif sepenuhnya. Bar menu utama akan muncul pada skrin yang lebih kecil, tetapi menu gergasi tidak akan tersedia, hanya pautan peringkat atas yang tersedia. Untuk tujuan tutorial ini, ini sepatutnya mencukupi. Jangan ragu untuk menyalin demo dan memperbaikinya jika anda lebih suka.

Sistem navigasi menu drop-down gergasi adalah cara yang baik untuk menunjukkan kuasa dan kesederhanaan Flexbox, dan saya harap saya telah menyampaikannya dalam tutorial ini. Seperti yang anda lihat, Flexbox bukan sahaja digunakan untuk memusatkan kandungan.

Jika anda menggunakan teknologi berasaskan Flexbox yang berbeza untuk membina sistem menu mega, jangan ragu untuk memberitahu kami dalam komen.

Kemas kini: Saya telah membina versi mesra mudah alih yang responsif menu mega yang boleh anda temukan dalam demo Codepen ini.

FAQ untuk membina menu mega dengan flexbox (FAQ)

bagaimana membuat menu mega saya responsif dengan flexbox?

Sangat mudah untuk membuat menu mega responsif dengan Flexbox. Anda boleh menggunakan pertanyaan media untuk menyesuaikan susun atur menu mengikut saiz skrin. Sebagai contoh, anda boleh menyusun item menu secara menegak pada skrin yang lebih kecil dan memaparkannya secara mendatar pada skrin yang lebih besar. Anda juga boleh menggunakan harta Flex-Wrap untuk membolehkan item menu membungkus ke beberapa baris jika perlu. Ingat untuk menguji menu anda pada peranti yang berbeza untuk memastikan ia kelihatan hebat dan berfungsi pada semua saiz skrin.

Bolehkah saya membuat menu mega pelbagai peringkat menggunakan Flexbox?

Ya, anda boleh membuat menu mega pelbagai peringkat menggunakan Flexbox. Anda boleh bersarang Flex Containers antara satu sama lain untuk membuat navigasi pelbagai peringkat. Setiap peringkat boleh dipaparkan atau tersembunyi menggunakan CSS dan JavaScript. Ini membolehkan anda membuat struktur navigasi kompleks yang masih mudah untuk menavigasi dan difahami.

Bagaimana untuk menambah animasi ke menu mega flexbox saya?

Anda boleh menggunakan peralihan dan transformasi CSS untuk menambah animasi ke menu Mega Flexbox. Sebagai contoh, anda boleh menggunakan peralihan untuk menghidupkan dengan lancar pembukaan dan penutupan submenu. Anda juga boleh menggunakan transformasi untuk menghidupkan pergerakan item menu. Ingatlah untuk memastikan kehalusan dan konsistensi animasi supaya tidak mengelirukan atau mengalihkan perhatian pengguna.

Bagaimana untuk meningkatkan akses ke menu flexbox mega?

Meningkatkan kebolehcapaian menu Mega Flexbox melibatkan beberapa langkah. Pertama, pastikan menu anda dilayari melalui papan kekunci. Ini bermakna pengguna boleh menggunakan kekunci Tab dan kekunci anak panah untuk menavigasi dalam menu. Kedua, gunakan peranan dan atribut ARIA untuk memberikan maklumat tambahan mengenai menu kepada teknologi bantuan. Ketiga, pastikan menu anda mempunyai kontras yang cukup dan mudah dibaca.

Bolehkah saya membuat menu mega melekit menggunakan flexbox?

Ya, anda boleh membuat menu mega melekit menggunakan Flexbox. Anda boleh menggunakan harta "Sticky: Sticky" CSS untuk membuat tampalan menu ke bahagian atas halaman sebagai skrol pengguna. Ini memastikan bahawa menu sentiasa kelihatan dan boleh diakses, walaupun pada halaman yang panjang.

Bagaimana untuk menambah ikon ke menu mega flexbox saya?

anda boleh menambah ikon ke menu mega flexbox menggunakan fon ikon atau SVG. Anda boleh menggunakan atribut Flex untuk mengawal saiz dan jarak ikon. Anda juga boleh menggunakan CSS untuk menukar warna dan hover kesan ikon.

Bagaimana untuk menambah bar carian ke menu mega flexbox saya?

Anda boleh menambah bar carian ke menu mega flexbox dengan membuat item flex yang mengandungi borang dengan medan input dan hantar butang. Anda boleh menggunakan atribut Flex untuk mengawal saiz dan kedudukan bar carian. Anda juga boleh menggunakan CSS untuk gaya bar carian untuk memadankan seluruh menu.

Bagaimana untuk menambah menu dropdown ke menu mega flexbox saya?

Anda boleh menambah menu drop-down ke menu mega flexbox dengan membuat bekas Flex bersarang. Anda boleh menggunakan CSS untuk menyembunyikan menu drop-down secara lalai dan memaparkannya apabila pengguna melayang ke atas item menu induk. Anda juga boleh menggunakan JavaScript untuk menambah interaktiviti tambahan ke menu lungsur, seperti menutupnya apabila pengguna mengklik di luar menu lungsur.

Bagaimana untuk menambah menu mudah alih bertukar -tukar ke menu mega flexbox saya?

3 Anda boleh menggunakan pertanyaan media untuk menyembunyikan togol pada skrin yang lebih besar dan memaparkannya pada skrin yang lebih kecil. Anda juga boleh menggunakan JavaScript untuk bertukar -tukar sifat "paparan" menu apabila butang diklik.

Bagaimana untuk mengoptimumkan prestasi menu flexbox mega?

Mengoptimumkan prestasi menu Mega Flexbox melibatkan beberapa langkah. Pertama, pastikan CSS dan JavaScript anda dikutuk dan dimampatkan untuk mengurangkan saiz fail mereka. Kedua, gunakan peralihan dan transformasi CSS ke animasi dan bukannya JavaScript kerana mereka melakukan lebih baik. Ketiga, gunakan pertanyaan media untuk memuat gaya dan skrip yang berbeza mengikut saiz skrin, dengan itu mengurangkan jumlah pemuatan kod yang tidak perlu.

Atas ialah kandungan terperinci Membina menu mega dengan flexbox. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!