Maison > Article > interface Web > jquery réalise le rétrécissement gauche et droit de la barre de menu de gauche

jquery réalise le rétrécissement gauche et droit de la barre de menu de gauche

王林original: 2023-05-28 10:06:07877parcourir

À mesure que les fonctions des sites Web deviennent de plus en plus complexes, la barre de menu de gauche est devenue une fonctionnalité standard de presque toutes les pages Web. Cependant, certains concepteurs peuvent penser que la barre de menus prend trop de place sur la page Web et réduit l'esthétique de la page Web. Afin de résoudre ce problème, vous pouvez utiliser jQuery pour réaliser la fonction de réduction gauche et droite de la barre de menus.

Cet article explique comment utiliser jQuery pour obtenir l'effet de réduction gauche et droite de la barre de menu de gauche.

Structure HTML

Tout d'abord, nous devons construire une structure HTML de base. Le code est le suivant :

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

Ici, nous créons un conteneur div nommé "menu", qui contient deux sous-éléments : "menu-toggle" et "menu-list".

Styles CSS

Ensuite, nous devons ajouter des styles CSS à la barre de menus. Le code est le suivant :

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

Dans ce style CSS, nous définissons la largeur et la hauteur de la barre de menu, ainsi que la position absolue. Ajoutez ensuite des styles aux sous-éléments de la barre de menus, y compris le bouton bascule de la barre de menus, la liste de la barre de menus, etc.

Code JS

Maintenant, nous devons ajouter l'effet de réduction gauche et droite de la barre de menus via jQuery. Le code est le suivant :

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

Dans ce code JS, nous définissons une variable "menuState" pour suivre l'état de la barre de menu. Chaque fois que vous cliquez sur le bouton de commutation de la barre de menu, l'état de la barre de menu est déterminé, puis la barre de menu change en fonction des différents états.

Exemple complet

Maintenant, nous avons réalisé un simple effet de réduction à gauche et à droite de la barre de menu de gauche. Nous avons rassemblé le code HTML, CSS et JS ci-dessus pour former un exemple complet.

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

Résumé

Ce qui précède sont les étapes complètes pour obtenir l'effet de rétrécissement gauche et droit de la barre de menu de gauche. En utilisant jQuery, nous pouvons facilement ajouter cette fonctionnalité et améliorer l'esthétique de la page Web. J'espère que cet article vous sera utile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment mettre en cache la base de données dans nodejsArticle suivant：Comment mettre en cache la base de données dans nodejs

Articles Liés

Voir plus