Langkah-langkah pelaksanaan untuk melaksanakan menu navigasi responsif menggunakan CSS tulen

CSS tulen ialah cara pantas untuk mencipta menu navigasi responsif tanpa menggunakan JavaScript. Dalam artikel ini, kami akan memberikan anda langkah terperinci untuk melaksanakan menu navigasi responsif, dengan contoh kod konkrit.

Langkah 1: Struktur HTML
Pertama, kita perlu menetapkan struktur HTML menu navigasi. Berikut ialah contoh mudah:

<li class="menu-item">首页</li>
<li class="menu-item">关于我们</li>
<li class="menu-item">服务</li>
<li class="menu-item">联系我们</li>

Langkah 2: Penggayaan CSS
Seterusnya, kami akan menggayakan menu navigasi. Berikut ialah beberapa tetapan penggayaan asas:

.navbar {
background-color: #f2f2f2;
padding: 10px;
}

.menu {
list-style: none;
display: flex;
justify-content: center justify-content ;
}

.menu-item {
margin: 0 10px;
}

Dalam contoh ini, kami meletakkan menu navigasi dalam bar navigasi dengan warna latar belakang dan menggunakan susun atur CSS Flexbox untuk membuat item menu Jajaran secara mendatar dan pusat.

Langkah 3: Reka Letak Responsif
Untuk melaksanakan menu navigasi responsif, kita perlu menggunakan pertanyaan media. Pertanyaan media boleh menukar gaya berdasarkan lebar peranti untuk menampung saiz skrin yang berbeza.

@skrin media dan (lebar maksimum: 768px) {
.menu {

flex-direction: column;
align-items: center;

}

.menu-item {

margin: 10px 0;

}
}

Dalam kod di atas, apabila peranti atau lebarnya kurang sama dengan 768px , kami menggunakan pertanyaan media untuk menukar reka letak menu navigasi. Kami menyusun item menu secara menegak dan menyelaraskannya ke tengah.

Langkah 4: Menu Turun
Kadangkala, menu navigasi mungkin mengandungi berbilang item submenu. Untuk memberikan pengalaman pengguna yang lebih baik pada skrin kecil, kami boleh menambah ciri menu lungsur.

Pertama, kita perlu mengubah suai struktur HTML dan menambah teg menu lungsur untuk item submenu:

<li class="menu-item">首页</li>
<li class="menu-item dropdown">
  关于我们
  <ul class="dropdown-menu">
    <li class="dropdown-menu-item">公司简介</li>
    <li class="dropdown-menu-item">团队</li>
    <li class="dropdown-menu-item">历史</li>
  </ul>
</li>
<li class="menu-item">服务</li>
<li class="menu-item">联系我们</li>

ul>

Seterusnya, kita perlu menambah gaya pada menu lungsur turun:

.dropdown {
position: relative;
}

.dropdown-menu {
display: none ;
kedudukan: mutlak;
atas: 100%;
warna latar belakang: #f2f2f2;
padding: 10px;
}

.dropdown:hover .dropdown-menu {
paparan: block;
}

, kami menggunakan kedudukan relatif Letakkan menu lungsur turun berbanding item menu induk. Menu lungsur turun digayakan untuk diletakkan secara mutlak, dengan lebar 100% dan warna latar belakang #f2f2f2. Menu lungsur turun akan muncul apabila tetikus melayang di atas item menu induk.

Ringkasan:

Melalui langkah di atas, kami berjaya melaksanakan menu navigasi responsif CSS tulen. Menggunakan pertanyaan media dan beberapa penggayaan CSS asas, kami boleh membuat menu navigasi dengan mudah yang menyesuaikan dengan saiz skrin yang berbeza. Kaedah ini bukan sahaja mudah dan mudah digunakan, tetapi juga memberikan pengalaman pengguna yang baik. Anda boleh melaraskan lagi gaya dan susun atur mengikut keperluan anda.

Atas ialah kandungan terperinci Langkah-langkah pelaksanaan untuk melaksanakan menu navigasi responsif menggunakan CSS tulen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!