Bootstrap 3關閉畫布（滑過）菜單

Question

所以我想實現我的導航欄的畫布外菜單。我不能完全弄清楚這一點與在http://getbootstrap.com/examples/offcanvas/

當屏幕的寬度小於991px下被賦予代碼，頂部鏈接應該站出來在垂直列表中單擊菜單（或漢堡）圖標時上。我希望垂直列表可以滑過內容，這樣菜單圖標仍然可以看到。所以不是推動效應。

的什麼，我描述了一個很好的例子就是在這個網站http://tympanus.net/Development/SidebarTransitions/

「幻燈片上評出的」過渡這裏是我的導航欄的bootply。 http://www.bootply.com/r8RRCqHo9J

導航

<header class="navbar navbar-inverse navbar-static-top" role="banner"> 
<div class="container"> 
<div class="navbar-header"> 
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".navbar-collapse"> 
<span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
</button> 
<a class="navbar-brand" href="#"><img class="img-responsive" src="http://placehold.it/234x84&text=LOGO" alt="..." style="padding:18px 5px"></a> 
</div> 
<nav class="collapse navbar-collapse" role="navigation"> 
<ul class="nav navbar-nav navbar-inverse"> 

<li class="active"> 
<a href="#">Home</a> 
</li> 

<li> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 1</a> 
<ul class="dropdown-menu"> 
<li class="drop-down"><a href="#">Sub-Item 1</a></li> 
<li class="drop-down"><a href="#">Sub-Item 2</a></li> 
<li class="drop-down"><a href="#">Sub-Item 3</a></li> 
<li class="drop-down"><a href="#">Sub-Item 4</a></li> 
</ul> 
</li> 

<li> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 2</a> 
<ul class="dropdown-menu"> 
<li class="drop-down"><a href="#">Sub-Item 1</a></li> 
<li class="drop-down"><a href="#">Sub-Item 2</a></li> 
</ul> 
</li> 

<li> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 3</a> 
<ul class="dropdown-menu"> 
<li class="drop-down"><a href="#">Sub-Item 1</a></li> 
<li class="drop-down"><a href="#">Sub-Item 2</a></li> 
</ul> 
</li> 

<li> 
<a href="#">Link 4</a> 
</li> 

<li> 
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Link 5</a> 
<ul class="dropdown-menu"> 
<li class="drop-down"><a href="#">Sub-Item 1</a></li> 
<li class="drop-down"><a href="#">Sub-Item 2</a></li> 
<li class="drop-down"><a href="#">Sub-Item 3</a></li> 
</ul> 
</li> 


</ul> 
</nav> 
</div> 
</header> 

Answer 1

你只需要Navbar的靜態頂部導航欄固定頂和添加填充到體內。 選中此bootply：http://www.bootply.com/X2s18rcAdN

---

UPDATE：

工作的解決方案：http://jsbin.com/yuxesupixu/1/edit?html,css,js

基於由Christina做出偉大的工作：https://stackoverflow.com/a/20864689/1004312