Heim > Artikel > Web-Frontend > jquery erkennt die Verkleinerung der linken Menüleiste nach links und rechts

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

王林Original: 2023-05-28 10:06:07824Durchsuche

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>

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

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

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So zwischenspeichern Sie eine Datenbank in NodeJSNächster Artikel：So zwischenspeichern Sie eine Datenbank in NodeJS

In Verbindung stehende Artikel

Mehr sehen