jqueryで左メニューバーの左右縮小を実現-フロントエンドQ&A-php.cn

jqueryで左メニューバーの左右縮小を実現

王林

リリース： 2023-05-28 10:06:07

オリジナル

924 人が閲覧しました

Web サイトの機能がますます複雑になるにつれて、左側のメニューバーがほぼすべての Web ページの標準機能になりました。ただし、デザイナーの中には、メニューバーが Web ページ上で多くのスペースを占め、Web ページの美しさが損なわれると考える人もいるかもしれません。この問題を解決するには、jQueryを使用してメニューバーの左右縮小機能を実現します。

この記事では、jQuery を使用して、左側のメニューバーの左右の縮小効果を実現する方法を紹介します。

HTML 構造

まず、基本的な HTML 構造を構築する必要があります。コードは次のとおりです。

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

ログイン後にコピー

ここでは、「menu」という名前の div コンテナを作成します。このコンテナには、「menu-toggle」と「menu-list」という 2 つのサブ要素が含まれています。

CSS スタイル

次に、メニューバーに CSS スタイルを追加する必要があります。コードは次のとおりです。

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

ログイン後にコピー

この CSS スタイルでは、メニューバーの幅と高さ、および絶対的な配置位置を設定します。次に、メニューバーのトグルボタン、メニューバーリストなど、メニューバーのサブ要素にスタイルを追加します。

JS コード

次に、jQuery を使用してメニューバーの左右の縮小効果を追加する必要があります。コードは次のとおりです。

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

ログイン後にコピー

この JS コードでは、メニューバーのステータスを追跡する変数「menuState」を定義します。メニューバーの切り替えボタンをクリックするたびにメニューバーの状態が判別され、状態に応じてメニューバーが切り替わります。

完全な例

これで、左側のメニューバーの単純な左右の縮小効果が完成しました。上記の HTML、CSS、JS コードを組み合わせて完全な例を作成します。

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

ログイン後にコピー