はじめに
お久しぶりです。
少しブログから遠ざかってました...
それよりみなさん体調は大丈夫ですか？
大変な時期ですが、家でゆっくり過ごしてコロナの終息を待ちましょう。
さて、当ポートフォリオサイトにも使用しているスライドメニュー 。
今日は、そのスライドメニューをJavaScriptのみで実装していきます。今回は上からスライドするメニューを作りますが、CSSをちょっと変えるだけで横からのスライドメニューも実装できます。
DEMO
まずはどんな動きになるかデモをご覧ください。
DEMO
実装していく
▼HTML
<header>
<div class="button-trigger">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Works</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</nav>
</header>
HTMLはこのような感じです。
/*--------------------------------
header
--------------------------------*/
header {
background-color: #fff;
padding: .5rem;
nav {
position: absolute;
overflow-x: hidden;
text-align: center;
background-color: #666;
z-index: 1;
top: 217px;
right: 0;
width: 100%;
height: 0;
transition: .5s;
@include maxw(sm) {
top: 187px;
}
@include maxw(md) {
top: 196px;
}
&.is-opened {
height: 255px;
}
li {
margin: {
top: 32px;
bottom: 32px;
}
a {
font-weight: bold;
color: #fff;
text-decoration: none;
white-space: nowrap;
}
}
}
}
/*--------------------------------
button-trigger
--------------------------------*/
.button-trigger {
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
width: 45px;
height: 45px;
&.is-active {
&>span {
margin: -1.5px;
&:nth-of-type(1) {
transform: rotate(-45deg);
}
&:nth-of-type(2) {
transform: scale(0)
}
&:nth-of-type(3) {
transform: rotate(45deg)
}
}
}
&>span {
background-color: #222;
width: 53%;
height: 3px;
transition: margin .4s cubic-bezier(.79,.21,.06,.81),
transform .4s cubic-bezier(.79,.21,.06,.81);
margin: {
top: 3px;
bottom: 3px;
}
&:nth-of-type(2) {
transform-origin: 50% 50%;
}
}
}
SCSSです。
navタグに.is-openedが付与された際の動きを記述。今回はheight: 255px;としています。これだけだとnav要素が急に表示される動きになるので、
transition: .5s;で0.5秒かけてスライドするようにします。
.button-triggerではハンバーガーメニューの動きを決めています。
const btn = document.querySelector('.button-trigger');
const nav = document.querySelector('nav');
btn.addEventListener('click', () => {
nav.classList.toggle('is-opened')
});
btn.addEventListener('click', () => {
btn.classList.toggle('is-active')
});
最後にJavaScriptです。
今回は、</body>タグの直前にscriptタグで囲んで記述しています。別ファイルを用意してHTMLファイルに読み込ませてもOKです。
簡単に説明すると、.button-trigger要素がクリックされたら、navタグに.is-openedを、button-triggerクラスにはis-activeつけたり外したりさせています。
JavaScriptでしていることは、クラスをつけたり外したりしているだけですね。そう考えるとシンプルで分かりやすいです。
さいごに
冒頭にも書いたように、今回は上からのスライドメニューでしたがCSSを少し変えるだけで横からのスライドメニューも簡単に実装できます。気になる方はこちらをチェックしてみてください。
https://www.npmjs.com/package/magic-grid
このJavaScriptを覚えるだけで色々な動きを実装できるのでオススメです。