レスポンシブメニューの実装

　レスポンシブ web デザインにおいて、スマートフォンといった表示領域が限られた中でサイト内リンクは別で表示するといった手法が多く見られます。
　横線が縦に３本並んだボタンをクリックすることで、サイト内リンクといったナビメニューが表示されるものです。
　この横線が縦に３本並んだボタンをレスポンシブメニュー、ハンバーガーメニューといったりします。ここではこのレスポンシブメニューの作成方法について解説します。

- ad -

レスポンシブメニューのアイコン作成

　レスポンシブメニュー（ハンバーガーメニュー）用のアイコンの作成からです。基本的に <div> と <span> で作成しています。

　アイコンをクリックするとアイコンの形を変更してメニューが開いた状態と閉じた状態が分かるようにしています。
　アイコンのクリックは JavaScript の onclick イベントハンドラーで捉えます。

CSSあり scriptあり別ページで開きます。

HTML

　レスポンシブメニューの作成用の HTML テキストです。
　<div> と <span> で作成します。<div> はレスポンシブメニュー用の操作ボタンの枠、 <span> はその中のハンバーガーメニューを表す線です。

CSS

　上記の HTML テキストに CSS でボタンの形を整形します。
　大きさは、#responsive_menu の height と width で外形を。#responsive_menu span の height で線の太さを指定しています。
　もしも線の太さ　#responsive_menu span の height を変更するなら、それ以降の 3px を合わせて変更します。

JavaScript

　レスポンシブメニューボタンをクリックしたら、コンテンツを表示/非表示するためのスクリプトです。
　以下の関数を window.onload によって読み込みます。以下の window.onload は適宜編集して下さい。
　コンテンツの表示、非表示に関するコードはコメントアウトしてあります。適宜編集して下さい。