如何制作Bootstrap側面板/ div（不是菜單）

Question

我是一名初學者開發人員，我希望使用Bootstrap構建畫布外的側面板。 切換它的按鈕將在我的頂部導航中顯示為菜單項。 我發現的問題是，在線上大多數用於此類內容的代碼，例如https://codepen.io/j_holtslander/pen/XmpMEp或http://www.jasny.net/bootstrap/examples/navmenu -reveal /用於構建側面導航。 我的導航將改為常規的固定頂部導航，而畫布外的面板將是div，其內容將所有內容（包括固定頂部導航）推送到側面。

最初，我認為我的代碼看起來像這樣：

HTML：

<div id="main-content-wrapper">
   <nav class="navbar navbar-default" role="navigation">
    <ul>
     <li>Some menu item</li>
     <li><!--button to toggle side panel here--></li>
    </ul>
   </nav>

   <!--Site content goes here-->

</div>
<div id="side-content-wrapper"><!--Side panel content here--></div>

但是我不知道Javascript / JQuery和CSS會如何尋找，以及如何使側面板推送主要內容，包括單擊按鈕時左側的導航欄。 就像我說的，我發現的示例有可插入的側面導航欄，但我要放在側面的div不是導航欄。

任何線索將不勝感激！

謝謝

Answer 1

導航欄標題內有一個漢堡圖標來更改品牌名稱

<a class="navbar-brand" href="#">
    <span class="glyphicon glyphicon-menu-hamburger" onclick="openSideNav()"></span>
</a>

並在您體內的某處添加側板

<div id="mySidenav" class="sidenav">
    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
</div>

然后添加樣式以默認隱藏sidenav並僅在單擊漢堡包時打開

.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 50px;
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
transition: margin-left .5s;
padding: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}

最后使用javascript切換側邊欄

function openSideNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}