よくあるハンバーガーメニューをCSSのみを使用して作っていきます。
応用するとボタンのクリックに応じて様々な要素をアニメーションさせることが出来ます。
CSSのみで作ると以下のメリットがあると思います。
JSライブラリに依存しない
CSSを使用した自由度の高いアニメーション表現が可能
完成品
1. ヘッダーの作成
まずはヘッダーを作成していきます。
site_logo.html
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header_container">
<div class="header_start">
<h1 class="site_name">SITE NAME</h1>
</div>
</div>
</header>
</body>
</html>
CSSを書きヘッダーのデザインをしていきます。
headerにposition: sticky;を記載することで、画面をスクロールしてもヘッダーが追従してくれるようになります。
style.css
body {
margin: 0;
padding: 0;
}
header {
background-color: darkred;
width: 100%;
position: sticky;
top: 0;
}
.header_container {
padding: 5px 10px;
}
h1.site_name {
color: white;
margin: 0;
padding: 0;
}
Font Awesomeを利用してハンバーガーメニューアイコンを追加します。
site_logo.html
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="header_container">
<div class="header_start">
<h1 class="site_name">SITE NAME</h1>
</div>
<div class="header_end">
<i class="fas fa-bars menu_icon"></i>
</div>
</div>
</header>
</body>
</html>
display: flex;とjustify-content: space-between;を使ってサイトタイトルとメニューアイコンを横並びにします。
style.css
body {
margin: 0;
padding: 0;
}
header {
background-color: darkred;
width: 100%;
position: sticky;
top: 0;
}
.header_container {
padding: 5px 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
h1.site_name {
color: white;
margin: 0;
padding: 0;
}
.menu_icon {
color: white;
font-size: 2rem;
}
それっぽくなってきましたね！
2. メニューの作成
次にメニューを作成していきます。
site_logo.html
<html>
<head>
<!-- 省略 -->
</head>
<body>
<header>
<!-- 省略 -->
</header>
<div class="side_menu">
<ul class="menu_items">
<a class="menu_item" href="#">
<li>メニュー項目 1</li>
</a>
<a class="menu_item" href="#">
<li>メニュー項目 2</li>
</a>
<a class="menu_item" href="#">
<li>メニュー項目 3</li>
</a>
<a class="menu_item" href="#">
<li>メニュー項目 4</li>
</a>
</ul>
</div>
</body>
</html>
CSSを書き、メニューが開いた状態のデザインをしていきます。
style.css
// 省略
.side_menu {
position: fixed;
top: 0;
right: 0;
background: rgb(170, 170, 170);
height: 100%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
transition-duration: 0.3s;
}
.menu_items {
list-style-type: none;
padding: 5px 0;
margin: 0;
}
.menu_item {
color: white;
text-decoration: none;
}
.menu_item li {
padding: 8px 30px;
transition-duration: 0.3s;
}
.menu_item li:hover {
background-color: gray;
}
メニューを閉じるボタンを追記します。
site_logo.html
<html>
<head>
<!-- 省略 -->
</head>
<body>
<header>
<!-- 省略 -->
</header>
<div class="side_menu">
<ul class="menu_items">
<div class="close_button">
<i class="fas fa-times"></i>
</div>
<!-- 省略 -->
</ul>
</div>
</body>
</html>
style.css
// 省略
.close_button {
width: 35px;
height: 35px;
color: white;
font-size: 2rem;
width: 100%;
text-align: right;
}
.close_button i {
margin-right: 10px;
}
.side_menuのrightの値を変更しメニューが隠れるようにします。
style.css
// 省略
.side_menu {
position: fixed;
top: 0;
right: -200px;
background: rgb(170, 170, 170);
height: 100%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
transition-duration: 0.3s;
}
3. メニュー開閉を実装
CSSには:checkedというセレクタがあります。
:checkedを使用すると、チェックボックスのオンオフに応じてCSSの内容を変更することが出来ます。
まずはチェックボックスを作成します。
site_logo.html
<html>
<head>
<!-- 省略 -->
</head>
<body>
<input id="side_menu_check" type="checkbox">
<header>
<!-- 省略 -->
</header>
<div class="side_menu">
<!-- 省略 -->
</div>
</body>
</html>
:checkedセレクタを使用してチェックボックスにチェックが入ったらメニューが表示されるよう実装します。CSSセレクタについてはこちらのチートシートがわかりやすいです。
style.css
// 省略
#side_menu_check:checked ~ .side_menu {
right: 0;
}
チェックボックスをオンオフしてみましょう！ メニューが表示/非表示されるようになっています。
labelタグを使用することでチェックボックスのオンオフを切り替える事ができます。forでチェックボックスのidを指定します。
site_logo.html
<html>
<head>
<!-- 省略 -->
</head>
<body>
<input id="side_menu_check" type="checkbox">
<header>
<div class="header_container">
<!-- 省略 -->
<div class="header_end">
<label for="side_menu_check">
<i class="fas fa-bars menu_icon"></i>
</label>
</div>
</div>
</header>
<div class="side_menu">
<ul class="menu_items">
<label for="side_menu_check">
<div class="close_button">
<i class="fas fa-times"></i>
</div>
</label>
<!-- 省略 -->
</ul>
</div>
</body>
</html>
これでメニューボタンからメニューの開閉が出来るようになりました。チェックボックスをdisplay: none;して非表示にすれば完成です。
以下、ソースコードの全文です。
site_logo.html
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<input id="side_menu_check" type="checkbox">
<header>
<div class="header_container">
<div class="header_start">
<h1 class="site_name">SITE NAME</h1>
</div>
<div class="header_end">
<label for="side_menu_check">
<i class="fas fa-bars menu_icon"></i>
</label>
</div>
</div>
</header>
<div class="side_menu">
<ul class="menu_items">
<label for="side_menu_check">
<div class="close_button">
<i class="fas fa-times"></i>
</div>
</label>
<a class="menu_item" href="#">
<li>メニュー項目 1</li>
</a>
<a class="menu_item" href="#">
<li>メニュー項目 2</li>
</a>
<a class="menu_item" href="#">
<li>メニュー項目 3</li>
</a>
<a class="menu_item" href="#">
<li>メニュー項目 4</li>
</a>
</ul>
</div>
</body>
</html>
style.css
body {
margin: 0;
padding: 0;
}
header {
background-color: darkred;
width: 100%;
position: sticky;
top: 0;
}
.header_container {
padding: 5px 10px;
display: flex;
align-items: center;
justify-content: space-between;
}
h1.site_name {
color: white;
margin: 0;
padding: 0;
}
.menu_icon {
color: white;
font-size: 2rem;
}
.side_menu {
position: fixed;
top: 0;
right: -200px;
background: rgb(170, 170, 170);
height: 100%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
transition-duration: 0.3s;
}
.menu_items {
list-style-type: none;
padding: 5px 0;
margin: 0;
}
.menu_item {
color: white;
text-decoration: none;
}
.menu_item li {
padding: 8px 30px;
transition-duration: 0.3s;
}
.menu_item li:hover {
background-color: gray;
}
.close_button {
width: 35px;
height: 35px;
color: white;
font-size: 2rem;
width: 100%;
text-align: right;
}
.close_button i {
margin-right: 10px;
}
#side_menu_check {
display: none;
}
#side_menu_check:checked ~ .side_menu {
right: 0;
}
↧