ホームページの上部に漢字の 三 （ハンバーガーボタン）に似たアイコンをクリックするとメニューが表示される。 ことのき、メニューは右または左からスライドするものがある。
スライドメニュー（またはドロワーメニュー）は、CSSだけで作成することができる。
<< 作成ポイント >>
CSSの transform: translateX() または transform: translateY() でメニュー領域を表示したり、隠したりすることがポイント。
表示したり、隠したりするスイッチは HTMLの inputタグ を記述し。CSSの :checked でスイッチとして、オン（有効）／オフ（無効）する要素を指定する。
実際のホームページでは、チェックするクリック領域を 三 記号に変えているだけである。
ポイントは以上
今回は、以下のように右側、左側、上部または下部からスライドさせてメニュー領域を表示したり、隠したりするコードを記した。
<< 右、左、上または下からスライドさせる使い分け >>
メニューを画面のどこに隠しておくかである。
例えば右からスライドさせる場合に、画面右側の見えない位置に隠して、ハンバーグボタンでオン（チェックを入れる）にすると、隠れたメニュー領域が画面の右から移動し、表示される。
この時、移動する速さを CSSの transition: 0.6s などのように設定することによって、瞬時に表示させるのではなく、移動するように見せることができる。
三 メニュー表示 （チェックが入る）
× メニューを閉じる（チェックが外れる）
図 メニューが表示されていない状態
右からスライド
左からスライド
上から
下から
<< HTMLコード 共通 >>
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Test left-right</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="nav-drawer">
<!-- 開くボタン｜ハンバーガーアイコン -->
<input type="checkbox" id="nav-input" class="nav-unshown" />
<label id="nav-open" for="nav-input"><span>三</span></label>
<label class="nav-unshown" id="nav-close" for="nav-input"></label>
<!-- //開くボタン｜ハンバーガーアイコン -->
<div id="nav-content">
<!-- 閉じるボタン｜Ｘ
<label class="nav-unshown" id="nav-close2" for="nav-input">
<span></span>
</label>
<!-- //閉じるボタン｜Ｘアイコン -->
<br>ここはメニューです。ボックスにチェックが入ると、表示されます。<br>
チェックを外すと閉じます。<br><br>
原理は、デフォルトで表示領域外に設定し、チェックを入れることによって移動させて表示させています。<br>
</div> <!-- //id="nav-content" -->
</div> <!-- //id="nav-drawer" -->
</div> <!-- //container -->
</body>
</html>
<< CSSコード 右からスライド >>
style.css
body {
background-color: #c0c0c0;
}
#container {
margin: auto;
}
#nav-drawer {
float: left;
}
/* メニュー表示要素 */
#nav-content {
overflow: auto;
position: fixed;
top: 0;
right: 0;
width: 90%;
max-width: 330px;
height: 100%;
background-color: white;
transition: 0.6s;
-webkit-transform: translateX(105%);
transform: translateX(105%);
z-index: 9999;
}
/* メニュー表示中の背景設定 */
#nav-close {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: 0.6s;
z-index: 99;
}
/* チェックボックス */
#nav-input:checked ~ #nav-content {
transform: translateX(0%);
-webkit-transform: translateX(0%);
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
/* チェックボックス */
#nav-input:checked ~ #nav-close {
display: block;
opacity: 0.6;
}
<< CSSコード 左からスライド >>
style.css
body {
background-color: #c0c0c0;
}
#container {
margin: auto;
}
#nav-drawer {
float: right;
}
/* メニュー表示要素 */
#nav-content {
overflow: auto;
position: fixed;
top: 0;
left: 0;
width: 90%;
max-width: 330px;
height: 100%;
background-color: white;
transition: 0.6s;
-webkit-transform: translateX(-105%);
transform: translateX(-105%);
z-index: 9999;
}
/* メニュー表示中の背景設定 */
#nav-close {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: 0.6s;
z-index: 99;
}
/* チェックボックス */
#nav-input:checked ~ #nav-content {
transform: translateX(0%);
-webkit-transform: translateX(0%);
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
/* チェックボックス */
#nav-input:checked ~ #nav-close {
display: block;
opacity: 0.6;
}
<< CSSコード 上部からスライド >>
style.css
body {
background-color: #c0c0c0;
}
#container {
margin: auto;
position: absolute;
bottom: 0;
}
#nav-drawer {
float: left;
}
/* メニュー表示要素 */
#nav-content {
overflow: auto;
position: fixed;
top: 0;
right: 0;
width: 100%;
height: 90%;
max-height: 330px;
background-color: white;
transition: 0.6s;
-webkit-transform: translateY(-105%);
transform: translateY(-105%);
z-index: 9999;
}
/* メニュー表示中の背景設定 */
#nav-close {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: 0.6s;
z-index: 99;
}
/* チェックボックス */
#nav-input:checked ~ #nav-content {
transform: translateY(0%);
-webkit-transform: translateY(0%);
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
/* チェックボックス */
#nav-input:checked ~ #nav-close {
display: block;
opacity: 0.6;
}
<< CSSコード 下部スライド >>
style.css
body {
background-color: #c0c0c0;
}
#container {
margin: auto;
}
#nav-drawer {
float: left;
}
/* メニュー表示要素 */
#nav-content {
overflow: auto;
position: fixed;
bottom: 0;
right: 0;
width: 100%;
height: 90%;
max-height: 330px;
background-color: white;
transition: 0.6s;
-webkit-transform: translateY(105%);
transform: translateY(105%);
z-index: 9999;
}
/* メニュー表示中の背景設定 */
#nav-close {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: 0.6s;
z-index: 99;
}
/* チェックボックス */
#nav-input:checked ~ #nav-content {
transform: translateY(0%);
-webkit-transform: translateY(0%);
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
/* チェックボックス */
#nav-input:checked ~ #nav-close {
display: block;
opacity: 0.6;
}
メニューを開く（三）／閉じる（X）記号は、上記ではHTMLに直接文字として簡易的に表したが、実際にCSSコードを使って記述する。labelタグやborder(CSS)を駆使すると可能。
今回は、仕組みを理解しやすくするために、最小限のコードで記した。
上記のコードを基に、実際のホームページで配置、デザインを追加していく。
