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

Slideout from left push menu navigation

本文关键字：导航 菜单      更新时间：2023-09-26

所以，我想使用带有"显示/隐藏左键菜单"按钮的菜单，它正在工作，但由于某种原因，当我尝试删除其他按钮时，它停止了工作？

我还没有包含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');
};

这将是您调整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>

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

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

相关文章：