jquery는 왼쪽 메뉴 표시줄의 왼쪽 및 오른쪽 축소를 실현합니다.
- 王林원래의
- 2023-05-28 10:06:07901검색
웹사이트의 기능이 점점 더 복잡해짐에 따라 왼쪽 메뉴 표시줄은 거의 모든 웹페이지의 표준 기능이 되었습니다. 그러나 일부 디자이너들은 메뉴바가 웹페이지에서 너무 많은 공간을 차지하고 웹페이지의 미관을 떨어뜨린다고 생각할 수도 있습니다. 이 문제를 해결하기 위해 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>- 요약
위는 왼쪽 메뉴 표시줄의 왼쪽 및 오른쪽 축소 효과를 얻기 위한 전체 단계입니다. jQuery를 사용하면 이 기능을 쉽게 추가하고 웹 페이지의 미학을 향상시킬 수 있습니다. 이 기사가 도움이 되기를 바랍니다.
위 내용은 jquery는 왼쪽 메뉴 표시줄의 왼쪽 및 오른쪽 축소를 실현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!