jquery는 왼쪽 메뉴 표시줄의 왼쪽 및 오른쪽 축소를 실현합니다.-프런트엔드 Q&A-php.cn

jquery는 왼쪽 메뉴 표시줄의 왼쪽 및 오른쪽 축소를 실현합니다.

王林

풀어 주다： 2023-05-28 10:06:07

원래의

921명이 탐색했습니다.

웹사이트의 기능이 점점 더 복잡해짐에 따라 왼쪽 메뉴 표시줄은 거의 모든 웹페이지의 표준 기능이 되었습니다. 그러나 일부 디자이너들은 메뉴바가 웹페이지에서 너무 많은 공간을 차지하고 웹페이지의 미관을 떨어뜨린다고 생각할 수도 있습니다. 이 문제를 해결하기 위해 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-toggle"과 "menu-list"라는 두 개의 하위 요소를 포함하는 "menu"라는 div 컨테이너를 만듭니다.

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 code

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

로그인 후 복사