单击后关闭菜单
Close menu after click
我制作了一个菜单,在单击画布时将画布向右推。但是,当您打开菜单并选择要转到的章节时,菜单不会自动关闭。所以你被迫再次按下菜单按钮来关闭菜单,但我希望它在你选择一章后自行关闭它。
另一种选择是菜单按钮或标题是固定的。但是当我这样做时,按钮不会在您按下它时向右滑动,因此您无法按下以关闭它......
我希望我的故事可以理解。这是 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);
你必须创建一个函数,当点击章节的链接时,也会创建一个 showLeftPush.click()
显示点击方式
除了其他答案外,我还像在这个网站上一样做了这项工作:http://css-tricks.com/off-canvas-menu-with-css-target/
它没有所有的JavaScript,就像魅力一样工作
尝试将position: fixed
添加到标题中。
header {
position: fixed;
}
更新了 JSFiddle。
您可以在此处阅读有关 css 定位的更多信息。
相关文章:
- JQuery在单击正文时隐藏上下文菜单
- 通过单击同一图标使菜单出现和消失
- 引导菜单没有't在导航栏中单击打开
- 何时可以;我的用户脚本在Javascript中触发右键单击(上下文菜单)
- 单击图像后如何创建下拉菜单?[引导/角度]
- 单击事件打开两个弹出菜单
- 单击删除下拉子菜单
- 使用Jquery创建一个具有单击和悬停功能的菜单
- 悬停时展开垂直下拉菜单,而不是单击
- 切换菜单仅在单击时打开,而不是默认情况下打开
- 单击下拉菜单时,将文本粘贴到输入框中
- 如何激活下拉菜单:在一个元素上单击768px宽度下方,在另一个元素上将鼠标悬停在768px上方
- 阻止在单击和关闭覆盖菜单css时滚动正文
- 通过单击主菜单外部关闭子菜单'不适用于IE,但适用于Firefox&铬
- 引导两个响应菜单-单击另一个菜单按钮时折叠一个菜单
- jQuery UI链接选择菜单.单击按钮时窗体将重置
- CSS 菜单 - 单击时的子菜单 (JS)
- Jquery下拉菜单.单击时,子菜单将消失.因此,如何使子菜单在单击时保持不变
- 多个下拉菜单-单击不关闭
- Accordian菜单(单击时)影响图像在下一个表格单元格中的位置