スマホで「三」をタップ(クリック)すると、メニューがニュル～っと出てくるやつ

正式名称は、ハンバーガーメニューと言うらしいが、あまりこの呼称は浸透していない。

もちろんスマホも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();
});
});