ブートストラップ4モバイルナビゲーションバーが左からスライド

Question

最新のブートストラップを使用しています。私自身でさまざまなことを試してみた後、私はstackoverflowで何かを見つけるかもしれないと思った。しかし、親切なことは得られなかった。それはどういう意味ですか？

これは私のコードです。私はここでカスタムスタイルを追加するつもりはありません。なぜなら、実際にうまく動作しなかったので、何らかのエラーが発生したからです。

私もこの投稿をチェックしましたBootstrap - How to slide nav bar from left instead from topそこからすべての回答を試みましたが、それは私のためには機能しませんでした。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
    <nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse"> 
 
\t <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> 
 
\t <span class="navbar-toggler-icon"></span> 
 
\t </button> 
 
\t <a class="navbar-brand" href="">Roknil Style</a> 
 
\t <div class="collapse navbar-collapse" id="navbarCollapse"> 
 
\t \t <ul class="navbar-nav mr-auto"> 
 
\t \t \t <li class="nav-item active"> 
 
\t \t \t \t <a class="nav-link" href="#">Home</a> 
 
\t \t \t </li> 
 
\t \t \t <li class="nav-item"> 
 
\t \t \t \t <a class="nav-link" href="#">Link</a> 
 
\t \t \t </li> 
 
\t \t \t <li class="nav-item"> 
 
\t \t \t \t <a class="nav-link" href="#">About</a> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t \t <form class="form-inline mt-2 mt-md-0"> 
 
\t \t <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
 
\t \t <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
 
\t \t </form> 
 
\t </div> 
 
    </nav> 
 

 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Answer 1

実は、あなたはスライドから左効果を実装するために@Hrvoje Golcicのsolutionを使用することができます。

コードをチェックしていくつかの問題を修正しました。次のコードスニペットを確認してください。ナビゲーションバーをスタイルするために、より多くのCSSルールを定義する必要があるかもしれません。

$(function(){ 
 
    // mobile menu slide from the left 
 
    $('[data-toggle="slide-collapse"]').on('click', function() { 
 
    $navMenuCont = $($(this).data('target')); 
 
    $navMenuCont.animate({'width':'toggle'}, 280); 
 
    }); 
 
})

#navbarCollapse { 
 
     position: fixed; 
 
     top: 0; 
 
     left: 0; 
 
     z-index: 1; 
 
     width: 280px; /*example + never use min-width with this solution */ 
 
     height: 100%; 
 
     background: #000; 
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 

 
    <nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse"> 
 
\t <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="slide-collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> 
 
\t <span class="navbar-toggler-icon"></span> 
 
\t </button> 
 
\t <a class="navbar-brand" href="">Roknil Style</a> 
 
\t <div class="collapse navbar-collapse" id="navbarCollapse"> 
 
\t \t <ul class="navbar-nav mr-auto"> 
 
\t \t \t <li class="nav-item active"> 
 
\t \t \t \t <a class="nav-link" href="#">Home</a> 
 
\t \t \t </li> 
 
\t \t \t <li class="nav-item"> 
 
\t \t \t \t <a class="nav-link" href="#">Link</a> 
 
\t \t \t </li> 
 
\t \t \t <li class="nav-item"> 
 
\t \t \t \t <a class="nav-link" href="#">About</a> 
 
\t \t \t </li> 
 
\t \t </ul> 
 
\t \t <form class="form-inline mt-2 mt-md-0"> 
 
\t \t <input class="form-control mr-sm-2" type="text" placeholder="Search"> 
 
\t \t <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> 
 
\t \t </form> 
 
\t </div> 
 
    </nav> 
 

 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Answer 2

あなたは[ブートストラップの可能性のある重複した...このようなnavbar-collapseため

Demo

@media (max-width: 768px) { 
    .navbar-collapse { 
     position: absolute; 
     top: 54px; 
     left: 0; 
     padding-left: 15px; 
     padding-right: 15px; 
     padding-bottom: 15px; 
     width: 100%; 
    } 
    .navbar-collapse.collapsing { 
     height: auto; 
     -webkit-transition: left 0.3s ease; 
     -o-transition: left 0.3s ease; 
     -moz-transition: left 0.3s ease; 
     transition: left 0.3s ease; 
     left: -100%; 
    } 
    .navbar-collapse.show { 
     left: 0; 
     -webkit-transition: left 0.3s ease-in; 
     -o-transition: left 0.3s ease-in; 
     -moz-transition: left 0.3s ease-in; 
     transition: left 0.3s ease-in; 
    } 
} 

Demo