Langkah-langkah pelaksanaan untuk melaksanakan menu navigasi responsif menggunakan CSS tulen-tutorial css-php.cn

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

WBOY

Lepaskan： 2023-10-21 08:30:49

asal

1121 orang telah melayarinya

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>

Salin selepas log masuk

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;

Salin selepas log masuk

}

.menu-item {

margin: 10px 0;

Salin selepas log masuk

}
}

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>

Salin selepas log masuk

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;
}

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!