Vueと共通

【Nuxt.js】Nuxt実践編:ヘッダーのハンバーガーを閉じるボタンにする

前置き

ヘッダーがスマホではハンバーガーになり🍔
それをクリックすることで
別コンポーネントでメニューを開きます。
その時にハンバーガーボタンを
閉じるボタンに❌変更しましょう🌟


構成

アトミックデザイン

毎度のことなので省きます。
ブログ内検索してみてくださいね✨🔍

directory

components/
--| templates/
----| headers
------| HeaderDefault.vue
----| navs
------| NavSide.vue

layouts/
--| default.vue

pages/
--| index.vue


使用するもの

layout

ヘッダーやフッターは
基本的にlayoutに入れます💫

【Nuxt.js】Nuxt文法編:layout

CSS

メディアクエリは
変数で設定しておきましょう!
とっても便利です💕

【Nuxt.js】mixin実践編:Sass & mixinで簡単メディアクエリ

❌にするために
transformプロパティを使います🌟

その他

コンポーネントは
いちいち登録が面倒なので
自動でインポートしています。
めちゃくちゃ楽ちんですよ❤️

06: 自動でインポートする


Let's try!

まずは答えを見ずにやってみましょう♪
余白などのCSSや
ヘッダーの中身はお好きにどうぞ!

bodymarginなどは
リセットCSSでやっておくと良いですね🙆‍♀️

ticktack…


答え

Point!

layouts/defaultには
HeaderDefaultのみインポート

NavSideHeaderDefaultにある
ハンバーガーを押すことで開きます🍔🇺🇸
そのためlayoutsに入れるのは
HeaderDefaultのみでOK⭕️

NavSideはposition: fixed;

全体に覆いかぶさる形になるため

閉じるボタン部分

🍔 → ❌
この時にNavSide
閉じるボタンを多いますが
layoutsHeaderDefault
入っているため問題なくクリックできます💡

CSSは
🍔を覆うdivを基準に位置を決めるため
position: relative;
position: absolute;
を使用しています。

3本の線の位置を
それぞれ決めないと
1本に重なってしまうため
transformプロパティで調整🌟

transform: translate(X軸, Y軸) XorY個別指定, rotate(角度)


まとめ

変更できれば
わざわざ閉じるボタンを
別途作成する必要がないので
良いですよね💕

実践編が増えてきたので
アトミックデザインなど、
そろそろ感覚が
掴めてきたのではないでしょうか?🌟🤗

-Vueと共通
-,

© 2021 aLiz Nuxt