何度も実装することがあったので、コピペで使いまわせるようにメモ。
シンプルなので応用も効きやすい。
目次
html
<a class="menu">
<span class="menu__line menu__line--top"></span>
<span class="menu__line menu__line--center"></span>
<span class="menu__line menu__line--bottom"></span>
</a>
<nav class="gnav">
<div class="gnav__wrap">
<ul class="gnav__menu">
<li class="gnav__menu__item"><a href="">TOP</a></li>
<li class="gnav__menu__item"><a href="">ABOUT</a></li>
<li class="gnav__menu__item"><a href="">NEWS</a></li>
<li class="gnav__menu__item"><a href="">CONTACT</a></li>
</ul>
</div><!--gnav-wrap-->
</nav>css
ハンバーガーメニュー部分
/*menu*/
.menu{
height: 20px;
position: absolute;
right: 20px;
top: 20px;
width: 30px;
z-index: 99;
}
.menu__line{
background: #fff;
display: block;
height: 2px;
position: absolute;
transition:transform .3s;
width: 100%;
}
.menu__line--center{
top: 9px;
}
.menu__line--bottom{
bottom: 0;
}
.menu__line--top.active{
top: 8px;
transform: rotate(45deg);
}
.menu__line--center.active{
transform:scaleX(0);
}
.menu__line--bottom.active{
bottom: 10px;
transform: rotate(135deg);
}フルスクリーンナビゲーション部分
/*gnav*/
.gnav{
background: rgba(0,0,0,0.8);
display: none;
height: 100%;
position: fixed;
width: 100%;
z-index: 98;
}
.gnav__wrap{
align-items:center;
display: flex;
height: 100%;
justify-content: center;
position: absolute;
width: 100%;
}
.gnav__menu__item{
margin: 40px 0;
}
.gnav__menu__item a{
color: #fff;
font-size: 2em;
font-weight: bold;
padding: 40px;
text-decoration: none;
transition: .5s;
}
.gnav__menu__item a:hover{
color: #666;
}jQuery
jQueryを使えるようにする
<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>メニューの開閉
<script>
// メニューの開閉
$('.menu').on('click',function(){
$('.menu__line').toggleClass('active');
$('.gnav').fadeToggle();
});
$('.gnav a').on('click',function(){
$('.menu__line').toggleClass('active');
$('.gnav').fadeToggle();
});
</script>あわせて読みたい
プロおすすめの関連商品
コメントを残す