jquery erkennt die Verkleinerung der linken Menüleiste nach links und rechts-Front-End-Fragen und Antworten-php.cn

jquery erkennt die Verkleinerung der linken Menüleiste nach links und rechts

王林

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

Original

925 Leute haben es durchsucht

Da die Funktionen von Websites immer komplexer werden, ist die linke Menüleiste zum Standardmerkmal fast aller Webseiten geworden. Einige Designer denken jedoch möglicherweise, dass die Menüleiste zu viel Platz auf der Webseite einnimmt und die Ästhetik der Webseite beeinträchtigt. Um dieses Problem zu lösen, können Sie jQuery verwenden, um die linke und rechte Verkleinerungsfunktion der Menüleiste zu realisieren.

In diesem Artikel wird erläutert, wie Sie mit jQuery den linken und rechten Verkleinerungseffekt der linken Menüleiste erzielen.

HTML-Struktur

Zuerst müssen wir eine grundlegende HTML-Struktur erstellen. Der Code lautet wie folgt:

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

Nach dem Login kopieren

Hier erstellen wir einen Div-Container mit dem Namen „menu“, der zwei Unterelemente enthält: „menu-toggle“ und „menu-list“.

CSS-Stile

Als nächstes müssen wir CSS-Stile zur Menüleiste hinzufügen. Der Code lautet wie folgt:

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

Nach dem Login kopieren

In diesem CSS-Stil legen wir die Breite und Höhe der Menüleiste sowie die absolut positionierte Position fest. Fügen Sie dann Stile zu den Unterelementen der Menüleiste hinzu, einschließlich der Schaltfläche zum Umschalten der Menüleiste, der Menüleistenliste usw.

JS-Code

Jetzt müssen wir über jQuery den linken und rechten Verkleinerungseffekt der Menüleiste hinzufügen. Der Code lautet wie folgt:

$(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";
    }
  });
});

Nach dem Login kopieren

In diesem JS-Code definieren wir eine Variable „menuState“, um den Status der Menüleiste zu verfolgen. Jedes Mal, wenn Sie auf die Schaltfläche „Umschalten“ der Menüleiste klicken, wird der Status der Menüleiste ermittelt und dann wird die Menüleiste entsprechend dem unterschiedlichen Status umgeschaltet.

Vollständiges Beispiel

Jetzt haben wir einen einfachen Verkleinerungseffekt der linken und rechten Menüleiste nach links und rechts abgeschlossen. Wir haben den obigen HTML-, CSS- und JS-Code zu einem vollständigen Beispiel zusammengestellt.

<!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>

Nach dem Login kopieren

Zusammenfassung

Die oben genannten Schritte sind die vollständigen Schritte, um den linken und rechten Verkleinerungseffekt der linken Menüleiste zu erzielen. Durch die Verwendung von jQuery können wir diese Funktionalität einfach hinzufügen und die Ästhetik der Webseite verbessern. Ich hoffe, dieser Artikel ist hilfreich für Sie.

Das obige ist der detaillierte Inhalt vonjquery erkennt die Verkleinerung der linken Menüleiste nach links und rechts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!