[英]How to close sidemenu on clicking on of its list items?
I am using this example as stated here http://tympanus.net/codrops/2014/09/16/off-canvas-menu-effects/ . 我正在使用此处http://tympanus.net/codrops/2014/09/16/off-canvas-menu-effects/所述的示例。 From this i have been using Elastic example.
因此,我一直在使用弹性示例。 This example works great and menu closes if i click outside menu body but how can i make it close if i click on one of its subitems for example: clicking on "Living Room" will make the page scroll to a #livingroom by using jquery-easing plugin and then closing the sidemenu after scrolling.
这个例子很好用,如果我在菜单主体外部单击,菜单会关闭,但是如果我单击其子项之一,该如何关闭它:例如,单击“ Living Room”将通过使用jquery-将页面滚动到#livingroom松开插件,然后在滚动后关闭侧面菜单。 This is my menu-
这是我的菜单
<div class="menu-wrap">
<nav class="menu">
<div class="icon-list">
<br>
<a href="#"><i class="fa fa-fw fa-home"></i><span>HOME</span></a>
<a href="#" id="btn-1" data-toggle="collapse" data-target="#submenu0" aria-expanded="false"><i class="fa fa-fw fa-building"></i><span>PLACES</span></a>
<ul class="nav collapse" id="submenu0" role="menu" aria-labelledby="btn-1">
<li class="page-scroll"><a href="#livingroom" style="margin:0 30px;text-decoration:none;"><p style="font-weight:1em;font-size:14px;">Living Room</p></a></li>
<li class="page-scroll"><a href="#bedroom" style="margin: 0 30px;"><p style="font-weight:1em;font-size:14px;">Bed Room</p></a></li>
</ul>
<a href="#" id="btn-2" style="text-decoration:none;" data-toggle="collapse" data-target="#submenu1" aria-expanded="false"><i class="fa fa-fw fa-compress"></i><span>NFC</span></a>
<ul class="nav collapse" id="submenu1" role="menu" aria-labelledby="btn-2" >
<li><a href="#0" style="margin:0 30px;text-decoration:none;"><p style="font-weight:1em;font-size:14px;">Read NFC Tag</p></a></li>
<li><a href="#0" style="margin: 0 30px;"><p style="font-weight:1em;font-size:14px;">Write to NFC Tag</p></a></li>
</ul>
<a href="#"><i class="fa fa-fw fa-cogs"></i><span>SETTINGS</span></a>
<a href="#"><i class="fa fa-fw s fa-align-justify"></i><span>ABOUT</span></a>
<a href="#"><i class="fa fa-fw s fa-bookmark-o"></i><span>REFERENCES</span></a>
</div>
</nav>
<button class="close-button" id="close-button">Close Menu</button>
<div class="morph-shape" id="morph-shape" data-morph-open="M-1,0h101c0,0,0-1,0,395c0,404,0,405,0,405H-1V0z">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 800"
preserveAspectRatio="none">
<path d="M-1,0h101c0,0-97.833,153.603-97.833,396.167C2.167,627.579,100,800,100,800H-1V0z"></path>
</svg>
</div>
</div>
This is the js part- 这是js部分-
(function() {
var bodyEl = document.body,
content = document.querySelector( '.content-wrap,.menu' ),
openbtn = document.getElementById( 'open-button' ),
closebtn = document.getElementById( 'close-button' ),
isOpen = false,
morphEl = document.getElementById( 'morph-shape' ),
s = Snap( morphEl.querySelector( 'svg' ) );
path = s.select( 'path' );
initialPath = this.path.attr('d'),
pathOpen = morphEl.getAttribute( 'data-morph-open' ),
isAnimating = false;
function init() {
initEvents();
}
function initEvents() {
openbtn.addEventListener( 'click', toggleMenu );
if( closebtn ) {
closebtn.addEventListener( 'click', toggleMenu );
}
// close the menu element if the target it´s not the menu element or one of its descendants..
content.addEventListener( 'click', function(ev) {
var target = ev.target;
if( isOpen && target !== openbtn ) {
toggleMenu();
}
} );
}
function toggleMenu() {
if( isAnimating ) return false;
isAnimating = true;
if( isOpen ) {
classie.remove( bodyEl, 'show-menu' );
// animate path
setTimeout( function() {
// reset path
path.attr( 'd', initialPath );
isAnimating = false;
}, 300 );
}
else {
classie.add( bodyEl, 'show-menu' );
// animate path
path.animate( { 'path' : pathOpen }, 400, mina.easeinout, function() { isAnimating = false; } );
}
isOpen = !isOpen;
}
init();
})();
Thanks in Advance. 提前致谢。
If you view the source http://tympanus.net/Development/OffCanvasMenuEffects/js/main4.js you can see that the close menu icon fires the toggleMenu function 如果您查看源代码http://tympanus.net/Development/OffCanvasMenuEffects/js/main4.js ,则可以看到关闭菜单图标触发了toggleMenu函数
if( closebtn ) {
closebtn.addEventListener( 'click', toggleMenu );
}
What you'll want to do is add a click event to fire the toggleMenu function when you click on one of the sub items. 您要做的是添加一个单击事件,以在您单击子项之一时触发toggleMenu函数。
I believe that adding .icon-list a
into the following variable will work: 我相信将
.icon-list a
添加到以下变量中将起作用:
content = document.querySelector( '.content-wrap,.menu' ),
like this: 像这样:
content = document.querySelector( '.content-wrap,.menu,.icon-list a' ),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.