Cara membuat menu navigasi kompleks menggunakan susun atur CSS Flex

Cara menggunakan susun atur elastik CSS Flex untuk mencipta menu navigasi yang kompleks

Dalam reka bentuk web, menu navigasi adalah salah satu komponen yang sangat penting. Ia bukan sekadar senarai pautan yang ringkas, ia perlu boleh dibaca dan mudah digunakan. Artikel ini akan memperkenalkan cara menggunakan reka letak elastik CSS Flex untuk mencipta menu navigasi yang kompleks dan menyediakan contoh kod khusus.

CSS Flex ialah kaedah untuk membina reka letak halaman web adaptif. Ia berdasarkan paksi utama dan paksi silang, dan menggunakan bekas fleksibel dan item fleksibel untuk mencapai kesan susun atur yang fleksibel. Dalam reka letak fleksibel, kami boleh menentukan lebar, ketinggian, jarak dan penjajaran item secara fleksibel, menjadikannya mudah untuk membuat pelbagai reka letak yang kompleks.

Buat menu navigasi asas

Pertama, kita perlu mencipta menu navigasi asas. Dalam HTML, kita boleh menggunakan senarai tidak tersusun (ul) dan item senarai (li) untuk mencipta struktur menu navigasi. Berikut ialah contoh struktur HTML menu navigasi asas:

<nav>
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

Seterusnya, kita perlu menggunakan CSS Flex untuk susun atur menu navigasi. Kami boleh menggunakan kod CSS berikut untuk menetapkan bekas menu navigasi sebagai bekas fleksibel, menetapkan item senarai sebagai item fleksibel dan menentukan penjajaran paksi utama dan paksi silang:

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Dalam kod di atas, kami menggunakan atribut paparan untuk menukar .menu Elemen ditetapkan kepada lentur, menjadikannya bekas lentur. Kemudian, kami menggunakan atribut justify-content untuk menetapkan penjajaran pada paksi utama kepada ruang-antara, supaya item menu navigasi boleh diagihkan secara sama rata pada paksi utama. Akhir sekali, kami menggunakan sifat align-item untuk menetapkan penjajaran pada paksi silang ke tengah, yang memusatkan item menu navigasi secara menegak.

Melaksanakan susun atur menu navigasi yang kompleks

Untuk melaksanakan susun atur menu navigasi yang kompleks, kami boleh menambah beberapa gaya dan susun atur tambahan berdasarkan reka letak asas. Berikut ialah contoh yang menunjukkan cara membuat menu navigasi dengan submenu:

<nav>
  <ul class="menu">
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">产品</a>
      <ul class="submenu">
        <li><a href="#">产品1</a></li>
        <li><a href="#">产品2</a></li>
        <li><a href="#">产品3</a></li>
      </ul>
    </li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

Dalam kod di atas, kami telah menambah senarai tidak tertib bersarang pada item senarai kedua yang digunakan untuk mencipta submenu. Kami juga perlu menambah beberapa gaya pada submenu, seperti menetapkan sifat paparan kepada tiada untuk menyembunyikan submenu secara lalai. Berikut ialah kod CSS yang sepadan:

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.submenu {
  display: none;
  position: absolute;
}

.menu li:hover .submenu {
  display: block;
}

Dalam kod di atas, kami menggunakan atribut kedudukan untuk menetapkan submenu kepada kedudukan mutlak dan atribut paparan untuk menyembunyikan submenu secara lalai. Kami kemudian menggunakan pemilih kelas pseudo :hover untuk menetapkan sifat paparan submenu untuk disekat untuk memaparkan submenu pada tetikus.

Ini adalah cara untuk mencipta menu navigasi yang kompleks menggunakan reka letak CSS Flex. Dengan menggunakan bekas fleksibel dan item fleksibel secara fleksibel, kami boleh melaksanakan pelbagai susun atur menu navigasi yang kompleks dengan mudah. Saya harap artikel ini boleh membantu kerja anda dalam reka bentuk web!

Ringkasan

Artikel ini memperkenalkan cara menggunakan reka letak anjal CSS Flex untuk mencipta menu navigasi yang kompleks. Berdasarkan reka letak asas, kami melaksanakan menu navigasi dengan submenu dengan menambahkan beberapa gaya dan reka letak tambahan. Dengan menggunakan CSS Flex secara fleksibel untuk susun atur bekas dan item menu navigasi, kami boleh melaksanakan pelbagai susun atur menu navigasi yang kompleks dengan mudah. Saya harap artikel ini dapat membantu anda meningkatkan kemahiran dan kebolehan reka bentuk web anda!

Atas ialah kandungan terperinci Cara membuat menu navigasi kompleks menggunakan susun atur CSS Flex. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!