2017-02-16 17 views
0

こんにちは私の垂直メニューを右から左にスライドさせたいのですが。しかし、jqueryが付いている限りは、.toggle()(これは上から下へスライドしています) ハンバーガーメニューをクリックすると、右から左にスライドするメニューが表示されます。 any1は私を助けることができる場合、私は本当に右から左へスライドするメニュー> Jquery

は私が右から左にスライドさせるjQueryを使ってみました任意のコードを持っていけないaprreaciateだろう、私は唯一の.toggle

.ham-menu{ 
 
    width: 35px; 
 
    display: block; 
 
    z-index: 2; 
 
    position: relative; 
 
    top: 10px; 
 
    right: 15px; 
 
    cursor: pointer; 
 
} 
 

 
.ham-menu .line{ 
 
    background: green; 
 
    width: 100%; 
 
    display: block; 
 
    margin-top: 3px; 
 
    height: 4px; 
 
    border-radius: 2px; 
 
} 
 
.first-section{ 
 
    padding: 0; 
 
} 
 
.first-section .slide-menu{ 
 
    width: 20vw; 
 
    height: 100vh; 
 
    background-color: #000; 
 
    z-index: 1; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 
.list-menu{ 
 
    list-style: none; 
 
    text-align: center; 
 
    font-size: 30px; 
 
} 
 
.list-menu li{ 
 
    margin: 20px; 
 
} 
 
.list-menu a{ 
 
    text-decoration: none; 
 
    color: #fff; 
 
}
<div class="ham-menu"> 
 
     <span class="line"></span> 
 
     <span class="line"></span> 
 
     <span class="line"></span> 
 
</div> 
 

 
<div class="first-section container-fluid"> 
 
     <div class="slide-menu"> 
 
      <ul class="list-menu animated"> 
 
       <li><a href="#">Home</a></li> 
 
       <li><a href="#">About</a></li> 
 
       <li><a href="#">Contact</a></li> 
 
       <li><a href="#">Footer</a></li> 
 
      </ul> 
 
     </div> 
 
    </div>
で試してみました

答えて

1

は、これは、あなたは何を探していますか?

CodePen link

.first-section{ 
    display: none; 
    padding: 0; 
} 

のjQuery:

$('.ham-menu').click(function(){ 
    $('.first-section').toggle(); 
}) 
+0

ないexactly..The垂直divが表示され:なしと右から左にスライドしなければハンバーガーメニューをクリックしました。私はディスプレイで縦のdivを非表示にしませんでした:none、あなたが存在することを確認することができます –

+0

私は私の答えを更新しました。これが必要なものかどうか確認してください。 – amansoni211

+0

ありがとう、私はいくつかのアニメーションのために進めます、ありがとう –

関連する問題