如何在单击其列表项时关闭侧边菜单?
How to close sidemenu on clicking on of its list items?
我正在使用此处所述的示例 http://tympanus.net/codrops/2014/09/16/off-canvas-menu-effects/。从这里我一直在使用 Elastic 示例。
这个例子效果很好,如果我点击菜单主体外部,菜单会关闭,但是如果我点击其中一个子项,我该如何关闭它,例如:点击 "Living Room" 将使页面滚动到 #livingroom 通过使用 jquery-easing 插件,然后在滚动后关闭侧边菜单。
这是我的菜单-
<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>
这是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();
})();
提前致谢。
如果您查看源代码 http://tympanus.net/Development/OffCanvasMenuEffects/js/main4.js,您可以看到关闭菜单图标触发了 toggleMenu 函数
if( closebtn ) {
closebtn.addEventListener( 'click', toggleMenu );
}
您需要做的是添加一个点击事件,以便在您点击其中一个子项时触发 toggleMenu 函数。
我相信将 .icon-list a
添加到以下变量中会起作用:
content = document.querySelector( '.content-wrap,.menu' ),
像这样:
content = document.querySelector( '.content-wrap,.menu,.icon-list a' ),
我正在使用此处所述的示例 http://tympanus.net/codrops/2014/09/16/off-canvas-menu-effects/。从这里我一直在使用 Elastic 示例。 这个例子效果很好,如果我点击菜单主体外部,菜单会关闭,但是如果我点击其中一个子项,我该如何关闭它,例如:点击 "Living Room" 将使页面滚动到 #livingroom 通过使用 jquery-easing 插件,然后在滚动后关闭侧边菜单。 这是我的菜单-
<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>
这是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();
})();
提前致谢。
如果您查看源代码 http://tympanus.net/Development/OffCanvasMenuEffects/js/main4.js,您可以看到关闭菜单图标触发了 toggleMenu 函数
if( closebtn ) {
closebtn.addEventListener( 'click', toggleMenu );
}
您需要做的是添加一个点击事件,以便在您点击其中一个子项时触发 toggleMenu 函数。
我相信将 .icon-list a
添加到以下变量中会起作用:
content = document.querySelector( '.content-wrap,.menu' ),
像这样:
content = document.querySelector( '.content-wrap,.menu,.icon-list a' ),