jquery menyedari pengecutan kiri dan kanan bar menu kiri-Soal Jawab bahagian hadapan-php.cn

jquery menyedari pengecutan kiri dan kanan bar menu kiri

王林

Lepaskan： 2023-05-28 10:06:07

asal

852 orang telah melayarinya

Apabila fungsi tapak web menjadi semakin kompleks, bar menu kiri telah menjadi ciri standard hampir semua halaman web. Walau bagaimanapun, sesetengah pereka mungkin berpendapat bahawa bar menu mengambil terlalu banyak ruang pada halaman web dan mengurangkan estetika halaman web. Untuk menyelesaikan masalah ini, anda boleh menggunakan jQuery untuk merealisasikan fungsi mengecut kiri dan kanan bar menu.

Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mencapai kesan pengecutan kiri dan kanan bar menu kiri.

Struktur HTML

Pertama, kita perlu membina struktur HTML asas. Kodnya adalah seperti berikut:

<div class="menu">
  <div class="menu-toggle">
    <i class="fa fa-bars"></i>
  </div>
  <ul class="menu-list">
    <li><a href="#">Menu 1</a></li>
    <li><a href="#">Menu 2</a></li>
    <li><a href="#">Menu 3</a></li>
  </ul>
</div>

Salin selepas log masuk

Di sini kami mencipta bekas div bernama "menu", yang mengandungi dua sub-elemen: "menu-togol" dan "menu-senarai".

Gaya CSS

Seterusnya, kita perlu menambah gaya CSS pada bar menu. Kodnya adalah seperti berikut:

.menu {
  width: 250px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #333;
  color: #fff;
  overflow-x: hidden;
}

.menu-toggle {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  background-color: #555;
  color: #fff;
  z-index: 999;
}

.menu-list {
  margin-top: 50px;
  padding: 0;
  list-style: none;
}

.menu-list li {
  padding: 10px;
}

.menu-list li a {
  color: #fff;
  text-decoration: none;
}

/* 隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}

Salin selepas log masuk

Dalam gaya CSS ini, kami menetapkan lebar dan ketinggian bar menu, serta kedudukan kedudukan mutlak. Kemudian tambahkan gaya pada sub-elemen bar menu, termasuk butang togol bar menu, senarai bar menu, dsb.

Kod JS

Sekarang, kita perlu menambah kesan mengecut kiri dan kanan bar menu melalui jQuery. Kodnya adalah seperti berikut:

$(document).ready(function() {
  // 默认情况下，菜单栏打开
  var menuState = "open";

  // 点击按钮时切换菜单栏状态
  $(".menu-toggle").click(function() {
    if (menuState == "open") {
      $(".menu").animate({left: "-250px"}, 300);
      menuState = "closed";
    } else {
      $(".menu").animate({left: "0px"}, 300);
      menuState = "open";
    }
  });
});

Salin selepas log masuk

Dalam kod JS ini, kami mentakrifkan pembolehubah "menuState" untuk menjejak status bar menu. Setiap kali anda mengklik butang suis bar menu, status bar menu ditentukan, dan kemudian bar menu ditukar mengikut status yang berbeza.

Contoh Penuh

Kini, kami telah melengkapkan kesan pengecutan kiri dan kanan yang mudah pada bar menu kiri. Kami meletakkan kod HTML, CSS dan JS di atas bersama-sama untuk membentuk contoh lengkap.

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery实现左侧菜单栏左右收缩</title>
  <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <style>
    .menu {
      width: 250px;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background-color: #333;
      color: #fff;
      overflow-x: hidden;
    }
    .menu-toggle {
      width: 50px;
      height: 50px;
      line-height: 50px;
      font-size: 24px;
      text-align: center;
      cursor: pointer;
      position: absolute;
      top: 0;
      left: 0;
      background-color: #555;
      color: #fff;
      z-index: 999;
    }
    .menu-list {
      margin-top: 50px;
      padding: 0;
      list-style: none;
    }
    .menu-list li {
      padding: 10px;
    }
    .menu-list li a {
      color: #fff;
      text-decoration: none;
    }
    /*隐藏滚动条*/
    ::-webkit-scrollbar {
      display: none;
    }
  </style>
</head>
<body>
  <div class="menu">
    <div class="menu-toggle">
      <i class="fa fa-bars"></i>
    </div>
    <ul class="menu-list">
      <li><a href="#">Menu 1</a></li>
      <li><a href="#">Menu 2</a></li>
      <li><a href="#">Menu 3</a></li>
    </ul>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      // 默认情况下，菜单栏打开
      var menuState = "open";

      // 点击按钮时切换菜单栏状态
      $(".menu-toggle").click(function() {
        if (menuState == "open") {
          $(".menu").animate({left: "-250px"}, 300);
          menuState = "closed";
        } else {
          $(".menu").animate({left: "0px"}, 300);
          menuState = "open";
        }
      });
    });
  </script>
</body>
</html>

Salin selepas log masuk

Ringkasan

Di atas adalah langkah lengkap untuk mencapai kesan pengecutan kiri dan kanan bar menu kiri. Dengan menggunakan jQuery, kami boleh menambah fungsi ini dengan mudah dan meningkatkan estetika halaman web. Semoga artikel ini bermanfaat kepada anda.

Atas ialah kandungan terperinci jquery menyedari pengecutan kiri dan kanan bar menu kiri. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!