「ハンバーガーメニューってどうやって作るんだろう」
「ハンバーガーメニューのおしゃれなアニメーションってなんだろう」
「レスポンシブ対応がいいな」
こういった悩みに答えます。
目次
- 基となる作品
- 解説
基となる作品
解説
HTML
<body>
<nav class="menu">
<ul>
<li><a class="menu" href="#1">アイテム１</a></li>
<li><a class="menu" href="#2">アイテム２</a></li>
<li><a class="menu" href="#3">アイテム３</a></li>
<li><a class="menu" href="#4">アイテム４</a></li>
<li><a class="menu" href="#5">アイテム５</a></li>
</ul>
</nav>
<div class="menu__button">
<span></span><span></span><span></span>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
$('.menu__button').click(function() {
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
$('.menu').addClass('active');
} else {
$('.menu').removeClass('active');
}
});
});
</script>
</body>このjQueryでは「menu__buttonクラス」を押すと「menuクラス」と「menu__buttonクラス」に
「activeクラス」を付けたり、消したりができます。
上からスライドしてくるメニューのCSS
nav.menu{
z-index: 2;
position: fixed;
top: 0;
left: 0;
background: white;
color: black;
text-align: center;
transform: translateY(-100%);
transition: all 0.6s;
width: 100%;
}
nav.menu ul{
margin: 0 auto;
padding: 0;
width: 100%;
}
nav.menu ul li{
font-size: 20px;
list-style-type: none;
padding: 0;
width: 100%;
border-bottom: 1px solid black;
}
nav.menu ul li a{
text-decoration: none;
display: inline-block;
color: black;
margin: 1em 0;
}
nav.menu.active{
transform: translateY(0%);
}jQueryでmenu__buttonが押されたらnav.menuに「activeクラス」が付くので、
付いたときにtranslateY(0%)で下に降りてきます。
逆に「activeクラス」が付いていない時は上に行くようになっています。
メニューボタンのCSS
.menu__button{
display: block;
position: fixed;
right: 15px;
top: 15px;
width: 40px;
height: 40px;
cursor: pointer;
z-index: 3;
background: gray;
text-align: center;
}
.menu__button span{
display: block;
position: absolute;
width: 28px;
border-bottom: solid 3px white;
-webkit-transition: .35s ease-in-out;
-moz-transition: .35s ease-in-out;
transition: .35s ease-in-out;
left: 6px;
}
.menu__button span:nth-child(1){
top:9px;
}
.menu__button span:nth-child(2){
top:18px;
}
.menu__button span:nth-child(3){
top:27px;
}
.menu__button.active span:nth-child(1){
top: 18px;
left: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu__button.active span:nth-child(2),
.menu__button.active span:nth-child(3) {
top: 18px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}menu__buttonが押されたらactiveクラスが付いて、transform: rotate(45deg);で✖のマークになります。
まとめ
今回、レスポンシブなハンバーガーメニューアニメーションをcssとjQueryで作る方法をご紹介しました。
この記事を観てくれた人が少しでも参考になれたらと思います。
