困ってる人
こんにちは、ヨロと申します。
今回は、基本的なハンバーガーボタンの作り方という事で、
僕自身も過去にいろいろなサイトを見て、ハンバーガーボタンの作り方に関して調べてみた事があるのですが、
サイトの内容によっては、自分で真似してやってみても全く動かないものがあったり、
やけにコードが細かく難しかったりと困った覚えもあったので、
今回、比較的シンプルで出来るだけ分かりやすいものを自分なりにまとめてみました。
という事でソースコードがこちら↓
https://codepen.io/malg_tw/pen/RdMrZM/
【コピペでOK】比較的シンプルなハンバーガーボタンの作り方 – HTML
<!-- HTML -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="accordion">
<span></span>
<span></span>
<span></span>
</div>
<script src="js/script.js"></script>
</body>
</html>比較的シンプルなハンバーガーボタンの作り方 – CSS
/* CSS */
/* ここでハンバーガー枠全体のサイズ */
.accordion {
position: relative;
width: 70px; // 全体的なハンバーガーボタンの幅
height: 55px; // 全体的なハンバーガーボタンの高さ
top: 15px; // 上の余白
left: 15px;// 左の余白
}
/* */
.accordion span {
position: absolute;
left: 0;
width: 100%;
height: 5px; // 棒の太さ
background-color: #000; // 棒の色
}
/* */
.accordion span:nth-of-type(1) {
top: 0;
}
/* */
.accordion span:nth-of-type(2) {
top: 24px; // 真ん中の棒の位置をここで調節する
}
/* */
.accordion span:nth-of-type(3) {
bottom: 0;
}
/******************** 動作時間、棒の動きや傾き加減など ********************/
.accordion,
.accordion span {
display: inline-block;
transition: all .4s; /* クリックしてからの動作時間 */
}
/* ここで数字を変えて傾きなどを調節 */
.accordion.active span:nth-of-type(1) {
-webkit-transform: translateY(20px) rotate(-45deg);
transform: translateY(23px) rotate(-45deg);
}
.accordion.active span:nth-of-type(2) {
opacity: 0;
}
.accordion.active span:nth-of-type(3) {
-webkit-transform: translateY(-20px) rotate(45deg);
transform: translateY(-26px) rotate(45deg);
}比較的シンプルなハンバーガーボタンの作り方 – JavaScript(jQuery)
// JQuery
$(function() {
$('.accordion').click(function(){
$('.accordion').toggleClass('active');
});
});※toggleClassはクラスがついてなかったら追加、ついていたら外すといったもの
そして、その結果が上にも書いたリンクでこちらから(ハンバーガーアイコンをクリックしてみて下さい)
https://codepen.io/malg_tw/pen/RdMrZM/
という事で、比較的シンプルなハンバーガーボタンの作り方という事だったのですが、
今回紹介したコードの中の数字を触ってみる事で色やサイズはもちろん、多少は面白い動きのボタンも作れたりします。
これ以外にもハンバーガーボタンの作り方というのは沢山ありますし、動きももっと細かく見た目も面白いものも、
ネット上を探せばいくらでも出てきますので、ぜひいろいろと見てみて下さい。
普通に使うだけであれば、こちらのコードを全てコピペで事足りるかと思います。
あんまり難しい事はやりたくないからコピペでいければ嬉しいんだけど