ハンバーガーメニューの作り方、なかなか難しいですよね。
この記事を読めば、誰でも簡単に作るのが難しいハンバーガーメニューを簡単に作れます。
おしゃれなハンバーガーメニューの作り方も公開していますので、ぜひ参考にしてみてください。
ハンバーガーメニューをおしゃれに作ってみました
スマホでは、ヘッダーメニューやサイドバーメニューをずっと表示していると、表示領域が少なくなってしまうため、ハンバーガーメニューでメニューを開閉できるようになっています。
こんなので、スマホでは右上に表示されているやつですね。
これをおしゃれな感じで実装したいと思います
spanタブで３本選を作る
バーガーメニューを実装する際に、アイコンを使うこともよくあると思いますが、アニメーションを設定するとアイコン全体で動きしかつけれないので、今回は、１本１本それぞれcssを適用するために別々にします。
<button class="hamburger" onclick="document.querySelector('body').classList.toggle('menu-open');">
<span></span>
<span></span>
<span></span>
</button>javascriptで、クリックされ時に、適用されるクラスを変更する準備だけしておきます。
.hamburger {
background-color: transparent;
border: none;
outline: none;
cursor: pointer;
}
.hamburger > span {
/* 黒線にする */
background-color: black;
/* 横幅 */
width: 36px;
/* 高さ */
height: 2.5px;
/* ブロックに変更 */
display: block;
/* 下のあいだ調整 */
margin-bottom: 8px;
}
とりあえず、バーガーメニューが出来上がりました！何にも動きませんが（笑）
いちばん下の線に、下がないけど、margin-bottomが適用されているので、３本目だけ０に変更します。
.hamburger span:nth-child(3) {
/* いちばん下なのでゼロに変更 */
margin-bottom: 0px;
}クリックしたらBody部のバックグラウンドカラーを変更する
メニューが開くと、バックグラウンドカラーを変更することで分かりやすくします。
onclick=”document.querySelector(‘body’).classList.toggle(‘menu-open’);”をHTMLに記載しているので、クリックした時に、クラスがmenu-openに変更されます。なので、menu-openにバックグラウンドカラーを黒に変更してみます。
.menu-open {
background-color: #000000;
}こうすると、ハンバーガーメニューをクリックすると背景が真っ黒になります。真っ黒だとバーガーメニューもどにいったか分からなくなるので、spanは白に変更します。
.menu-open .hamburger span{
background-color: white;
}
クリックすると、白と黒が反転するようになりました。
アニメーションをつける
今のままだと、瞬時に白と黒が反転するだけなので、オシャレさはありません。まずは一番上のバーからアニメーションをつけたいと思います。
クルっと回るようにしてオシャレさをだしたいと思います。
.hamburger > span {
/* 黒線にする */
background-color: black;
/* 横幅 */
width: 36px;
/* 高さ */
height: 2.5px;
/* ブロックに変更 */
display: block;
/* 下のあいだ調整 */
margin-bottom: 8px;
/* アニメーション完了までの時間 */
transition: transform 1s;
}
.hamburger span:nth-child(3) {
/* いちばん下なのでゼロに変更 */
margin-bottom: 0px;
}
/* メニューオープンで黒に変更 */
.menu-open {
background-color: #000000;
}
/* メニューオープンでspanを黒に変更 */
.menu-open .hamburger span {
background-color: white;
}
/* いちばん上のバー */
.menu-open .hamburger span:nth-child(1) {
/* 開始までの時間 */
transition-delay: 0.2s;
/* 下に10px移動 反時計回り315度回る */
transform: translateY(10px) rotate(-315deg);
}
いい感じに回って×の一本が出来上がりました！
同じ要領で、下のバーも動きをつけようと思います。
/* いちばん下のバー */
.menu-open .hamburger span:nth-child(3) {
transform: translateY(-10px) rotate(315deg);
}
後は、真ん中のバーをなくすことで、×を完成させようと思います。
/* 真ん中のバー */
.menu-open .hamburger span:nth-child(2) {
transform: translateX(-18px) scale(0);
}ハンバーガーメニュー完成
これで、完成です！まだ、さっとかけるわけではないですが、本やネットの情報を参考に作ることができました！
用語さえ知っていれば、ググったりすることができるので、作りたいものが実現できますね！
では、動画で確認してみます！
コメント