ナビゲーション応答の問題

Question

ナビゲーションバーに問題があります。私の目的は、通常の水平ナビゲーションバーをデスクトップ上に置いてから、折りたたみ可能なナビバーをモバイル上に置くことです。その1つは間違っています。私はリンクを隠してトグルボタンがクリックされたら、それらを表示することはできません。

Codepen：http://codepen.io/anon/pen/RRGvYV

HTML：

CSS（SASS）：

@media (min-width : 768px) 
    .navigation-bar 
     list-style-type: none 

     ul 
      float: left 

     li 
      float: left 

     &:before, &:after 
      display: table 
      content: "" 
    .nav-right 
     float: right !important 
    .navigation-top 
     width: auto !important 
     padding: 5px 20px 
     float: left 
     line-height: 40px 
    .nav-toggle 
     display: none !important 

.open 
    display: block!important 

.collapase 
    display: none 

.navigation-top 
    width: 100% 
    padding: 5px 20px 
    float: left 
    line-height: 40px 
    border-bottom: solid 1px #E5E5E5 
.nav-name 
    font-weight: bold 
    float: left 
.navigation-group 
    min-height: 50px 
    background-color: #fff 
    &:before, &:after 
     display: table 
     content: ""  


.navigation-bar 

    li 
     position: relative 
     display: block 
     line-height: 40px 

    a 
     display: block 
     color: #000 
     text-align: center 
     padding: 5px 20px 
     font-weight: bold 
     text-decoration: none  

    &:before, &:after 
     display: table 
     content: "" 

.navigation-name 
    float: left 
    padding: 10px 20px 
    font-size: 18px 
    text-decoration: none 
    font-weight: bold 
    color: red 

.nav-toggle 
    display: block 
    font-size: 34px 
    font-weight: bold 
    position: relative 
    float: right 
    padding: 6px 12px 
    margin-top: 0px 
    margin-right: 15px 
    margin-bottom: 0px 
    background-color: transparent 
    background-image: none 
    border: 1px solid transparent 
    border-radius: 4px 
    cursor: pointer 
    outline: none 

のjQuery：

$("#nav-toggle").click(function(){ 
    $(".navigation-bar").toggle(); 
    }); 

イムは、ブートストラップのようなシステムを探しています。

Answer 1

私が更新したのは、あなたのコードブックでのjqueryの使用だけです。それはすべてです、あなたを助ける希望。 codepen：http://codepen.io/anon/pen/BzLMgxを参照してください。また、角括弧とCSS構文を追加する必要があります。外部https://code.jquery.com/jquery-2.2.4.min.jsコードを追加しました。また、私はボタンの20からz-index編集した、それは

Answer 2

1. があなたのcodepenにjquery.min.jsを追加ドロップダウン（例リンク）の最初のリンクの層の下にあるために使用されます。
2. 使用$("nav.navigation-bar").toggleClass("open");
   代わりの$(".navigation-bar").toggle();
3. メニューが展開されている場合、それはトグルボタンをカバーしています。このため、ボタンにはアクセスできなくなります。 .nav-toggleクラスにz-index: 20;プロパティを追加することで問題を解決できます。

結果を確認します。http://codepen.io/glebkema/pen/BzLbve