ブートストラップサイドパネル/ 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はnavbarではありません。

いずれのリードも高く評価されます。ナビゲーションバーのヘッダ内

おかげ

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;} 
} 

、最終的にあなたがcodepen作業は、あなたの問題が何であるか持っているサイドバー

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

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