javascript 从左推菜单导航滑出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18485088/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Slideout from left push menu navigation
提问by user1393984
So, I want to use the menu with the button 'Show/Hide left push menu' which is working, but for some reason when I try and remove the other buttons, it stops working?
所以，我想使用带有“显示/隐藏左推菜单”按钮的菜单，该按钮正在工作，但是由于某种原因，当我尝试删除其他按钮时，它停止工作？
I haven't included CSS as I don't think that would be the issue but I can include a link to the CSS file if needed.
我没有包含 CSS，因为我认为这不是问题，但如果需要，我可以包含指向 CSS 文件的链接。
HTML:
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="#">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>
<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 class="buttonset">
<h2>Push Menus</h2>
<button id="showLeftPush">Show/Hide Left Push Menu</button>
<button id="showRightPush">Show/Hide Right Push Menu</button>
</section>
</body>
JS:
JS：
var menuLeft = document.getElementById('cbp-spmenu-s1'),
showLeftPush = document.getElementById('showLeftPush'),
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');
};
回答by Aaron
This would be how you would adapt the http://tympanus.net examplefor the bottome button , best to go through the id's and understand what is being triggered and when
这将是您将http://tympanus.net 示例调整为底部按钮的方式，最好通过 ID 并了解正在触发的内容以及何时触发
<body class="cbp-spmenu-push">
<nav class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-right" id="cbp-spmenu-s2">
<h3>Menu</h3>
<a href="#">Celery seakale</a>
<a href="#">Dulse daikon</a>
<a href="#">Zucchini garlic</a>
</nav>
<div class="container">
<header class="clearfix">
</header>
<div class="main">
<section class="buttonset">
<button id="showRightPush">Show/Hide Right Push Menu</button>
</section>
</div>
</div>
<script src="js/classie.js"></script>
<script>
var
menuRight = document.getElementById( 'cbp-spmenu-s2' ),
showRightPush = document.getElementById( 'showRightPush' ),
body = document.body;
showRightPush.onclick = function() {
classie.toggle( this, 'active' );
classie.toggle( body, 'cbp-spmenu-push-toleft' );
classie.toggle( menuRight, 'cbp-spmenu-open' );
};
</script>
</body>
回答by Atulesh Chandra Karna
The simple and easy way I found out is shown below,hope this can make your idea clear.
我发现的简单易行的方法如下所示，希望这可以使您的想法清晰。
$(document).ready(function() {
$menuLeft = $('.menu');
$nav_list = $('.act');
$nav_list.click(function() {
$('.bodypush').toggleClass('pushmenu-push-toright');
$menuLeft.toggleClass('push-left');
});
});body {
margin: 0;
}
.menu {
/*this is the nav*/
background: #3c3933;
width: 240px;
height: 100%;
top: 0;
position: fixed;
left: -240px;
}
.menu a {
display: block;
/* drops the nav vertically*/
color: #fff;
font-size: 16px;
text-decoration: none;
padding: 14px;
}
.push-left {
left: 0;
}
.bodypush {
overflow-x: hidden;
position: relative;
left: 0;
}
.pushmenu-push-toright {
left: 240px;
}
/*Transition*/
.menu,
.bodypush {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class="bodypush">
<nav class="menu">
<ul>
<li><a href="#">Home</a>
</li>
<li><a href="#">Carrers</a>
</li>
<li><a href="#">Blog</a>
</li>
</ul>
</nav>
<div class="container">
<a href="#" class="act">click</a>
<section class="content">
<h1>Slideout Navigation</h1>
</section>
</div>
</body>