メニューボタンのCSSレシピ
CSSのアニメーションを使ってメニューボタンの開閉に動きを付けるレシピ集です。
メニューボタンをクリック（タップ）したときにクラスを切り替える部分ではJavaScriptを使います。
以下のコード例ではindex.htmlがstyle.cssとmain.jsを読み込むことを想定します。
main.jsは全てのメニューボタンで共通のものを使用し、ボタンを押したときのイベントリスナーを設定します。
main.js
document.addEventListener('DOMContentLoaded',()=>{
const btn_menu = document.querySelectorAll(".btn_menu");
for(let btn of btn_menu) {
btn.addEventListener('click',(e)=>{
e.preventDefault();
if( !btn.classList.contains('active') ) {
btn.classList.add('active');
} else {
btn.classList.remove('active');
}
});
}
});フェードインで「×」に切り替わる
メニューボタンを押すとフェードインで「×」に切り替わり、もう一度押すと最初の3本ラインに戻ります。
index.html
<a id="btn_menu1" class="btn_menu" href="#"><span><span></span></span></a>style.css
// メニューボタン1
#btn_menu1 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100px;
height: 100px;
box-sizing: border-box;
background-color: #222;
transition: background-color 0.3s ease;
}
#btn_menu1::before {
position: absolute;
top: calc(50% - 1px);
left: 25%;
display: block;
content: "";
width: 50%;
height: 2px;
background: #f7f7f7;
opacity: 0;
transform: rotate(45deg);
transition: opacity 0.3s ease;
}
#btn_menu1 span {
display: block;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
opacity: 1;
transition: opacity 0.3s ease;
}
#btn_menu1 span::before,
#btn_menu1 span span, #btn_menu1 span::after {
position: absolute;
top: 12%;
left: 0;
display: block;
content: "";
width: 100%;
height: 2px;
background: #f7f7f7;
transition: opacity 0.3s ease;
}
#btn_menu1 span span {
top: calc(50% - 1px);
}
#btn_menu1 span::after {
top: auto;
bottom: 12%;
}
#btn_menu1::after {
position: absolute;
top: calc(50% - 1px);
left: 25%;
display: block;
content: "";
width: 50%;
height: 2px;
background: #f7f7f7;
opacity: 0;
transform: rotate(-45deg);
transition: opacity 0.3s ease;
}
#btn_menu1:hover {
background-color: #555;
}
#btn_menu1.active::before {
opacity: 1;
}
#btn_menu1.active span {
opacity: 0;
}
#btn_menu1.active::after {
opacity: 1;
}フェードインで「CLOSE」に切り替わる
メニューボタンを押すとフェードインで「CLOSE」に切り替わり、もう一度押すと「MENU」に戻ります。
index.html
<a id="btn_menu2" class="btn_menu" href="#"></a>style.css
// メニューボタン2
#btn_menu2 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100px;
height: 100px;
box-sizing: border-box;
background-color: #222;
transition: background-color 0.3s ease;
}
#btn_menu2::before {
position: absolute;
top: calc(50% - 10px);
left: 0;
display: block;
content: "MENU";
color: #f7f7f7;
width: 100%;
font-size: 1rem;
text-align: center;
opacity: 1;
transition: opacity 0.3s ease;
}
#btn_menu2::after {
position: absolute;
top: calc(50% - 10px);
left: 0;
display: block;
content: "CLOSE";
color: #f7f7f7;
width: 100%;
font-size: 1rem;
text-align: center;
opacity: 0;
transition: opacity 0.3s ease;
}
#btn_menu2:hover {
background-color: #555;
}
#btn_menu2.active::before {
opacity: 0;
}
#btn_menu2.active::after {
opacity: 1;
}2本のラインが回転して「×」になる
メニューボタンを押すと2本のラインが回転して「×」に切り替わり、もう一度押すと2本のラインに戻ります。
index.html
<a id="btn_menu3" class="btn_menu" href="#"></a>style.css
// メニューボタン3
#btn_menu3 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100px;
height: 100px;
box-sizing: border-box;
background-color: #222;
transition: background-color 0.3s ease;
}
#btn_menu3::before {
position: absolute;
top: 35%;
left: 25%;
display: block;
content: "";
width: 50%;
height: 2px;
background: #f7f7f7;
transform: rotate(0deg);
transition: transform 0.3s ease, top 0.1s ease;
}
#btn_menu3::after {
position: absolute;
bottom: 35%;
left: 25%;
display: block;
content: "";
width: 50%;
height: 2px;
background: #f7f7f7;
transform: rotate(0deg);
transition: transform 0.3s ease, bottom 0.1s ease;
}
#btn_menu3:hover {
background-color: #555;
}
#btn_menu3.active::before {
top: calc(50% - 1px);
transform: rotate(315deg);
}
#btn_menu3.active::after {
bottom: calc(50% - 1px);
transform: rotate(-315deg);
}3本のラインが回転して「×」になる
メニューボタンを押すと3本のラインが回転して「×」に切り替わり、もう一度押すと3本のラインに戻ります。
index.html
<a id="btn_menu4" class="btn_menu" href="#"><span>MENU</span></a>style.css
// メニューボタン4
#btn_menu4 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100px;
height: 100px;
box-sizing: border-box;
background-color: #222;
transition: background-color 0.3s ease;
}
#btn_menu4::before {
position: absolute;
top: 30%;
left: 25%;
display: block;
content: "";
width: 50%;
height: 2px;
background: #f7f7f7;
transform: rotate(0deg);
transition: transform 0.3s ease, top 0.1s ease;
}
#btn_menu4::after {
position: absolute;
bottom: 30%;
left: 25%;
display: block;
content: "";
width: 50%;
height: 2px;
background: #f7f7f7;
transform: rotate(0deg);
transition: transform 0.3s ease, bottom 0.1s ease;
}
#btn_menu4 span {
position: absolute;
top: calc(50% - 1px);
left: 25%;
display: block;
overflow: hidden;
width: 50%;
height: 2px;
color: #f7f7f7;
opacity: 1;
background-color: #f7f7f7;
transition: opacity 0.1s ease;
}
#btn_menu4:hover {
background-color: #555;
}
#btn_menu4.active span {
opacity: 0;
}
#btn_menu4.active::before {
top: calc(50% - 1px);
transform: rotate(315deg);
}
#btn_menu4.active::after {
bottom: calc(50% - 1px);
transform: rotate(-315deg);
}「MENU」が消えつつ、2本のラインが回転して「×」になる
メニューボタンを押すと「MENU」が消えつつ、2本のラインが回転して「×」に切り替わり、もう一度押すと元の表示に戻ります。
index.html
<a id="btn_menu5" class="btn_menu" href="#"><span>MENU</span></a>style.css
// メニューボタン5
#btn_menu5 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100px;
height: 100px;
box-sizing: border-box;
background-color: #222;
transition: background-color 0.3s ease;
}
#btn_menu5::before {
position: absolute;
top: 30%;
left: 25%;
display: block;
content: "";
width: 50%;
height: 2px;
background: #f7f7f7;
transform: rotate(0deg);
transition: transform 0.3s ease, top 0.1s ease;
}
#btn_menu5::after {
position: absolute;
bottom: 30%;
left: 25%;
display: block;
content: "";
width: 50%;
height: 2px;
background: #f7f7f7;
transform: rotate(0deg);
transition: transform 0.3s ease, bottom 0.1s ease;
}
#btn_menu5 span {
position: absolute;
top: calc(50% - 12px);
display: block;
width: 100%;
text-align: center;
font-size: 1rem;
color: #f7f7f7;
opacity: 1;
transition: opacity 0.1s ease;
}
#btn_menu5:hover {
background-color: #555;
}
#btn_menu5.active span {
opacity: 0;
}
#btn_menu5.active::before {
top: calc(50% - 1px);
transform: rotate(315deg);
}
#btn_menu5.active::after {
bottom: calc(50% - 1px);
transform: rotate(-315deg);
}「MENU」が「CLOSE」になる＆3本のラインが回転して「×」になる
メニューボタンを押すと「MENU」が「CLOSE」に切り替わることに加えて、3本のラインが回転して「×」に切り替わり、もう一度押すと元の表示に戻ります。
index.html
<a id="btn_menu6" class="btn_menu" href="#"><span></span><span>MENU</span><span>CLOSE</span></a>style.css
// メニューボタン6
#btn_menu6 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100px;
height: 100px;
box-sizing: border-box;
background-color: #222;
transition: background-color 0.3s ease;
}
#btn_menu6::before {
position: absolute;
top: 22%;
left: 30%;
display: block;
content: "";
width: 40%;
height: 2px;
background: #f7f7f7;
transform: rotate(0deg);
transition: transform 0.3s ease, top 0.1s ease;
}
#btn_menu6::after {
position: absolute;
top: 48%;
left: 30%;
display: block;
content: "";
width: 40%;
height: 2px;
background: #f7f7f7;
transform: rotate(0deg);
transition: transform 0.3s ease, bottom 0.1s ease;
}
#btn_menu6 span:nth-child(1) {
position: absolute;
top: 35%;
left: 30%;
display: block;
width: 40%;
height: 2px;
opacity: 1;
background-color: #f7f7f7;
transition: opacity 0.1s ease;
}
#btn_menu6 span:nth-child(2) {
position: absolute;
bottom: 15%;
left: 0;
display: block;
width: 100%;
text-align: center;
color: #f7f7f7;
opacity: 1;
transition: opacity 0.3s ease;
}
#btn_menu6 span:nth-child(3) {
position: absolute;
bottom: 15%;
left: 0;
display: block;
width: 100%;
text-align: center;
color: #f7f7f7;
opacity: 0;
transition: opacity 0.3s ease;
}
#btn_menu6:hover {
background-color: #555;
}
#btn_menu6.active span:nth-child(1) {
opacity: 0;
}
#btn_menu6.active span:nth-child(2) {
opacity: 0;
}
#btn_menu6.active span:nth-child(3) {
opacity: 1;
}
#btn_menu6.active::before {
top: calc(35% - 1px);
transform: rotate(315deg);
}
#btn_menu6.active::after {
top: calc(35% - 1px);
transform: rotate(-315deg);
}長さの違う2本のラインが回転して「×」になる
メニューボタンを押すと長さの違う2本のラインが回転して「×」に切り替わり、もう一度押すと2本のラインに戻ります。
index.html
<a id="btn_menu7" class="btn_menu" href="#"></a>style.css
// メニューボタン7
#btn_menu7 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100px;
height: 100px;
box-sizing: border-box;
background-color: #222;
transition: background-color 0.3s ease;
}
#btn_menu7::before {
position: absolute;
top: 38%;
left: 25%;
display: block;
content: "";
width: 50%;
height: 2px;
background: #f7f7f7;
transform: rotate(0deg);
transition: transform 0.3s ease, top 0.1s ease;
}
#btn_menu7::after {
position: absolute;
bottom: 38%;
left: 25%;
display: block;
content: "";
width: 35%;
height: 2px;
background: #f7f7f7;
transform: rotate(0deg);
transition: transform 0.3s ease, bottom 0.1s ease, width 0.3s ease;
}
#btn_menu7:hover {
background-color: #555;
}
#btn_menu7.active::before {
top: calc(50% - 1px);
transform: rotate(135deg);
}
#btn_menu7.active::after {
width: 50%;
bottom: calc(50% - 1px);
transform: rotate(-135deg);
}長さの違う3本のラインが回転して「×」になる
メニューボタンを押すと長さの違う3本のラインが回転して「×」に切り替わり、もう一度押すと2本のラインに戻ります。
index.html
<a id="btn_menu8" class="btn_menu" href="#"><span>MENU</span></a>style.css
// メニューボタン8
#btn_menu8 {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100px;
height: 100px;
box-sizing: border-box;
background-color: #222;
transition: background-color 0.3s ease;
}
#btn_menu8::before {
position: absolute;
top: 30%;
left: 25%;
display: block;
content: "";
width: 50%;
height: 2px;
background: #f7f7f7;
transform: rotate(0deg);
transition: transform 0.3s ease, top 0.1s ease;
}
#btn_menu8 span {
position: absolute;
top: calc(50% - 1px);
left: 25%;
display: block;
overflow: hidden;
width: 35%;
height: 2px;
color: #f7f7f7;
opacity: 1;
background-color: #f7f7f7;
transition: opacity 0.1s ease;
}
#btn_menu8::after {
position: absolute;
bottom: 30%;
left: 25%;
display: block;
content: "";
width: 20%;
height: 2px;
background: #f7f7f7;
transform: rotate(0deg);
transition: transform 0.3s ease, bottom 0.1s ease, width 0.3s ease;
}
#btn_menu8:hover {
background-color: #555;
}
#btn_menu8.active::before {
top: calc(50% - 1px);
transform: rotate(135deg);
}
#btn_menu8.active span {
opacity: 0;
}
#btn_menu8.active::after {
width: 50%;
bottom: calc(50% - 1px);
transform: rotate(-135deg);
}