슬라이드 메뉴 관련
본문
사실 이건 그누보드 관련은 아닌데 좌우측에서 나오는 슬라이드 메뉴를 구현중인데요
미리보기 링크는 다음과 같습니다.
https://tympanus.net/Blueprints/SlidePushMenus/
소스는 아래에 있는데 현재 이 소스에는 눌렀던 버튼을 다시 눌러야 나왔던 메뉴가 닫히는 구조거든요.
혹시 본문의 빈공간 아무곳이나 클릭해도 닫히게끔 하는 방법이 있을까요?
혹은 나왔던 메뉴안에 "닫기" 텍스트를 넣고 거기에 닫는 기능을 넣어도 좋습니다.
물론 둘다라면 더 좋고요.
아래는 원래 소스입니다.
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blueprint: Slide and Push Menus</title>
<meta name="description" content="Blueprint: Slide and Push Menus" />
<meta name="keywords" content="sliding menu, pushing menu, navigation, responsive, menu, css, jquery" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
</head>
<body class="cbp-spmenu-push">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1">
<h3>Menu</h3>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
<a href="#">Dandelion bunya</a>
<a href="#">Rutabaga</a>
</nav>
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s2">
<h3>Menu</h3>
<a href="#">Celery seakalddddde</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
<a href="#">Dandelion bunya</a>
<a href="#">Rutabaga</a>
</nav>
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s3">
<h3>Menu</h3>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
</nav>
<nav class="cbp-spmenu cbp-spmenu-horizontal cbp-spmenu-bottom" id="cbp-spmenu-s4">
<h3>Menu</h3>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
<a href="#">Dandelion bunya</a>
<a href="#">Rutabaga</a>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
<a href="#">Catsear azuki bean</a>
<a href="#">Dandelion bunya</a>
<a href="#">Rutabaga</a>
</nav>
<div class="container">
<header class="clearfix">
<span>Blueprint</span>
<h1>Slide and Push Menus</h1>
<nav>
<a href="http://tympanus.net/Blueprints/QuotesRotator/" class="icon-arrow-left" data-info="previous Blueprint">Previous Blueprint</a>
<a href="http://tympanus.net/codrops/?p=14725" class="icon-drop" data-info="back to the Codrops article">back to the Codrops article</a>
</nav>
</header>
<div class="main">
<section>
<h2>Slide Menus</h2>
<!-- Class "cbp-spmenu-open" gets applied to menu -->
<button id="showLeft">Show/Hide Left Slide Menu</button>
<button id="showRight">Show/Hide Right Slide Menu</button>
<button id="showTop">Show/Hide Top Slide Menu</button>
<button id="showBottom">Show/Hide Bottom Slide Menu</button>
</section>
<section class="buttonset">
<h2>Push Menus</h2>
<!-- Class "cbp-spmenu-open" gets applied to menu and "cbp-spmenu-push-toleft" or "cbp-spmenu-push-toright" to the body -->
<button id="showLeftPush">Show/Hide Left Push Menu</button>
<button id="showRightPush">Show/Hide Right Push Menu</button>
</section>
</div>
</div>
<!-- Classie - class helper functions by @desandro https://github.com/desandro/classie -->
<script src="js/classie.js"></script>
<script>
var menuLeft = document.getElementById( 'cbp-spmenu-s1' ),
menuRight = document.getElementById( 'cbp-spmenu-s2' ),
menuTop = document.getElementById( 'cbp-spmenu-s3' ),
menuBottom = document.getElementById( 'cbp-spmenu-s4' ),
showLeft = document.getElementById( 'showLeft' ),
showRight = document.getElementById( 'showRight' ),
showTop = document.getElementById( 'showTop' ),
showBottom = document.getElementById( 'showBottom' ),
showLeftPush = document.getElementById( 'showLeftPush' ),
showRightPush = document.getElementById( 'showRightPush' ),
body = document.body;
showLeft.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeft' );
};
showRight.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuRight, 'cbp-spmenu-open' );
disableOther( 'showRight' );
};
showTop.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuTop, 'cbp-spmenu-open' );
disableOther( 'showTop' );
};
showBottom.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( menuBottom, 'cbp-spmenu-open' );
disableOther( 'showBottom' );
};
showLeftPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toright' );
classie.toggle( menuLeft, 'cbp-spmenu-open' );
disableOther( 'showLeftPush' );
};
showRightPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toleft' );
classie.toggle( menuRight, 'cbp-spmenu-open' );
disableOther( 'showRightPush' );
};
function disableOther( button ) {
if( button !== 'showLeft' ) {
classie.toggle( showLeft, 'disabled' );
}
if( button !== 'showRight' ) {
classie.toggle( showRight, 'disabled' );
}
if( button !== 'showTop' ) {
classie.toggle( showTop, 'disabled' );
}
if( button !== 'showBottom' ) {
classie.toggle( showBottom, 'disabled' );
}
if( button !== 'showLeftPush' ) {
classie.toggle( showLeftPush, 'disabled' );
}
if( button !== 'showRightPush' ) {
classie.toggle( showRightPush, 'disabled' );
}
}
</script>
</body>
</html>
답변 1
개발자 모드로 잠깐 보니 그리 어려운게 아닐것 같아 말로 설명을 드려볼께요
정법으로 할려면 시간이 더 걸릴것 같아 소스를 파악해서 해당 클래스만 삭제해주는 편법으로 해도 충분히 될것 같답니다.
우선 크롬 개발자모드로 봤을때
button을(id = showLeft, showRight, showTop, showBottom) 클릭했을때 4개의 버튼에 클래스가 생성이 되는걸 볼 수 있답니다. 클릭한 버튼에는 active, 클릭하지 않은 disabled 로 생성이 되고 있어요.
그리고, 버튼을 눌렀을때 각 메뉴 구성이 되어 있는 nav태그의 클래스를 유심히 보면
오픈된 nav에 cdp-spmenu-open이라는 태그가 발생하는 걸 알수 있어요.
그렇다면, 바디 클래스인 cdp-spmenu-push를 눌렀을때, (또는 닫기라는 텍스트를 넣으셔서 클래스 또는 id를 만드신 뒤에 그 클래스 또는 아이디를 눌렀을때)
cdp-spmenu-open이라는 클래스와 active라는 클래스, disabled라는 클래스를 모두 찾아서 삭제하게되면
원하시는데로 될것 같아요
javasciprt를 전혀 모르신다면 어렵다고 느끼실수도 있지만,
잘 모르셔도 찾아보시면 충분히 할 수 있을만한 부분이라 코드를 기재하지는 않았어요
(귀차니즘..^^;)
간단하게 정리하면 "특정 클래스 또는 아이디(body 또는 닫기)를 클릭하면, 삭제할 클래스를 찾아서 삭제한다." 로 이해하시면 될것 같아요
파이팅입니다^^
답변을 작성하시기 전에 로그인 해주세요.
