どうも！がむしゃらワーカーしゅう丸(@shumarukiti)です！
[voice icon=”https://j-info1.com/wp-content/uploads/2017/12/pose_syourai_man.png” type=”l”]ハンバーガーメニュー作りたいけど簡単な方法ないかな？[/voice]
といった方に向けて、フルスクリーンのハンバーガーメニューをfatNavで簡単に作る方法をご紹介します。
この記事を読むことで上のリンク先のサイトのようなハンバーガーメニューが作れちゃいます。
ハンバーガーメニュー制作で困っている方はぜひ参考にしてみてください。
fatNavをダウンロードする
Download.zipからjquery-fatNavをダウンロードします。
ダウンロードしたらファイルを任意の場所に置く
ダウンロードしたファイルを確認すると、こんな感じでいっぱいファイルが入ってますが使うのは「dist」ファイルのみ。
「dist」ファイルをhtmlやphpと同じ階層に置きます。
ちなみに、
jquery.fatNav.css
jquery.fatNav.min.css
といったようにminがついてるやつと、ついていない２種類のファイルがあります。
これ何が違うねん！って思うかもしれませんが、中身は一緒です。
minがついているファイルは全てのコードが横書きになっています。
なのでファイルを編集したい方はminなしのファイル、編集しない方はminつきのファイルを使ってください。
ダウンロードファイルを読み込む読み込む
ファイルを置いたら、htmlやphpで読み込みますが、読み込みの場所に注意しましょう。
sp-nav css → head内に記述
script → /bodyの前に記述
menu部分 → body内に記述
この作業だけでかっこいいハンバーガーメニューが簡単にできちゃいます。
PCでハンバーガーメニューを消す
PC表示でハンバーガーメニューを消したい場合は、classのhamburgerにdisplay:none;で消しちゃいましょう。
まとめ
簡単にハンバーガーメニューが実装できたかと思います。
jQueryなどは一から組むより既存のものがネット上で公開されていますので、それをうまく利用して自分なりにカスタマイズするのがいいかと思います。
実装できない場合などはお気軽にお問い合わせからお問い合わせください。
〜おすすめ記事〜
[kanren postid=”2040″]
[kanren postid=”960″]
[kanren postid=”3768″]