jquery realizes the left and right shrinkage of the left menu bar-Front-end Q&A-php.cn

jquery realizes the left and right shrinkage of the left menu bar

王林

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

Original

890 people have browsed it

As the functions of websites become more and more complex, the left menu bar has become a standard feature of almost all web pages. However, some designers may think that the menu bar takes up too much space on the web page and reduces the aesthetics of the web page. In order to solve this problem, you can use jQuery to realize the left and right shrinking function of the menu bar.

This article will introduce how to use jQuery to achieve the left and right shrinking effect of the left menu bar.

HTML structure

First, we need to build a basic HTML structure. The code is as follows:

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

Copy after login

Here we create a div container named "menu", which contains two sub-elements: "menu-toggle" and "menu-list".

CSS Style

Next, we need to add CSS style to the menu bar. The code is as follows:

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

Copy after login

In this CSS style, we set the width and height of the menu bar, as well as the absolute positioning position. Then add styles to the sub-elements of the menu bar, including the menu bar toggle button, menu bar list, etc.

JS code

Now, we need to add the left and right shrinking effect of the menu bar through jQuery. The code is as follows:

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

Copy after login

In this JS code, we define a variable "menuState" to track the status of the menu bar. Every time you click the switch button of the menu bar, the status of the menu bar is determined, and then the menu bar is switched according to the different status.

Complete example

Now, we have completed a simple left and right shrinking effect of the left menu bar. We put the above HTML, CSS and JS code together to form a complete example.

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

Copy after login

Summary

The above are the complete steps to achieve the left and right shrinking effect of the left menu bar. By using jQuery, we can easily add this functionality and improve the aesthetics of the web page. Hope this article is helpful to you.

The above is the detailed content of jquery realizes the left and right shrinkage of the left menu bar. For more information, please follow other related articles on the PHP Chinese website!