클릭 후 메뉴 닫기

캔버스를 클릭 할 때 캔버스를 오른쪽으로 밀면되는 메뉴를 만들었습니다. 그러나 메뉴를 열 때 이동할 장을 선택하면 메뉴가 자동으로 닫히지 않습니다. 메뉴를 닫으려면 메뉴 버튼을 다시 눌러야하지만 챕터를 선택한 후에는 메뉴 버튼을 닫아 야합니다.클릭 후 메뉴 닫기

다른 옵션은 메뉴 단추 또는 머리글이 고정되어 있습니다. 하지만 그렇게하면 버튼을 밀 때 버튼이 오른쪽으로 밀리지 않으므로 닫을 때 밀어 낼 수 없습니다.

제 이야기가 이해되기를 바랍니다. 여기에 JSFiddle

HTML

<body class="cbp-spmenu-push"> 
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left" id="cbp-spmenu-s1"> 
     <h3>Menu</h3> 
<a href="#chapter1">Home</a> 
<a href="#chapter2">Catering</a> 
<a href="#chapter3">Menu</a> 
<a href="#chapter4">Contact</a> 

</nav> 
<div class="container"> 
    <div class="main"> 
     <header> 
      <button id="showLeftPush"></button> 
     </header> 
     <div id="chapter1"></div> 
     <div id="chapter2"></div> 
     <div id="chapter3"></div> 
     <div id="chapter4"></div> 
     <section> 


      <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"> 


      <button id="showLeftPush">Show/Hide Left Push Menu</button> 
      <button id="showRightPush">Show/Hide Right Push Menu</button> 
     </section> 
    </div> 
</div> 
<script src="js/classie.js"></script> 
<script> 
    var menuLeft = document.getElementById('cbp-spmenu-s1'), 
     showLeft = document.getElementById('showLeft'), 
     showLeftPush = document.getElementById('showLeftPush'), 
     body = document.body; 

    showLeft.onclick = function() { 
     classie.toggle(this, 'active'); 
     classie.toggle(menuLeft, 'cbp-spmenu-open'); 
     disableOther('showLeft'); 
    }; 
    showLeftPush.onclick = function() { 
     classie.toggle(this, 'active'); 
     classie.toggle(body, 'cbp-spmenu-push-toright'); 
     classie.toggle(menuLeft, 'cbp-spmenu-open'); 
     disableOther('showLeftPush'); 
    }; 

    function disableOther(button) { 
     if (button !== 'showLeft') { 
      classie.toggle(showLeft, 'disabled'); 
     } 
     if (button !== 'showLeftPush') { 
      classie.toggle(showLeftPush, 'disabled'); 
     } 
    } 
</script>

CSS

.cbp-spmenu { 
position: fixed; 
background: #333; 
-webkit-box-shadow: inset -15px 0px 17px -7px rgba(0, 0, 0, 0.58); 
-moz-box-shadow: inset -15px 0px 17px -7px rgba(0, 0, 0, 0.58); 
box-shadow: inset -15px 0px 17px -7px rgba(0, 0, 0, 0.58); 
} 
.cbp-spmenu h3 { 
font-size: 1.9em; 
padding: 20px; 
margin: 0; 
font-weight: 300; 
font-family:'Amatic SC', cursive; 
color: white; 
} 
.cbp-spmenu a { 
display: block; 
font-size: 1.1em; 
font-weight: 300; 
font-family:'Amatic SC', cursive; 
color: white; 
text-decoration: none; 
} 
.cbp-spmenu a:hover { 
background: rgba(65, 65, 65, 0.3); 
} 
.cbp-spmenu a:active { 
} 
.cbp-spmenu-vertical { 
width: 240px; 
height: 100%; 
top: 0; 
z-index: 1000; 
} 
.cbp-spmenu-vertical a { 
padding: 1.2em; 
} 
.cbp-spmenu-left { 
left: -240px; 
} 
.cbp-spmenu-left.cbp-spmenu-open { 
left: 0px; 
} 
.cbp-spmenu-push { 
overflow-x: hidden; 
position: relative; 
left: 0; 
} 
.cbp-spmenu-push-toright { 
left: 240px; 
} 
.cbp-spmenu, .cbp-spmenu-push { 
-webkit-transition: all 0.3s ease; 
-moz-transition: all 0.3s ease; 
transition: all 0.3s ease; 
} 
@media screen and (max-height: 26.375em) { 
.cbp-spmenu-vertical { 
    font-size: 90%; 
    width: 190px; 
} 
.cbp-spmenu-left, .cbp-spmenu-push-toleft { 
    left: -190px; 
} 
} 
body, html { 
border: none; 
margin: 0; 
padding: 0; 
background: #ccc; 
font-family:'Quicksand', sans-serif; 
} 
section { 
display: none; 
} 
header { 
background: #00a75b; 
width: 100%; 
height: 76px; 
} 
button { 
color: white; 
margin: 15px 0px 0px 15px; 
width: 45px; 
height: 45px; 
border: none; 
cursor: pointer; 
transition: 0.2s; 
background: #ccc; 
} 
button:hover { 
opacity: 0.8; 
} 
#chapter1 { 
height: 400px; 
background: #ededed; 
width: 100%; 
} 
#chapter2 { 
height: 400px; 
background: #ccc; 
width: 100%; 
} 
#chapter3 { 
height: 400px; 
background: #ededed; 
width: 100%; 
} 
#chapter4 { 
height: 400px; 
background: #ccc; 
width: 100%; 
}

에게 JAVASCRIPT

(function (window) { 

'use strict'; 


function classReg(className) { 
    return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); 
} 

var hasClass, addClass, removeClass; 

if ('classList' in document.documentElement) { 
    hasClass = function (elem, c) { 
     return elem.classList.contains(c); 
    }; 
    addClass = function (elem, c) { 
     elem.classList.add(c); 
    }; 
    removeClass = function (elem, c) { 
     elem.classList.remove(c); 
    }; 
} else { 
    hasClass = function (elem, c) { 
     return classReg(c).test(elem.className); 
    }; 
    addClass = function (elem, c) { 
     if (!hasClass(elem, c)) { 
      elem.className = elem.className + ' ' + c; 
     } 
    }; 
    removeClass = function (elem, c) { 
     elem.className = elem.className.replace(classReg(c), ' '); 
    }; 
} 

function toggleClass(elem, c) { 
    var fn = hasClass(elem, c) ? removeClass : addClass; 
    fn(elem, c); 
} 

window.classie = { 
    // full names 
    hasClass: hasClass, 
    addClass: addClass, 
    removeClass: removeClass, 
    toggleClass: toggleClass, 
    // short names 
    has: hasClass, 
    add: addClass, 
    remove: removeClass, 
    toggle: toggleClass 
}; 

})(window);

출처

2015-01-05 user3095570