私は本当にフォールバックが好きです。JavaScript や jquery を使用することはほとんどありませんが、使用する場合はフォールバックを提供したいと思っています。現在、ブラウザに JavaScript が存在しないとナビゲートできないサイトもあります。一部の開発者は、それが存在しない場合、コンテンツをナビゲートしたりアクセスしたりできないことを当然のことと考えています。Twitter Bootstrap でさえ、フォールバックを提供しません。JavaScript が無効になっている場合、モバイル メニューは表示または展開されません。
jquery の .toggle 関数を使用して、モバイル メニューを表示および非表示にしています。メニューのコンテナをdisplay: none;に設定しています。私のcssで、最初に私のサイトにアクセスしたときにメニューが非表示になるようにします。javascriptが無効になっているか、ブラウザに存在しない場合、メニューコンテナが単に表示されるようにしたいのです。
99% の確率で js が存在し、有効になっている可能性が高いことを認識しています。私はまだこれをやりたいです。だからここに私のコードがあります。
html/js
<header>
<div id="click">Toggle</div>
</header>
<div id="mobilemenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Random</a></li>
<li><a href="#">Submit</a></li>
</ul>
</div>
<script>
var flip = 0;
$("#click").click(function () {
$("#mobilemenu").toggle();
});
</script>
CSS
/* header */
header {
background: #2e97de;
width: 100%;
height: 45px;
border-bottom: #287eb9 1px solid;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
display: block;
}
/* mobile menu */
#mobilemenu {
border-top: #8dc8f2 1px solid;
min-width: 100%;
background: #2e97de;
display: none;
}
#mobilemenu ul {
}
#mobilemenu li {
display: block;
}
#mobilemenu li a {
padding: 10px;
color: #95d3ff;
display: block;
text-decoration: none;
}
ご覧のとおり、私のメニューはシンプルで、div 内に 3 つのリスト項目がある順序付けられていないリストです。私がやりたいことは、js が有効になっていないか存在しない場合にdiv #mobilemenuを表示できるようにすることです。しかし、js が有効または存在する場合、#mobilemenu は表示されないようにしたいと思います。
また、トグルを処理する jquery を強化する方法を教えてくれるフィードバックをいただければ幸いです。