좌측에서 우측으로 나오는 슬라이드 메뉴 javascript
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RELATION.CO.KR_5_25</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;500;900&display=swap");
* { margin:0; padding:0; border:0 }
body { font-family:"Noto Sans KR"; font-size: 14px; }
header { height: 80px; line-height: 80px; border-bottom: 1px solid #ddd; }
footer { height: 100px; border-top: 1px solid #ddd; }
section { position: relative; margin-top: 50px; }
article { margin: 0 auto; width: 1170px; }
article ~ article { border-top: 1px solid #ddd; }
.all_wrap { position: relative; }
.header_area { margin: 0 auto; width: 1170px; height: 80px; line-height: 80px; font-weight: 500; text-align: center; }
.footer_area { margin: 0 auto; width: 1170px; font-weight: 500; text-align: center; padding: 30px 0 30px 0; box-sizing: border-box; }
.article_area { width: 100%; min-height: 200px; font-weight: 500; text-align: center; padding: 30px 0 30px 0; box-sizing: border-box; }
.gnb_left { position: absolute; left: 0; width: 235px; min-height: 100vh; z-index: 50; background-color: #fff; border-right: 1px solid #ccc; border-right-width: 1px; }
.gnb_left._off { left: -235px; transition: left 0.5s; }
.gnb_left._on { left: 0px; transition: left 0.5s; }
.gnb_left .topBtn { position: absolute; top: 0px; left: 235px; z-index: 1; width: 35px; height: 35px; background: #000; color: #fff; cursor: pointer; }
.gnb_left .topBtn p { width: 35px; height: 35px; line-height: 35px; text-align: center; font-size: 13px; color: #fff; }
.gnb_left .topBtn p:first-child { display: block; }
.gnb_left .topBtn p:last-child { display: none; }
.gnb_left .category { width: 100%; cursor: pointer; }
.gnb_left .category .menu { width: 100%; height: 35px; line-height: 30px; padding-left: 10px; box-sizing: border-box; border-bottom: 1px solid #ddd; }
.gnb_left .category .menu._on_shadow { width: 100%; }
.gnb_left .category .submenu { width: 100%; background: #ececec; }
.gnb_left .category .submenu._off { display: none; }
.gnb_left .category .submenu li { display: flex; align-items: center; height: 35px; padding-left: 10px; box-sizing: border-box; border-bottom: 1px solid #ccc; }
.gnb_left .category .submenu li a { text-decoration: none; color: #111; font-size: 13px;}
</style>
</head>
<body>
<div class="all_wrap">
<header>
<div class="header_area">Header_area</div>
</header>
<div class="gnb_left _on">
<div class="topBtn">
<p>열림</p>
<p>닫힘</p>
</div>
<div class="gd-gnb">
<ul>
<li class="category">
<div class="menu">CATEGORY_A</div>
<ul class="submenu _off">
<li><a href="#">CateA_menu1</a></li>
<li><a href="#">CateA_menu2</a></li>
<li><a href="#">CateA_menu3</a></li>
<li><a href="#">CateA_menu4</a></li>
</ul>
</li>
<li class="category">
<div class="menu">CATEGORY_B</div>
<ul class="submenu _off">
<li><a href="#">CateB_menu1</a></li>
<li><a href="#">CateB_menu2</a></li>
<li><a href="#">CateB_menu3</a></li>
<li><a href="#">CateB_menu4</a></li>
</ul>
</li>
</ul>
</div>
</div>
<section>
<article>
<div class="article_area">
Article_Area1
</div>
</article>
<article>
<div class="article_area">
Article_Area2
</div>
</article>
<article>
<div class="article_area">
Article_Area3
</div>
</article>
</section>
<footer>
<div class="footer_area">
Footer_Area
</div>
</footer>
</div>
<script>
const section_height = document.querySelector("section").clientHeight;
const gbn_area = document.querySelector(".gnb_left");
const top_btn = document.querySelector(".topBtn");
const top_btn_txt = document.querySelectorAll(".topBtn > p");
const category = document.querySelectorAll(".category");
gbn_area.style.height = section_height+"px";
top_btn.addEventListener("click", ()=>{
if( gbn_area.classList.contains("_off") == true){
gbn_area.classList.replace("_off", "_on");
top_btn_txt[0].style.display = "none";
top_btn_txt[1].style.display = "block";
}else{
gbn_area.classList.replace("_on", "_off");
top_btn_txt[0].style.display = "block";
top_btn_txt[1].style.display = "none";
}
});
category.forEach( (x, index)=>{
x.addEventListener("click", ()=>{
console.log("x",x);
const submenu = x.querySelector("ul");
const submenu_child = submenu.querySelectorAll("li").length;
if( submenu.classList.contains("_on") == true ){
submenu.style.height = "0px";
submenu.classList.add("_off");
submenu.classList.remove("_on");
}else{
const submenu_height = 35 * submenu_child;
submenu.style.height = submenu_height + "px";
submenu.classList.add("_on");
submenu.classList.remove("_off");
}
})
});
</script>
</body>
</html>
'무료홈페이지소스 > 자바스크립트 제이쿼리 소스' 카테고리의 다른 글
| 좌에서 우로 나오는 슬라이드 메뉴 입니다. jquery (0) | 2025.04.15 |
|---|---|
| 타이머 5초뒤에 함수 실행 (0) | 2025.04.10 |
| 다중 Select 제어 (1) | 2025.04.10 |
| 드롭다운 JQUERY아코디언, 토글 메뉴 SlideToggle() (0) | 2025.03.06 |