【jQuery】fatNavで作るフルスクリーンのハンバーガーメニューをご紹介

どうも!がむしゃらワーカーしゅう丸(@shumarukiti)です!

ハンバーガーメニュー作りたいけど簡単な方法ないかな?

といった方に向けて、フルスクリーンのハンバーガーメニューをfatNavで簡単に作る方法をご紹介します。

この記事を読むことで上のリンク先のサイトのようなハンバーガーメニューが作れちゃいます。

ハンバーガーメニュー制作で困っている方はぜひ参考にしてみてください。

fatNavをダウンロードする

Download.zipからjquery-fatNavをダウンロードします。

ダウンロードしたらファイルを任意の場所に置く

ダウンロードしたファイルを確認すると、こんな感じでいっぱいファイルが入ってますが使うのは「dist」ファイルのみ。

「dist」ファイルをhtmlやphpと同じ階層に置きます。

ちなみに、
jquery.fatNav.css
jquery.fatNav.min.css
といったようにminがついてるやつと、ついていない2種類のファイルがあります。

これ何が違うねん!って思うかもしれませんが、中身は一緒です。
minがついているファイルは全てのコードが横書きになっています。

なのでファイルを編集したい方はminなしのファイル、編集しない方はminつきのファイルを使ってください。

ダウンロードファイルを読み込む読み込む

ファイルを置いたら、htmlやphpで読み込みますが、読み込みの場所に注意しましょう。

sp-nav css → head内に記述
script → /bodyの前に記述
menu部分 → body内に記述

この作業だけでかっこいいハンバーガーメニューが簡単にできちゃいます。

PCでハンバーガーメニューを消す

PC表示でハンバーガーメニューを消したい場合は、classのhamburgerにdisplay:none;で消しちゃいましょう。

まとめ

簡単にハンバーガーメニューが実装できたかと思います。

jQueryなどは一から組むより既存のものがネット上で公開されていますので、それをうまく利用して自分なりにカスタマイズするのがいいかと思います。

実装できない場合などはお気軽にお問い合わせからお問い合わせください。

〜おすすめ記事〜

【フリーランス向け】HTML、CSSスキルを身につけてコーディング案件を受注する方法【月5万稼ぐ】

2018.04.07

【フリーランス初心者】プログラミング勉強開始2ヶ月で10万円稼ぐノウハウ公開します【実体験】

2018.01.02