Question

我正在看这个主题，它正是我所寻找的完美（侧边栏明智）：http://themesdesign.in/webadmin_1.1/layouts/green/index.html

我想要菜单按钮扩展/最小化侧栏，同时仍然保留所有侧栏菜单。
当它在XS屏幕中时，我希望隐藏侧栏，但在按下该菜单按钮时弹出。

这是我目前在代码中所拥有的：

＆＃13;

<nav class="navbar-default navbar-static-side" role="navigation">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#side-menu" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
  <div class="sidebar-collapse hidden-xs">
    <ul class="nav navbar-collapse collapse" id="side-menu">
      <li class="nav-header">
        <h2 style="color: #e8e8e8"></h2>
        <h6 class="" style="color:#808080;">By: </h6>
      </li>
      <li>
        <a class="active" data-toggle="collapse" data-target="#firstMenu" aria-expanded="true" aria-controls="navbar"><i class="fa fa-th-large"></i> <span class="nav-label">Dashboards</span> <span class="fa arrow"></span></a>
        <ul class="side-menu-ul collapse in" id="firstMenu">
          <li><a href="index-2.html">Dashboard v.1</a></li>
          <li class="active"><a href="dashboard_2.html">Dashboard v.2</a></li>
          <li><a href="dashboard_3.html">Dashboard v.3</a></li>
          <li><a href="dashboard_4_1.html">Dashboard v.4</a></li>
          <li><a href="dashboard_5.html">Dashboard v.5 </a></li>
        </ul>
      </li>
      <li>
        <a data-toggle="collapse" data-target="#secondMenu" aria-expanded="false" aria-controls="navbar"><i class="icon ion-email"></i><span>Mail Box</span> </a>
        <ul class="side-menu-ul collapse" id="secondMenu">
          <li><a href="mail-inbox.html">Inbox</a></li>
          <li><a href="mail-compose.html">Compose Mail</a></li>
          <li><a href="mail-single.html">Single Mail</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

＆＃13;

由于没有太多的设计经验，我不确定如何从这里开始。特别是单击按钮的部分最小化侧导航栏。有人能帮助我吗？

编辑：我刚刚在这里找到了另一个很好的例子：http://blog.codeply.com/2016/05/18/bootstrap-sidebar-responsive-examples/部分＆＃34;左侧边栏折叠为图标＆＃34;有我想要的。然而，问题的一个问题是，当它折叠成图标时，它不会显示任何菜单子项。

Answer 1

单击按钮时，您可以使用单击事件更新应用程序的状态。

https://developer.mozilla.org/en-US/docs/Web/Events/click

由于您使用侧边栏从一个CSS状态转到另一个CSS状态，因此最好的选择可能是在CSS中制作两个解决方案。这样，您可以通过按钮的onclick事件更改父容器类。

如果您希望它关闭，例如，您可以在侧边栏中添加closed课程，并使用以下内容将closed css级联向下：

.closed .child-element {}

定位已关闭状态的子元素。

Bootstrap侧面菜单：折叠，小屏幕上的最小化

1 个答案: