Question

所以，我想使用带有“显示/隐藏左推菜单”按钮的菜单，但是出于某种原因，当我尝试删除其他按钮时，它会停止工作吗？

我没有包含CSS，因为我认为这不是问题，但如果需要，我可以包含CSS文件的链接。

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：

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');
};

Answer 1

这将是你如何调整http://tympanus.net example底部按钮，最好通过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>

Answer 2

我发现的简单易行的方法如下所示，希望这可以让你的想法变得清晰。

	$(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>

从左侧推送菜单导航中滑出

2 个答案: