2017-03-16 24 views
1

メニューナビを開くハンバーガーアイコンをクリックすると、この種のメニューナビゲーション(http://cnn.com)を実装したいと思います。私はこれがモーダルであるかどうかわからない、誰もがHTMLのこのようなメニューのnavのCSS、およびjQueryを作成する方法を知っている?ここでHTML、CSS、およびJQueryを使用してCNNメニューナビゲーションを作成する方法

CNN Menu Nav

+0

あなたのtryコードは、私はまだ1を作成していない –

+0

申し訳ありませんが、私はいくつかの例を探しています、おそらくあなたはいくつかのリンクやチュートリアルを提供することができます。ありがとうございました。 –

答えて

1

はあなたが始めるために何か:

$hamberger = $("#hambergerMenu"); 
 
$("#triggerMenu").click(function() { 
 
    $hamberger.show(500); 
 
}); 
 

 
$("#closeHamberger").click(function() { 
 
    $hamberger.hide(500); 
 
});
#hambergerMenu { 
 
    position: fixed; 
 
    display: none; 
 
    width: 100%; 
 
    height: 100%; 
 
    left: 0; 
 
    top: 0; 
 
    background-color: #a6a6a6; 
 
} 
 

 
#closeHamberger { 
 
    margin: 10px; 
 
    position: fixed; 
 
    right: 0; 
 
    font-size: 2em; 
 
    top: 0; 
 
    text-decoration: none; 
 
    color: white; 
 
} 
 

 
#hambergerMenu ul { 
 
    list-style: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<img id="triggerMenu" src="http://neil.computer/stack/3line.png" /> 
 
<div id="hambergerMenu"> 
 
    <a id="closeHamberger" href="javascript:void(0)">X</a> 
 
    <ul> 
 
    <li> 
 
     Content 
 
    </li> 
 
    <li> 
 
     Good Content 
 
    </li> 
 
    <li> 
 
     Bad Content 
 
    </li> 
 
    <li> 
 
     Meh Content 
 
    </li> 
 
    <li> 
 
     SO Content 
 
    </li> 
 
    </ul> 
 
</div>

+0

これはとてもシンプルなので、ありがとうNeil、あなたは素晴らしいです。私は残りの部分を把握します。 –

関連する問題