Yayasan 6: Komponen Menu Baru

Sistem Menu Diteruskan Yayasan 6: Satu komponen yang boleh disesuaikan menggantikan pelbagai pilihan warisan.

Penambahbaikan utama:

<li> Komponen menu Bersepadu: Yayasan 6 menyatukan senarai inline, navigasi sampingan, bar ikon, dan sub-navigasi ke dalam komponen "menu" yang sangat disesuaikan. Ini memudahkan pembangunan dan mengurangkan saiz kerangka. Reka bentuk responsif: <li> Buat menu yang menyesuaikan secara dinamik merentasi saiz dan peranti skrin yang berbeza menggunakan asas kod tunggal. Ini menghapuskan keperluan untuk menu berasingan untuk desktop dan mudah alih. Plugin JavaScript: Meningkatkan fungsi dengan plugin seperti dropdown, drilldown, dan akordion menu, semuanya boleh diakses melalui navigasi papan kekunci. Rangka Kerja ringan: <li> Penggabungan struktur menu telah menghasilkan pengurangan saiz kerangka yang ketara (lebih daripada 1000 baris CSS dikeluarkan), yang membawa kepada masa pemuatan yang lebih cepat dan penyelenggaraan yang lebih mudah. Peningkatan bar atas: Komponen bar atas kini menyokong bahagian kiri dan kanan untuk menu dan termasuk togol responsif untuk skrin yang lebih kecil. <li> <li> Menu Bangunan di Yayasan 6: Struktur menu teras adalah mudah: A

elemen dengan kelas

, yang mengandungi <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174018427922160.jpg" class="lazy" alt="Foundation 6: The New Menu Component "> item dan

tag untuk pautan. Kelas tambahan mengawal penampilan dan tingkah laku menu.

Menu mudah: <ul></ul> Gunakan kelas menu untuk menghapuskan gaya lalai dan buat rupa sepenuhnya. <li> <a></a>

<li> Menu mendatar/menegak:

lalai adalah mendatar. Tambahkan kelas untuk orientasi menegak. .simple

<li> Menu bersarang (submenus):

Gunakan bersarang <strong> </strong> unsur -unsur dengan kelas untuk submenus dalam menu menegak. Untuk interaksi yang lebih kompleks, gunakan dropdown, drilldown, atau plugin akordion. .vertical

<li>

Menu ikon: memasukkan ikon menggunakan unsur (menggunakan font ikon Yayasan) atau tag imej dalam tag <ul></ul>. Ikon kedudukan .nested kelas di atas teks menu.

<li>

dropdown, drilldown, dan akordion menu: plugin berkuasa JavaScript ini menawarkan menu dinamik, interaktif. Gunakan atribut <i class="fi-..."></i>, <a></a>, dan .icon-top masing -masing untuk membolehkan ciri -ciri ini. Pengendalian acara membolehkan tindakan tersuai (mis.,

untuk penutupan akordion). <li>

Navigasi responsif: Gunakan atribut data-responsive-menu untuk menentukan jenis menu yang berlainan untuk pelbagai saiz skrin (mis., small-dropdown, medium-drilldown).

<li>

bar atas dengan bahagian kiri/kanan: Gunakan kelas .top-bar-left dan .top-bar-right dalam bekas .top-bar untuk membuat menu dengan bahagian di kedua -dua belah pihak. Togol responsif () memaparkan butang menu pada skrin yang lebih kecil. data-responsive-toggle

Contoh

(menu mendatar mudah): <strong> </strong>

<ul class="menu">
  <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Option 1</a></li>
  <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Option 2</a></li>
  <li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">Option 3</a></li>
</ul>

Kesimpulan: <strong> </strong>

sistem menu yang direka bentuk semula Yayasan 6 menawarkan peningkatan yang ketara dalam kedua -dua fungsi dan kemudahan penggunaan. Pendekatan bersatu memudahkan pembangunan, mengurangkan saiz kod, dan meningkatkan responsif, menjadikannya alat yang berkuasa untuk membina laman web moden dan fleksibel.

Atas ialah kandungan terperinci Yayasan 6: Komponen Menu Baru. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!