スマホで「三」をタップ(クリック)すると、メニューがニュル～っと出てくるやつ
正式名称は、ハンバーガーメニューと言うらしいが、あまりこの呼称は浸透していない。
もちろんスマホもPCも対応。
とにかく、これを導入してみよう。
導入イメージはこんな感じ↓
デモページはこちら(デモページ右上にMENUがある。)
jQueryなどのメニューに必要なものを揃える
右クリックで「対象を保存」などでダウンロード可能。
・jquery.min.js
・jquery-ui.min.js
・menu3.js
・index.html
・menu3.css
・「三」と「X」の画像
これが最低限必要。
ちなみに、上記リンク先は全てテキストにしているので、ダウンロードして使う場合は、拡張子の.txtをそれぞれ、「.js」「.css」「.html」などに変更しておくこと。
3menu.zip
↑index.html、menu3.css、menu3.js、jquery.min.js、jquery-ui.min.js、MENUとXの画像2個を全てまとめて圧縮したもの(フォルダ階層あり)はこちら。
サーバー上に設置
cssフォルダ/menu3.css
imgフォルダ/menu.png、menu2.png
jsフォルダ/jquery.min.js、menu3.js、jquery-ui.min.js
index.html
と言う感じで設置する。
パーミッション等は変更必要ないので、そのままアップロードする。
メニューや色などの変更
・メニューの中身は index.html の中の menu1 menu2 menu3 などと書いている部分を修正。
URLも同様。
なお、同じように menu5 menu6 を追加すれば、メニューは自動的に増える。
・色は menu3.css の
.menu3 {
z-index: 1000000;
font-weight: bold;
font-size: 0.8em;
width: 100%;
background: #FFCC00;
position: fixed;
top: 20px;
right: 0;
text-align: center;
}
この辺りを修正。
画像等も適当に入れ替え可能。
ハンバーガーメニューの簡単な解説
HTMLファイル
↓下記コードの2行目の button の img/menu.png の部分を MENU などのテキストにする事も可能。
その場合はCSSでサイズなどを調整する必用がある。
※サンプルの menu.png は iOSのRetinaディスプレイ対応のため、画像サイズが陪になっている。
<div><!– humberger menu–>
<button class=”hamburger”><img src=”img/menu.png” width=”51px” height=”45px” /></button>
<button class=”cross”><img src=”img/menu2.png” /></button>
</div>
<div class=”menu3″>
<ul>
<a href=”index.html”><li>menu1</li></a>
<a href=”2.html”><li>menu2</li></a>
<a href=”3.html”><li>menu3</li></a>
<a href=”4.html”><li>menu4</li></a>
</ul>
</div>
<script src=’https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js’></script>
<script src=”js/menu3.js”></script>
menu3.js
スタイルシートなどに記述するクラス名などを変更したい場合はこちらを編集。
$(“.cross”).hide();
$(“.menu3”).hide();
$(“.hamburger”).click(function() {
$(“.menu3”).slideToggle(“slow”, function() {
$(“.hamburger”).hide();
$(“.cross”).show();
});
});
$(“.cross”).click(function() {
$(“.menu3”).slideToggle(“slow”, function() {
$(“.cross”).hide();
$(“.hamburger”).show();
});
});
