javascript - 将我的侧边栏菜单更改为用于移动 View 和较小屏幕的按钮

Question

所以我是 bootstrap 的新手。我试图在屏幕尺寸较小时将侧边栏更改为按钮。

这就是我所需要的。我可以稍微调整一下，让它满足我的需要，除了一个。有一个带有链接的侧边栏。当您缩小屏幕时，侧边栏会消失(就像在移动设备上发生的那样)。我想确保侧边栏消失但通过按钮将其恢复。

这是我的代码。
我正在使用的 HTML 和 CSS:

#side-bar {
  height: 100%;
  background-color: #333f4d;
  padding: 0 !important;
  font-weight: 600;
  color: #d7d9db;
  position: fixed;
  float: left;
}

#top-bar {
  background-color: #1f2730;
  padding-top: 15px;
  padding-bottom: 3px;
}

#top-bar:hover {
  background-color: #aaa;
  font-weight: 700;
}

.sidebarclr {
  background-color: #fafafa !important;
  margin-left: -14px;
}
#logo{
	margin-left: 35px;
	margin-bottom: 8px;
	width:32px;
	height:32px;
}
li img{
	width:16px;
	height:16px;
	margin-right: 5px;
}
.list{
	  text-decoration:none!important;
	  padding-bottom: 15px;
	      padding: 10px;

	  }
#sidebl > li a{
	color:#d7d9db !important;
	
}
	  
#sidebl >li a:hover{
		background-color:#aaa !important;
		text-decoration:none !important;
	}
	#sidebl >li a:focus{
		background-color:#aaa !important;
		text-decoration:none !important;
	}
#user{
	    margin-right: 10px;
    margin-left: 10px;
    float: left;
	
}
.userc{
	border-radius: 3px;
	height:32px;
	margin-top:170px;
}
.light{
	color: #8f98a3 !important;
    font-weight: normal;
	font-size:11px!important;
	
	

}
.username{
	display:inline-block !important;
    line-height: 16px;
	    float: left;
	margin-left:5px;
}
.userc:hover{
	background-color:#aaa;
		text-decoration:none;
}

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="col-sm-2" id="side-bar">

  <div id="top-bar">
    <a href="#" title="home page" target="_blank">

      <img id="logo" src="images/logo.png" alt="">

      <h2 class="title"> Maven Up</h2>
    </a>
  </div>
  <div>
    <ul class="nav" id="sidebl">

      <li class="list">
        <a href="Dashboard.html"><img src="images/icons/006-dashboard.png" alt=""> DashBoard</a>
      </li>
      <li class="list">
        <a href="Entries.html"><img src="images/icons/005-post-it.png" alt=""> Entries</a>
      </li>
      <li class="list">
        <a href="globals.html"><img src="images/icons/004-worlwide.png" alt=""> Globals</a>
      </li>
      <li class="list">
        <a href="Assets.html"><img src="images/icons/003-picture.png" alt="">Assets</a>
      </li>
      <li class="list">
        <a href="user.html"><img src="images/icons/002-users.png" alt=""> Users</a>
      </li>
      <li class="list">
        <a href="#"><img src="images/icons/001-settings.png" alt=""> Setting</a>
      </li>
    </ul>
  </div>

  <div class="userc">
    <div id="user"><img src="images/user.png" alt=""></div>
    <div class="username"> User
      <div class="light">admin</div>
    </div>
    <!---      Navigation Bar User         --->
    <ul class="nav navbar-nav">
      <li class="dropup">
        <a href="#" class="dropdown-toggle glyphpadingbot" data-toggle="dropdown"><span class="gaparowup glyphicon glyphicon-chevron-up"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Account Settings</a></li>

          <li><a href="#">User stats </a></li>

        </ul>
      </li>
    </ul>
    <!---      Navigation Bar End         --->
  </div>
  <!---      userc class div end      --->



</div>
<!-- COL SM 2 END -->

Answer 1

bootsnipp有一些很好的例子。看看其中一个。您可以将它们中的大多数更改为移动版本，以便它们仅在移动设备上显示按钮。

也许这个guide也有帮助。我真的认为那里有很棒的教程。