ブートストラップの左からスライドバーをスライド

Question

ナビゲーションバーを左からスライドしようとしています。現在、上からスライドしています。私はこれを試してみました：

フィドル：http://jsfiddle.net/52VtD/14779/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 

 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background:#f8f8f9;"> 
 
     <div class="container"> 
 
     <!-- Static navbar --> 
 
     <div class="navbar navbar-default"> 
 
      <div class="navbar-header"> 
 
      <button type="button" id="collbtn" class="navbar-toggle pull-left" data-toggle="collapse" data-target=".navHeadCollapse"> <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
       <span class="icon-bar"></span> 
 
    
 
      </button> <a class="navbar-brand" href="#">Project name</a> 
 
    
 
      </div> 
 
    
 
     </div> 
 
     <ul class="nav navbar-nav allCaps navbar-collapse collapse navHeadCollapse navbar-right"> 
 
      <li><a href="#">Home</a></li> 
 
      <li><a href="#">Profile</a></li> 
 
      <li><a>Contact</a></li> 
 
      <li><a>Help</a></li> 
 
     </ul> 
 
     </div> 
 
    </nav>

私はこの上の記事を見てきましたが、彼らは私のために動作しません。

Answer 1

多分このような何か？

HTML

<nav> 

<div id="sidebar"> 

    <h1>Your nav here</h1> 


    <div id="sidebar-btn"> 
     <i class="fa fa-bars fa-2x"></i> 
    </div> 
</div> 

CSS

#sidebar > h1 { 
    color: #FFFFFF; 
    text-align: center; 
    margin-left: -13px;  
} 
#sidebar > h5 { 
    color: #FFFFFF; 
    text-align: center; 
} 
#sidebar-btn { 
    display: inline-block; 
    vertical-align: middle; 
    width: 29px; 
    height: 29px; 
    cursor: pointer; 
    margin: 20px; 
    position: absolute; 
    top: 0; 
    right: -60px; 
    background-color: #000000; 
    color: #FFFFFF; 
    padding: 6px; 
    border-radius: 0px 5px 5px 0px; 
} 

#sidebar { 
    background: #000000; 
    width: 200px; 
    height: 100%; 
    display: block; 
    position: absolute; 
    left: -200px; 
    top: 0; 
    transition: left 0.3s linear; 
} 
#sidebar > ul > li > a { 
    text-decoration: none; 
} 
#sidebar > ul { 
    padding: 0px; 
    text-align: center; 
    margin-left: -14px; 
} 
#sidebar.visible { 
    left: 0; 
    transition: left 0.3s linear; 
} 

のJavaScript

$('#sidebar-btn').click(function() { 
    $('#sidebar').toggleClass('visible'); 
}); 
// Operator 
    $('#operator').click(function() { 
    $('#operator_show').fadeIn('slow'); 
    }); 
    $('.close').click(function() { 
    $('#operator_show').fadeOut('slow'); 
    }); 

がそれにjsfiddleを添加

https://jsfiddle.net/Cyrus_Zei/wznwyc2u/