目次
jQuery、CSSで簡単なハンバーガーメニューを作成
今回は、簡単なハンバーガーメニューを作成しました。
実用性には欠けると思うので、こんな感じで動いているんだなというイメージだけ掴めればありがたいです。
(ネット上にはもっといい感じのやつがたくさんあるし。。。)
早速ソースを見ていきます。
ハンバーガーメニューのコード
html、javascript(jQuery)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<title>Document</title>
<script>
$(function(){
// navbtnがクリックされたら
$("#navbtn").click(function(){
// navbtnにクラス「open」を付与、外す
$(this).toggleClass("open");
// navにクラス「opennav」を付与、外す
$("nav").toggleClass("opennav");
// navbtnにクラス「openburger」を付与、外す
$("#navbtn").toggleClass("openburger");
});
});
</script>
</head>
<body>
<div id="navbtn">
<span></span>
<span></span>
<span></span>
</div>
<nav></nav>
</body>
</html>CSS
#navbtn{
width: 40px;
height: 40px;
background-color: #faa;
position: absolute;
left: 0;
top: 0;
transition: all 1s; /*クラスopenburgerでアニメーションの動きを加える*/
}
/*spanタグ全体の形を決める*/
#navbtn span{
width: 30px;
height: 2px;
position: absolute;
background-color: #fff;
transition: all 0.2s; /*クラスopenでアニメーションの動きを加える*/
}
/*一つ一つのspanタグの位置を決める*/
#navbtn span:nth-child(1){
top: 9px;
left: 5px;
}
#navbtn span:nth-child(2){
top: 17px;
left: 5px;
}
#navbtn span:nth-child(3){
top: 25px;
left: 5px;
}
/*jqueryによってopenクラスが付与されたら*/
.open span:nth-child(1){
transform: translateY(8px) rotate(45deg); /*45度傾ける*/
}
.open span:nth-child(2){
opacity: 0; /*透明にする*/
}
.open span:nth-child(3){
transform: translateY(-8px) rotate(-45deg); /*-45度傾ける*/
}
/*↑までがハンバーガーの三本線を変化させるCSS*/
/*ここから同時にnavメニューも表示させる。(最初は隠れてる)*/
nav{
width: 200px;
height: 100%;
background-color: #faa;
position: fixed;
left: -200px;
top: 0;
transition: all 1s; /*クラスopennavでアニメーションの動きを加える*/
}
/*jqueryによってクラスopennavが付与されたら*/
.opennav{
transform: translateX(200px);
}
/*同時にハンバーガーメニューも左右に移動させる*/
.openburger{
transform: translateX(200px);
}実際にコピペして動作を確認してみるとさらにわかりやすいと思います。
