【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
テックアカデミーのロゴ

TechAcademyは最大手のオンラインプログラミングスクール。コースは24種類と豊富で幅広く学べるのが特徴。完全無料(0円)で1週間無料体験授業が受講可能。無料体験期間中にメンターのオンライン面談を受けるとAmazonギフト券500円がもらえます。

» 公式サイトを見る
TECHEXPERTのロゴ

TECH CAMPは転職に特化したプログラミングスクール。転職成功率は98%で、転職できなければ受講料全額返金の制度あり。無料カウンセリングで受講内容からエンジニア需要まで疑問が全て解決できます。

» 公式サイトを見る
TechBoostのロゴ

TechBoostはBranding Engineerが運営するオンラインプログラミングスクール。フリーランス案件求人midworksも運営しているので、卒業後の進路が転職、フリーランスと選択肢が多いのが特徴です。無料説明会あり。

» 公式サイトを見る