프로그래밍/html+css+js
[HTML+CSS+JavaScript] side bar(사이드바) 보이고 감추기
너무 궁금해
2025. 1. 12. 19:14
[HTML+CSS+JavaScript] side bar(사이드바) 보이고 감추기
HTML, CSS, JavaScript를 사용하여 사이드바 메뉴를 구현한 예제입니다.
|
1. 참고 페이지
▶ icon 클릭시 동적으로 icon 변경하기
[HTML+CSS+JavaScript] icon 클릭시 동적으로 변경하기
[HTML+CSS+JavaScript] icon 클릭시 동적으로 변경하기 HTML에서 icon을 클릭했을 때 다른 icon으로 변경하는 예제입니다. 아이콘은 Font Awesome를 이용합니다. 1. 참고 페이지▶ Font Awesome icon 사용하는
happyldh.tistory.com
2. icon 클릭시 side bar 보이고 감추기
▶ 전체 소스
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<!-- Font Awesome CSS를 불러옵니다. -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<style>
/* .boxOpen 클래스: 열림 상태를 나타냅니다. Font Awesome의 .fa-bars 아이콘을 사용합니다. */
.boxOpen::before {
content: "\f0c9"; /* Font Awesome에서 .fa-bars의 유니코드 값 */
font-family: fontAwesome; /* Font Awesome 폰트를 지정 */
}
/* .boxClose 클래스: 닫힘 상태를 나타냅니다. Font Awesome의 .fa-times 아이콘을 사용합니다. */
.boxClose::before {
content: "\f00d"; /* Font Awesome에서 .fa-times의 유니코드 값 */
font-family: fontAwesome; /* Font Awesome 폰트를 지정 */
}
/* 체크박스가 선택되었을 때(sidebar 열림 상태)의 스타일 */
input[id="trigger"]:checked ~ .sidebar {
left: 0; /* 사이드바를 화면의 왼쪽에 위치시킴 */
}
/* 체크박스가 선택되었을 때(label의 위치 변경) */
input[id="trigger"]:checked + label {
left: 220px; /* 메뉴 버튼을 사이드바 밖으로 이동 */
}
/* 체크박스 자체는 화면에 표시되지 않도록 숨깁니다. */
input[id="trigger"] {
display: none;
}
/* 메뉴 버튼의 기본 스타일 */
label[for="trigger"] {
/* 메뉴 버튼의 크기와 위치를 지정 */
width: 30px;
height: 20px;
display: block;
position: relative;
top: 0px;
left: 0px;
cursor: pointer; /* 클릭 가능한 커서를 표시 */
transition: 0.3s; /* 애니메이션 효과를 부드럽게 적용 */
z-index: 1000; /* 사이드바 위에 표시되도록 z-index 설정 */
}
/* 사이드바 기본 스타일 */
.sidebar {
width: 250px; /* 사이드바의 너비 */
height: 100vh; /* 화면 전체 높이를 차지 */
background-color: teal; /* 배경색 */
position: fixed; /* 화면에 고정 */
top: 0; /* 화면 상단에 위치 */
left: -250px; /* 기본적으로 화면 왼쪽 밖으로 숨김 */
transition: 0.3s; /* 애니메이션 효과를 부드럽게 적용 */
}
</style>
<script>
/**
* changeImg 함수는 메뉴 버튼의 상태를 변경하는 역할을 합니다.
* - "boxOpen" 클래스와 "boxClose" 클래스를 토글(toggle)하여 버튼 상태를 변경합니다.
*/
function changeImg() {
// id가 "triggerLab"인 요소를 가져옵니다.
var div = document.getElementById("triggerLab");
// 요소가 "boxOpen" 클래스를 가지고 있는지 확인합니다.
if (div.classList.contains("boxOpen")) {
// "boxOpen" 클래스가 있으면 이를 제거하고 "boxClose" 클래스를 추가합니다.
div.classList.remove("boxOpen");
div.classList.add("boxClose");
} else {
// "boxOpen" 클래스가 없으면 "boxClose" 클래스를 제거하고 "boxOpen" 클래스를 추가합니다.
div.classList.remove("boxClose");
div.classList.add("boxOpen");
}
}
</script>
</head>
<body>
<div class="container">
<!-- 체크박스: 사이드바의 열림/닫힘 상태를 제어 -->
<input type="checkbox" id="trigger" onclick="changeImg()" />
<!-- 사이드바를 열고 닫는 버튼(label) -->
<label for="trigger" class="boxOpen" id="triggerLab"></label>
<!-- 숨겨진 상태로 시작하는 사이드바 -->
<div class="sidebar"></div>
</div>
</body>
</html>♠ 결과
