どうも！がむしゃらワーカーしゅう丸(@shumarukiti)です！
といった方に向けて、フルスクリーンのハンバーガーメニューを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などは一から組むより既存のものがネット上で公開されていますので、それをうまく利用して自分なりにカスタマイズするのがいいかと思います。
実装できない場合などはお気軽にお問い合わせからお問い合わせください。
〜おすすめ記事〜
TechAcademyは最大手のオンラインプログラミングスクール。コースは24種類と豊富で幅広く学べるのが特徴。完全無料（０円）で１週間無料体験授業が受講可能。無料体験期間中にメンターのオンライン面談を受けるとAmazonギフト券５００円がもらえます。
» 公式サイトを見る
TECH CAMPは転職に特化したプログラミングスクール。転職成功率は９８%で、転職できなければ受講料全額返金の制度あり。無料カウンセリングで受講内容からエンジニア需要まで疑問が全て解決できます。
» 公式サイトを見る
TechBoostはBranding Engineerが運営するオンラインプログラミングスクール。フリーランス案件求人midworksも運営しているので、卒業後の進路が転職、フリーランスと選択肢が多いのが特徴です。無料説明会あり。
» 公式サイトを見る
