【CSS & JS】超簡単。ハンバーガーアイコンをクリックして×に変える&メニューをスライドアウトさせる方法
備忘録です。
ハンバーガーメニューをクリックすると、×印に変えるには……CSSでつくる方法もあるらしいけど、どうやるんだろう。密かにずっと気になっていたので調べてみました。
JavaScriptも使いますが、決してややこしいことはしなくていい方法を見つけました。
ここでは二つのことをします。
❶ハンバーガーにクリックすることで×印に変える
❷メニューを画面の右側からスライドアウトさせる
まずはHTMLから。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="css/styles.css" />
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"
></script>
<title>Slide Out Menu</title>
</head>
<body>
<header>
<nav>
<div class="burger-menu-icon">//①ハンバーガーのdivをつくる
<input type="checkbox" id="burger" />//②Toggleするためにはcheckboxを書く!ここがカギ!
<label for="burger">//③label forはinputのidとそろえる。
<div class="burger-icon">
<span></span>
<span></span>
<span></span>
</div>//④labelのなかにハンバーガーアイコンを入れましょう。
</label>
<div class="slideoutMenu">//⑤スライドアウトさせるメニューは、.burger-menu-iconのdiv内におさめます。
<div class="opacity"></div>
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Design</a></li>
<li><a href="#">Style</a></li>
<li><a href="#">Reviews</a></li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<script src="script.js"></script>
</body>
</html>
ポイント❶
toggleするにはinput type="checkbox"
を使う
ポイント❷
今回はハンバーガーアイコンをクリックすることで、メニューを引っ張り出したいです。なのでハンバーガーアイコンは、<label for="burger"></label>
のなかに入れましょう。通常であればcheckboxをチェックしなければ、checkboxにチェックはつきませんが、label forというものを付け加えると、label forの中身をクリックするだけでcheckboxにcheckがつけられます。ただしlabel for="burger"
と、input id="burger"
labelをinputと紐づけるには、この二つをそろえる必要があります。inputは必ずidで指定します。
ポイント❸
ハンバーガーアイコンと隠しているメニューは、同じdiv内に入れる。(この場合は.burger-menu-icon
)
SCSS
.burger-icon {
display: block;
z-index: 11;
}
.burger-icon span { //ここでburger-iconをつくる
display: block;
background: #000; //background-colorではなく、backgroundで指定
width: 50px;
height: 5px;
margin-bottom: 10px;
margin-left: 90%;
cursor: pointer;
position: relative;
top: 0;
}
input#burger { //labelここでcheckboxを消す
display: none;
}
.burger-icon.open span:nth-child(2) { //クリックすると'open'というクラスがtoggleされるよう、JSに記述しています。つまり、これはハンバーガーをクリックするとハンバーガーの2本目の線が消えるという記述です。
width: 0;
opacity: 0;
}
.burger-icon.open span:nth-child(1) { //これはハンバーガーをクリックするとハンバーガーの1本目の線が45度回転し、上から15px下方向にずらすという記述です。
transform: rotate(45deg);
top: 15px;
}
.burger-icon.open span:nth-child(3) {//これはハンバーガーをクリックするとハンバーガーの3本目の線が-45度回転し、15px上方向にずらすという記述です。
transform: rotate(-45deg);
top: -15px;
}
.slideoutMenu {
transform: translateX(100%); //メニューを右に100%ずらすことで、画面から消す。
z-index: -1;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
transition: 0.3s;
animation: slideOut 0.3s;
.opacity,
.menu {
width: 50%;
background-color: #5d348c;
ul {
list-style: none;
li {
padding-bottom: 3rem;
}
li a {
text-decoration: none;
font-size: 3rem;
color: #ea5c5d;
text-transform: uppercase;
}
}
}
.opacity {
background-color: #ea5c5d;
opacity: 0.7;
}
}
@keyframes slideOut { //ここでスライドの動作をつくります。(slideIn、のほうがふさわしかったかも T_T )
0% {
transform: translateX(100%);
}
50% {
transform: translatex(50%);
}
50% {
transform: translatex(0%);
}
}
input:checked ~ .slideoutMenu { //これがツワモノ!!!詳細は【覚えておきたいポイント3】で。
transform: translateX(0%);
}
覚えておきたいポイント❶
<input>
タグのあとに<label for="burger">
を付け足しておけば、label
タグ内の要素をクリックすることでcheckboxをチェックできるようになります。
覚えたいおきたいポイント❷
.burger-icon.open span:nth-child(3), .burger-icon.open span:nth-child(1)
ではハンバーガーの上の線と下の線を回転させ、top:〜
で位置をずらしています。topの位置をずらすには、.burger-icon span
にposition: relative; top: 0;
と書かないと効かないので注意です。
覚えたいおきたいポイント❸
最後にあるinput:checked ~ .slideoutMenu
を書くことで、メニューが右側から画面にスライドインしてくれます。
input:checked
は、「チェックボックスがcheckされていたら……」という意味です。~
は、兄弟要素を取得したいよ〜という意味合いを持つ記号です。input
と.slideoutMenu
はどちらともburger-menu-icon
の子要素なので、兄弟要素に値します。~
がないと効かないので注意です。
JS
$(".burger-icon").click(function() {
$(this).toggleClass("open");
});
JSではシンプルに、「.burger-icon
のクリックで、open
というclassをtoggleしてね」と伝えているだけです。
やりかたは何通りもあると思うのですが、個人的にはこれが一番わかりやすいかなと感じました。
Author And Source
この問題について(【CSS & JS】超簡単。ハンバーガーアイコンをクリックして×に変える&メニューをスライドアウトさせる方法), 我々は、より多くの情報をここで見つけました https://qiita.com/mikumikumikumiku/items/e5b79099f6b2140fa19b著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .