■ホバーしたら、メニューが開くハンバーガーメニュー
よく見かける3本線のアイコンのメニュー。いわゆるハンバーガーメニューを、HTMLとCSSだけで実装する方法があるらしいので、調べてやってみた。
■まず、HTMLでメニュー内容を準備
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<link rel=”stylesheet” href=”css/style.css”>
<title>ハンバーガーメニュー</title>
</head>
<body>
<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::before { /* 疑似要素を使ってアイコンとなる3本線を表示させる */
background-color: #fff; /* ボタン部分の背景色 */
border-radius: 0 0 0 10px; /* 左下を角丸にする */
color: #333; /* アイコンのフォント色 */
content: “≡”; /* アイコンとなる3本線 */
display: block;
font-size: 50px; /* アイコンのフォントサイズ */
height: 50px;
line-height: 50px; /* 垂直方向の中央に配置 */
position: absolute;
right: 100%;
text-align: center;
top: 0;
width: 50px;
}
/* ホバーした時の処理 */
#menu:hover {
transform: translate(-300px); /* メニューの横幅と合わせる */
}
■分かるような分からないような
ん～。参考サイトの見様見真似でやってみたが、「できちゃった」感が否めないなあ..。
もう少し、更に調べた事をコメントアウトで書き込みながら理解を深めていかないとダメだなあと思う。
本日も、読んで頂き、ありがとうございます。