如何制作自举侧面板/ 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怎么会寻找那些和如何以获得侧面板推动主要内容，包括点击按钮时左侧的导航栏。正如我所说，我发现的例子有滑动的侧面navbars，但我想在侧面的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"; 
}