1
メニューナビを開くハンバーガーアイコンをクリックすると、この種のメニューナビゲーション(http://cnn.com)を実装したいと思います。私はこれがモーダルであるかどうかわからない、誰もがHTMLのこのようなメニューのnavのCSS、およびjQueryを作成する方法を知っている?ここでHTML、CSS、およびJQueryを使用してCNNメニューナビゲーションを作成する方法
メニューナビを開くハンバーガーアイコンをクリックすると、この種のメニューナビゲーション(http://cnn.com)を実装したいと思います。私はこれがモーダルであるかどうかわからない、誰もがHTMLのこのようなメニューのnavのCSS、およびjQueryを作成する方法を知っている?ここでHTML、CSS、およびJQueryを使用してCNNメニューナビゲーションを作成する方法
はあなたが始めるために何か:
$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>
これはとてもシンプルなので、ありがとうNeil、あなたは素晴らしいです。私は残りの部分を把握します。 –
あなたのtryコードは、私はまだ1を作成していない –
申し訳ありませんが、私はいくつかの例を探しています、おそらくあなたはいくつかのリンクやチュートリアルを提供することができます。ありがとうございました。 –