Petua dan kaedah untuk melaksanakan kesan khas menu bar sisi dengan CSS

Petua dan kaedah untuk melaksanakan kesan khas menu bar sisi dengan CSS

Dalam beberapa tahun kebelakangan ini, dengan pembangunan reka bentuk web, menu bar sisi telah menjadi salah satu elemen biasa dalam banyak halaman web. Sama ada ia digunakan untuk fungsi navigasi atau paparan kandungan, ia boleh membawa kemudahan dan pengalaman pengguna yang lebih baik kepada pengguna. Artikel ini akan memperkenalkan beberapa teknik dan kaedah CSS biasa untuk membantu anda melaksanakan menu bar sisi yang cantik dan istimewa.

1. Susun atur asas dan tetapan gaya

Pertama, kita perlu menetapkan susun atur asas dan gaya menu bar sisi. Anda boleh menggunakan elemen div untuk mewakili keseluruhan bar sisi, dan kemudian letakkan item menu di dalamnya, seperti yang ditunjukkan di bawah:

<div class="sidebar">
  <ul>
    <li><a href="#">菜单项1</a></li>
    <li><a href="#">菜单项2</a></li>
    <li><a href="#">菜单项3</a></li>
    <li><a href="#">菜单项4</a></li>
  </ul>
</div>

Kemudian, tetapkan gaya yang sepadan dalam CSS, dan anda boleh menggunakan reka letak flexbox untuk mencapai bar sisi adaptif, kod Seperti berikut :

.sidebar {
  width: 250px;  /* 侧边栏的宽度 */
  height: 100%;  /* 侧边栏的高度 */
  background-color: #f1f1f1;  /* 背景颜色 */
  display: flex;
  flex-direction: column;  /* 设置为纵向排列 */
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar ul li {
  padding: 10px;
}

.sidebar ul li a {
  text-decoration: none;
  color: #333;
}

.sidebar ul li:hover {
  background-color: #ccc;  /* 鼠标悬停时的背景颜色 */
}

Dengan susun atur asas dan tetapan gaya di atas, kita sudah boleh mendapatkan gaya menu sidebar yang ringkas. Seterusnya, mari kita beralih kepada menambah kesan khas.

2. Kesan melipat/mengembangkan

Salah satu kesan khas yang biasa ialah kesan lipatan/mengembangkan, iaitu apabila tetikus mengklik pada item menu, menu akan mengembang atau runtuh untuk menunjukkan atau menyembunyikan submenu. Kita boleh menggunakan pemilih kelas pseudo dalam CSS: sasaran dan ubah atribut untuk mencapai kesan ini.

Pertama, kita perlu menambah id unik pada setiap item menu, dan kemudian tetapkan gaya yang sepadan pada senarai submenu yang sepadan dengan item menu. Kod khusus adalah seperti berikut:

<div class="sidebar">
  <ul>
    <li><a href="#submenu1">菜单项1</a>
      <ul id="submenu1">
        <li><a href="#">子菜单项1-1</a></li>
        <li><a href="#">子菜单项1-2</a></li>
        <li><a href="#">子菜单项1-3</a></li>
      </ul>
    </li>
    <li><a href="#submenu2">菜单项2</a>
      <ul id="submenu2">
        <li><a href="#">子菜单项2-1</a></li>
        <li><a href="#">子菜单项2-2</a></li>
        <li><a href="#">子菜单项2-3</a></li>
      </ul>
    </li>
    <li><a href="#">菜单项3</a></li>
    <li><a href="#">菜单项4</a></li>
  </ul>
</div>

Kemudian, tambah gaya berikut dalam CSS untuk mencapai kesan lipatan/perkembangan:

.sidebar ul li ul {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;  /* 设置动画过渡效果 */
}

.sidebar ul li:target ul {
  height: auto;  /* 子菜单展开时的高度 */
}

Dengan tetapan ini, apabila item menu diklik, submenu yang sepadan akan berkembang dan mempunyai peralihan animasi kesan .

3. Kesan khas gelongsor

Satu lagi kesan khas yang biasa digunakan ialah kesan gelongsor, iaitu item menu akan meluncur ke kiri atau ke kanan apabila tetikus dilegar. Kita boleh menggunakan atribut transform dalam CSS untuk mencapai kesan ini.

Mula-mula, tambahkan gaya berikut pada CSS untuk mencapai kesan gelongsor:

.sidebar ul li {
  position: relative;
  overflow: hidden;
}

.sidebar ul li:hover {
  background-color: #ccc;  /* 鼠标悬停时的背景颜色 */
}

.sidebar ul li a {
  display: block;
  transition: transform 0.3s ease;  /* 设置动画过渡效果 */
}

.sidebar ul li a:hover {
  transform: translateX(20px);  /* 设置滑动的距离 */
}

Dengan tetapan ini, apabila tetikus melayang di atas item menu, item menu akan meluncur 20 piksel ke kanan, memberikan pengguna pengalaman visual interaktif .

Ringkasan:

Dengan petua dan kaedah di atas, kita boleh melaksanakan menu bar sisi dengan kesan istimewa dengan mudah. Sudah tentu, sebagai tambahan kepada kesan khas yang disebutkan di atas, terdapat banyak lagi kesan khas yang boleh anda cuba, seperti fade in dan fade out, putaran, dll. Saya harap artikel ini dapat membantu anda, dan saya berharap anda lebih banyak inspirasi dan kreativiti semasa mereka bentuk menu bar sisi anda!

Atas ialah kandungan terperinci Petua dan kaedah untuk melaksanakan kesan khas menu bar sisi dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!