ハンバーガーボタン、アコーディオンメニューを実装

 

ハンバーガーボタン

 

ハンバーガーボタン(ハンバーガーアイコン)は、スマートフォンサイトでよく見る三本線のボタンです。

画像を使わずにCSSだけでハンバーガーボタンを作ってみます。検索すると、ボーダー設定用のspan要素の前後に擬似要素を追加して、それをブロック要素に変えて～・・・というやり方が多くヒットしたのですが、そこまでやるなら最初からボーダー用のボックスを3つ配置すればいいのではと考え、以下のようなコードになりました。スマートではないかもしれませんが・・・。

 

HTML

<div id="hamburger">
 <div id="button">
  <div id="border-box">
   <div></div>
   <div></div>
   <div></div>
  </div>
 </div>
</div>

 

CSS

#hamburger {
 background-color: #cccccc;
 width: 100%;
 height: 60px;
}
#button {
 position: relative;
 background-color: #23282d;
 width: 20%;
 height: 60px;
/* ボタン配置を右に寄せる */
 margin-right: 0;
 margin-left: auto;
}
#border-box {
/* 三本線を入れたボックスの上下左右中央揃え */
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 margin: auto;
/* この背景色は分かり易くする為だけに色付けしたものです */
 background-color: #996666;
 width: 36px;
 height: 36px;
}
#border-box div {
 background-color: #ffffff;
 border-radius: 2px;
 width: 100%;
 height: 4px;
 margin: 6px auto;
}

 

出来ました。※三本線の入ったボックスの位置を分かり易くする為背景色を設定しています。

 

 

アコーディオンメニュー

 

大抵の場合ハンバーガーボタンを押すとその下にメニューが展開されます。そしてもう一度ボタンを押すとメニューが折り畳まれます。アコーディオンのように伸縮する様から、こういったメニューをアコーディオンメニューと呼びます。単純にハンバーガーボタンから展開されるメニューという事でハンバーガーメニューとも言います。

 

 

このブログのメニューバー(グローバルナビゲーション)はメインボックスを基本幅として、20%区切りの横幅で各メニュー項目を表示しています。PCやiPad表示だと問題ないのですが、スマホ表示の場合十分な横幅が確保出来ず、長いメニュータイトルだと文字が見切れてしまうので、先に挙げた画像のように、スマホ表示では各メニュー項目の横幅を100%確保したアコーディオンメニューとする事にしました。

 

 

レスポンシブデザインのサイトで、スマホ表示の場合のみハンバーガーボタンを表示する方法の一例です。

まずはボタンとメニューのボックスが縦に並ぶようにHTMLを記述します。仮にハンバーガーボタンを設置したボックスをハンバーガーボタンエリア、その下に展開されるメニューリストを内包したボックスをメニューバーエリアとしましょう。

 

※HTMLの参照はブラウザのソース確認機能をご利用ください

/* #global開始 */
#global {
 background-color: #cccccc;
 width: 100%;
 min-height: 60px;
}
#global ul li {
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 border-left: 1px solid #ffffff;
 background-color: #0073aa;
 float: left;
 line-height: 60px;
 list-style: none;
 text-align: center;
 width: 20%;
 height: 60px;
 overflow: hidden;
}
#global ul li:first-child {
 border-left: none;
}
#global ul li a {
 display: block;
 color: #ffffff;
 text-decoration: none;
}
#global ul li a:hover {
 background-color: #d54e41;
 color: #ffffff;
}/* #global終了 */

 

 

#hamburger {
 display: none;
}

CSSでdisplay: none;を指定すると要素を非表示に出来ます。これでPCからアクセスがあった場合はハンバーガーボタンエリア(id=”hamburger”と仮定)を非表示、スマホからアクセスがあった場合はハンバーガーボタンエリアを表示といった事が出来ます。

また、スマホ表示に対応したメニューバーエリアのCSSを用意します。このブログの場合PC表示用のメニューはfloat: left;で横に並べていますが、この設定を無効にし、width: 20%;の設定をwidth: 100%;にします。

 

#global {
 display: none;
}

さらにスマホ表示の設定として、最初はメニューバーエリア(id=”global”と仮定)を非表示に設定します。あとはハンバーガーボタンが押されたらメニューバーエリアの表示、非表示を切り替えるだけです。これはjQueryで簡単に実現出来ます。

 

 

<script type="text/javascript">
 jQuery('#button').on('click', function() {
  jQuery('#global').slideToggle();
 });
</script>

たったこれだけのコードで、ハンバーガーボタン(id=”button”と仮定)が押されたら、メニューバーエリアをスライド展開or折り畳む事が出来ます。

 

jQuery('#global').toggle();

toggleは要素が非表示状態なら表示状態に、表示状態なら非表示状態に・・・と、ON/OFFボタンのように切り替えを行える便利な関数です。()内に実行開始から完了までの秒数を指定する事が出来ます。ミリ秒単位なので、例えば(3000)を指定すると3秒です。

 

1. リスト1
2. リスト2
3. リスト3
4. リスト4
5. リスト5

 

jQuery('#global').slideToggle();

slideToggle()とする事でスライド表示(非表示)となります。まさにアコーディオンメニュー実装の為にあるような関数です。こちらも()内に実行時間を指定する事が出来ます。fadeToggle()という関数もあり、その名の通りこちらはフェード処理となります。

 

1. リスト1
2. リスト2
3. リスト3
4. リスト4
5. リスト5

1. リスト1
2. リスト2
3. リスト3
4. リスト4
5. リスト5

 

 

このブログでは記事でもjQueryを利用するので、ついでというのもなんですが頭を捻らずjQueryでアコーディオンメニューを実装しました。検索するとCSSだけでアコーディオンメニューを実装する方法もいくつかヒットします。

参考リンク: CSSだけでアコーディオンを実装