Tutorial melaksanakan menu gelongsor responsif menggunakan CSS

Tutorial menggunakan CSS untuk melaksanakan menu gelongsor responsif, contoh kod khusus diperlukan

Dalam reka bentuk web moden, reka bentuk responsif telah menjadi Kemahiran penting. Untuk menampung peranti dan saiz skrin yang berbeza, kami perlu menambah menu responsif pada tapak web. Hari ini, kami akan menggunakan CSS untuk melaksanakan menu gelongsor responsif dan memberikan anda contoh kod khusus.

Pertama sekali, mari kita lihat kesan pelaksanaannya. Kami akan mencipta bar navigasi yang runtuh secara automatik apabila lebar skrin lebih kecil daripada ambang tertentu dan mengembang dengan mengklik butang menu. Ini akan membolehkan pengguna melayari laman web kami dengan mudah pada skrin kecil.

struktur HTML:

<nav class="menu">
  <input class="menu__toggle" type="checkbox">
  <ul class="menu__items">
    <li class="menu__item"><a href="#">首页</a></li>
    <li class="menu__item"><a href="#">关于我们</a></li>
    <li class="menu__item"><a href="#">产品</a></li>
    <li class="menu__item"><a href="#">联系我们</a></li>
  </ul>
  <label class="menu__button" for="menu-toggle"></label>
</nav>

gaya CSS:

.menu {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f1f1f1;
  padding: 10px;
}

.menu__toggle {
  display: none;
}

.menu__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.menu__item {
  margin-right: 10px;
}

.menu__item:last-child {
  margin-right: 0;
}

.menu__item a {
  text-decoration: none;
  color: #333;
  padding: 5px;
}

.menu__button {
  width: 30px;
  height: 30px;
  background-color: #333;
  position: relative;
  cursor: pointer;
  display: none;
}

.menu__button::after,
.menu__button::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  background-color: #fff;
  top: 50%;
  left: 50%;
  margin-top: -1px;
  margin-left: -10px;
}

.menu__button::before {
  transform: translateY(-6px);
}

.menu__button::after {
  transform: translateY(6px);
}

Dalam kod di atas, kami menggunakan beberapa sifat CSS asas dan pemilih untuk mencapai menu gelongsor respons . Mari analisa kod ini satu persatu.

Pertama, kami menambah bekas dengan nama kelas menu untuk bar navigasi. Bekas ini digunakan untuk membalut keseluruhan bar navigasi dan menetapkan beberapa gaya asas, seperti warna latar belakang dan pelapik. menu的容器。这个容器用于包裹整个导航栏，并设置了一些基本的样式，比如背景颜色和内边距。

其次，我们添加了一个用于控制菜单展开与折叠的复选框。这个复选框默认是隐藏的，当我们点击菜单按钮时，它会被选中，从而使菜单项显示出来。

然后，我们为菜单项添加了一个无序列表，并设置了样式。我们使用flex

Kedua, kami menambahkan kotak pilihan untuk mengawal pengembangan dan keruntuhan menu. Kotak semak ini disembunyikan secara lalai, dan apabila kami mengklik butang menu, ia akan dipilih, menyebabkan item menu muncul.

Kemudian, kami menambah senarai item menu dan set gaya yang tidak tersusun. Kami menggunakan reka letak flex untuk menyusun item menu secara mendatar, dan menetapkan beberapa jarak dan gaya.

Akhirnya, kami menggayakan butang menu. Di sini kami menggunakan elemen pseudo untuk menggayakan butang, dan menggunakan kedudukan mutlak untuk meletakkan elemen pseudo di tengah-tengah butang. Selepas mengklik butang, item menu akan berkembang. #🎜🎜##🎜🎜#Di atas ialah tutorial mudah menggunakan CSS untuk melaksanakan menu gelongsor responsif. Dengan menggunakan sifat CSS dan pemilih secara fleksibel, kami boleh membuat menu responsif dengan mudah yang menyesuaikan dengan saiz skrin yang berbeza. Semoga tutorial ini bermanfaat! #🎜🎜#

Atas ialah kandungan terperinci Tutorial melaksanakan menu gelongsor responsif menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!