Question

我做了一个菜单，点击它时将画布向右推。但是当您打开菜单并选择要转到的章节时，菜单不会自动关闭。因此，您不得不再次按下菜单按钮关闭菜单，但我希望在您选择章节后自动关闭它。

另一个选项是菜单按钮或标题是固定的。但是当我这样做时，按下按钮时不会向右滑动，所以你无法推动它关闭......

我希望我的故事可以理解。这是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);

Answer 1

尝试在标题中添加position: fixed。

header {
    position: fixed;
}

更新了JSFiddle。

您可以阅读有关css定位here的更多信息。

Answer 2

你必须创建一个函数，当单击一个章节的链接时，它也会产生一个showLeftPush.click（）

Show click method

Answer 3

除了其他答案之外，我在此网站上完成了这项工作：http://css-tricks.com/off-canvas-menu-with-css-target/

它没有所有的javascript，就像魅力一样

点击后关闭菜单

3 个答案: