Webページでドロワーメニュー (Drawer Menu) を実装する - CSS

Webページでドロワーメニュー (Drawer Menu) を実装するコードを紹介します。

概要

スマートフォン向けのページなどでハンバーガーメニューアイコンをタップすると右側や左側にメニュー (ドロワーメニュー)が表示されるページがあります。この記事では、HTMLページでドロワーメニューを実装するためのコードを紹介します。

プログラム例

コード

下記のHTML、CSSファイルを作成します。

LeftDrawer.css

#DrawerMenu{
  display:none;
  width:260px;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  background-color:#E0E0E0;
  border:1px solid #808080;
}

LeftDrawer.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="LeftDrawer.css">

  <script type="text/javascript">
    function openMenu() {
      var elem = document.getElementById('DrawerMenu');
      elem.style.display = 'block';
    }
    function closeMenu() {
      var elem = document.getElementById('DrawerMenu');
      elem.style.display = 'none';
    }
  </script>
</head>
<body>
  <p>デモページです</p>
  <hr/>
  <p><a href="javascript:openMenu();">メニュー表示</a></p>
  <p>ABCDE</p>
  <p>FGHIJ</p>
  <p>12345</p>

  <div id="DrawerMenu">
    <p>メニュー</p>
    <p><a href="javascript:closeMenu();">閉じる</a></p>
    <p>項目1</p>
    <p>項目2</p>
    <p>項目3</p>
    <p>項目4</p>
    <p>項目5</p>
  </div>
</body>
</html>

解説

bodyタグ内に元のページのコンテンツを記述します。
<div id="DrawerMenu"> タグ部分がリンクのクリックにより表示されるドロワーメニューの枠になります。
表示、非表示の際には枠の要素を取得する必要があるため、divタグにidを設定して枠の要素をJavaScriptで取得できるようにしています。

  <div id="DrawerMenu">
    <p>メニュー</p>
    <p><a href="javascript:closeMenu();">閉じる</a></p>
    <p>項目1</p>
    <p>項目2</p>
    <p>項目3</p>
    <p>項目4</p>
    <p>項目5</p>
  </div>

ドロワーメニューはページのコンテンツより手前で重なる表示になるため、position:absoluteを指定します。また、top:0 left:0を指定しページの左側にドロワーメニューを表示します。
ドロワーメニューの大きさは width,height プロパティで指定します。

#DrawerMenu{
  display:none;
  width:260px;
  height:100%;
  position:absolute;
  left:0;
  top:0;
  background-color:#E0E0E0;
  border:1px solid #808080;
}

ドロワーメニューの表示はJavaScriptで切り替えます。リンクのクリックでJavaScriptの関数を呼び出しています。

  <p><a href="javascript:openMenu();">メニュー表示</a></p>

  <p><a href="javascript:closeMenu();">閉じる</a></p>

JavaScriptの関数では、idにDrawerMenuの値を持つ要素を取得し、その要素のdisplayプロパティを変更して、ドロワーメニューの枠の表示を切り替えます。

function openMenu() {
  var elem = document.getElementById('DrawerMenu');
  elem.style.display = 'block';
}

function closeMenu() {
  var elem = document.getElementById('DrawerMenu');
  elem.style.display = 'none';
}

表示結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
[メニュー表示]のリンクをクリックします。

[メニュー表示]のリンクをクリックすると左側にドロワーメニューの枠が表示されます。
[閉じる]リンクをクリックします。

[閉じる]リンクをクリックするとドロワーメニューが非表示になります。

プログラム例 : ドロワーメニューをページの右側に表示する場合

ドロワーメニューをページの右側に表示する場合は、スタイルシートを下記に変更します。

#DrawerMenu{
  display:none;
  width:260px;
  height:100%;
  position:absolute;
  right:0;
  top:0;
  background-color:#E0E0E0;
  border:1px solid #808080;
}

解説

左側に表示する場合はドロワーメニューの枠の要素に left:0; を指定していましたが、右側に表示する場合は、leftプロパティを指定せずに right:0 を指定します。
rightプロパティは右からの配置位置を指定するプロパティです。(基準位置の右端から配置するボックスの右端の値を設定します。) right:0:を指定することでドロワーメニューの枠をページの右側に表示できます。