■クリックしたら、メニューが開くハンバーガーメニュー
前回は、ホバーに対応したハンバーガーメニューでしたが、今回は、クリック(タップ)に対応したハンバーガーメニューをやってみました。
■HTMLで、クリック(タップ)に対応したメニューアイコンとメニュー内容を準備
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<link rel=”stylesheet” href=”css/style.css”>
<title>ハンバーガーメニュー(クリック版)</title>
</head>
<body>
<!– クリック(タップ)に対応させる為、チェックボックスを利用する –>
<input type=”checkbox” id=”cb-menu” value=”off”>
<!– チェックボックスの見た目として、3本線を項目名(ラベル)とする –>
<label id=”menu-icon” for=”cb-menu”>≡</label>
<div id=”menu”>
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
</ul>
</div>
</body>
</html>
■CSSでハンバーガーメニューのスタイルを整える
@charset “utf-8”;
/* メニュー部分 */
#menu {
background-color: #fff; /* メニュー背景色 */
box-sizing: border-box;
height: 100%;
padding: 10px 40px; /* メニュー内の上下と左右の余白 */
position: fixed;
right: -300px; /* メニューの横幅に合わせる */
top: 0;
transition: transform 0.3s linear 0s; /* 変化させるまでに掛かる時間を0.3秒に設定 */
width: 300px; /* メニューの横幅 */
z-index: 1000;
}
/* メニューアイコン部分 */
#menu-icon {
background-color: #fff; /* アイコン部分の背景色 */
border-radius: 0 0 0 10px; /* 左下を角丸にする */
color: #333; /* アイコンのフォント色 */
cursor: pointer;
display: block;
font-size: 50px; /* アイコンのフォントサイズ */
height: 50px; /* アイコンの縦の高さ */
line-height: 50px; /* 垂直方向の中央に配置 */
position: fixed;
right: 0;
text-align: center;
top: 0;
width: 50px; /* アイコンの横幅 */
transition: all 0.3s linear 0s; /* 変化させるまでに掛かる時間を0.3秒に設定 */
z-index: 1000;
}
#cb-menu {
display: none; /* チェックボックス自体は、表示しない */
}
#cb-menu:checked ~ #menu,
#cb-menu:checked ~ #menu-icon {
transform: translate(-300px); /* メニュー本体の横幅に合わせる */
}
■ん～、ややこしい
やっぱり、HTMLは比較的まだ理解し易いのだが、CSSがややこしく取っ付き難いですなぁ。
調べた内容をコメントアウトで書き加えながら、「解釈として、合ってるのかな？」と、かなり不安。
「完全に理解しながらコーディングしてますか？私ー！」って感じですね。
もっともっと、掘り下げて調べて、使って使って、理解します。
本日も読んで頂き、ありがとうございます。