* 좌에서 우로 나오는 슬라이드 메뉴 입니다.
jquery
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RELATION.CO.KR_5_25</title>
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
const gbn_area = $(".gnb_left");
gbn_area.css({"height":$("section").height()});
$(".topBtn").click(function(){
$(".topBtn p").toggle();
if( gbn_area.hasClass("_off") == true){
gbn_area.removeClass("_off").addClass("_on");
}else{
gbn_area.removeClass("_on").addClass("_off");
}
});
$(".category").click(function(){
var submenu = $(this).children("ul");
if( submenu.hasClass("_off") == true ){
submenu.slideDown().removeClass("_off");
}else{
submenu.slideUp().addClass("_off");
}
});
});
</script>
<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>
</body>
</html>
'무료홈페이지소스 > 자바스크립트 제이쿼리 소스' 카테고리의 다른 글
| 좌측에서 우측으로 나오는 슬라이드 메뉴 javascript (1) | 2025.04.15 |
|---|---|
| 타이머 5초뒤에 함수 실행 (0) | 2025.04.10 |
| 다중 Select 제어 (1) | 2025.04.10 |
| 드롭다운 JQUERY아코디언, 토글 메뉴 SlideToggle() (0) | 2025.03.06 |