jQuery+CSS3で固定ナビゲーション→レスポンシブでハンバーガーメニューに切り替える

Posted: 2015.12.09 / Category: HTML&CSS, javascript / Tag: jQuery
jQuery+CSS3を使用してスマホではハンバーガーメニューに切り替わる、固定ナビゲーションを作成してみます。
Sponsored Link
PC版のナビゲーションは基本構造は下記を使用します。
jQuery+CSS3でスクロールするとアニメーションして狭くなる固定ナビゲーション
HTML
#mobile-head はモバイル時色を付けてバーにします。
#global-nav はモバイル時ナビゲーションを開閉するボタンです。
三本の線がspanになります。
HTML
<header id="top-head"> <div class="inner"> <div id="mobile-head"> <h1 class="logo">Logo</h1> <div id="nav-toggle"> <div> <span></span> <span></span> <span></span> </div> </div> </div> <nav id="global-nav"> <ul> <li><a href="#">HOME</a></li> <li><a href="#">PRODUCT</a></li> <li><a href="#">WORKS</a></li> <li><a href="#">COMPANY</a></li> <li><a href="#">CONTACT</a></li> </ul> </nav> </div> </header>
jQuery
scrollの部分はPCでスクロールしたときfixed(固定)します。
#nav-toggleのクリックイベントはopenクラスの切り替えのみ行いアニメーションはCSSで行います。
JavaScript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script> (function($) { $(function() { var $header = $('#top-head'); // Nav Fixed $(window).scroll(function() { if ($(window).scrollTop() > 350) { $header.addClass('fixed'); } else { $header.removeClass('fixed'); } }); // Nav Toggle Button $('#nav-toggle').click(function(){ $header.toggleClass('open'); }); }); })(jQuery); </script>
CSS
まずはPC表示からです。
ホバーアニメーションとかは省略しております。
CSS
.inner { width: 980px; margin: 0 auto; } .inner:after { content: ""; clear: both; display: block; } /* header */ #top-head { top: -100px; position: absolute; width: 100%; margin: 100px auto 0; padding: 30px 0 0; line-height: 1; z-index: 999; } #top-head a, #top-head { color: #fff; text-decoration: none; } #top-head .inner { position: relative; } #top-head .logo { float: left; font-size: 36px; } #global-nav ul { list-style: none; position: absolute; right: 0; bottom: 0; font-size: 14px; } #global-nav ul li { float: left; } #global-nav ul li a { padding: 0 30px; } /* Fixed */ #top-head.fixed { margin-top: 0; top: 0; position: fixed; padding-top: 10px; height: 55px; background: #fff; background: rgba(255,255,255,.7); transition: top 0.65s ease-in; -webkit-transition: top 0.65s ease-in; -moz-transition: top 0.65s ease-in; } #top-head.fixed .logo { font-size: 24px; color: #333; } #top-head.fixed #global-nav ul li a { color: #333; padding: 0 20px; } /* Toggle Button */ #nav-toggle { display: none; position: absolute; right: 12px; top: 14px; width: 34px; height: 36px; cursor: pointer; z-index: 101; } #nav-toggle div { position: relative; } #nav-toggle span { display: block; position: absolute; height: 4px; width: 100%; background: #666; left: 0; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; } #nav-toggle span:nth-child(1) { top: 0; } #nav-toggle span:nth-child(2) { top: 11px; } #nav-toggle span:nth-child(3) { top: 22px; }
次はモバイルのCSSです。
CSS
@media screen and (max-width: 640px) { #top-head, .inner { width: 100%; padding: 0; } #top-head { top: 0; position: fixed; margin-top: 0; } /* Fixed reset */ #top-head.fixed { padding-top: 0; background: transparent; } #mobile-head { background: #fff; width: 100%; height: 56px; z-index: 999; position: relative; } #top-head.fixed .logo, #top-head .logo { position: absolute; left: 13px; top: 13px; color: #333; font-size: 26px; } #global-nav { position: absolute; /* 開いてないときは画面外に配置 */ top: -500px; background: #333; width: 100%; text-align: center; padding: 10px 0; -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; transition: .5s ease-in-out; } #global-nav ul { list-style: none; position: static; right: 0; bottom: 0; font-size: 14px; } #global-nav ul li { float: none; position: static; } #top-head #global-nav ul li a, #top-head.fixed #global-nav ul li a { width: 100%; display: block; color: #fff; padding: 18px 0; } #nav-toggle { display: block; } /* #nav-toggle 切り替えアニメーション */ .open #nav-toggle span:nth-child(1) { top: 11px; -webkit-transform: rotate(315deg); -moz-transform: rotate(315deg); transform: rotate(315deg); } .open #nav-toggle span:nth-child(2) { width: 0; left: 50%; } .open #nav-toggle span:nth-child(3) { top: 11px; -webkit-transform: rotate(-315deg); -moz-transform: rotate(-315deg); transform: rotate(-315deg); } /* #global-nav スライドアニメーション */ .open #global-nav { /* #global-nav top + #mobile-head height */ -moz-transform: translateY(556px); -webkit-transform: translateY(556px); transform: translateY(556px); } }
#nav-toggle のアニメーションは315degにしてあるので、かなりぐるんぐるんします。もう少し落ち着かせたい場合とかその他にメーションしたいときはこのあたりを調節してください。
ナビゲーションが閉じてるときは画面外に飛ばしておいて、open時にtranslateYで動かしてます。
jQueryのanimateはモバイルだと動作が重いので、アニメーションはCSSでやった方が良いと思いますが、画面外の飛ばす数値を直接入力しないといけないので、柔軟性が必要な場合はjQueryでtransformをした方がいいかもしれません。
COMMENTS
小林 2016-04-04 12:58
学生でWEB制作を勉強中の身です。
こちらを参考にしていますが、不具合の対処法がわかりません。
<ヘッダー(ナビ)><メイン><フッター>と並べているのですが、<メイン>が<ヘッダー>と重なってしまいます…これは、どうしたら重ならずに表示されるでしょうか?参考URLに状態画像を載せて送ります。
webOpixel 2016-04-07 10:44
メインの部分にpadding-topなどを設定してみてはどうでしょう。
中島 2016-05-03 00:15
はじめまして
Web制作の見習いの者です。
liタグのメニュー数を増やした場合、スマートフォンだと下のメニューが隠れてしまいます。
そこでスクロールして表示させたいと考えております。
どうしたら表示できるかご教授いただけえばと思います。
宜しくお願いします。
webOpixel 2016-05-06 15:19
そのまま入れて動くかは確認してないですが「overflow-scrolling」や「overflow-y」を試してみてはどうでしょうか。
メニューが多いなら固定にしないでアコーディオンにするのもいいと思います。
EALS 2016-06-07 18:21
はじめまして。
このコードで多階層メニューを作ることは可能でしょうか?
岡本 2016-06-24 10:51
はじめまして
レスポンシブメニューの勉強ため
調べていたらこちらのページにたどり着きました。
一つ質問なのですが、同一ページでこちらを導入した場合
スマホサイズで表示後ハンバーガーメニューから
リンク時にメニューを自動で閉じるにはどうしたらよろしいのでしょうか?
お忙しいとは存じますがよろしくお願いいたします。
SAWADA 2016-09-02 19:17
ワードプレスに組み込んでみましたら、きれいに動作しました。感動的です。
制作中のサイトに子メニューがあるのですが、こうした場合はどのように記述すれば良いでしょうか? 特にjavascriptの部分が分かりません。
スマホでは子メニューは非表示で良いと思っております。
ご指導宜しくお願い致します。
webOpixel 2016-09-13 12:58
スマホ時にCSSでdisplay:noneをしてみてはどうでしょう?
TANAKA 2018-02-23 16:24
こんにちは。
とても素晴らしいナビゲーションメニューでとても参考になりました。
一点ご質問がございます。
スマホ時のハンバーガーメニューをタップしたときに、メニューが現れますが、出てきたリンクのメニューを押した際に、タップと同時にメニューが閉じるやり方などあれば、教えていただければ幸いです。
現在ワンフレームwebサイトを作成しており、各カテゴリーコンテンツで区切り、グローバルナビゲーションのリンクメニューを押すと別窓や他htmlにリンクを飛ばすのではなく、スクロールして各カテゴリーコンテンツに止まる仕様にしております。
何卒宜しくお願い致します。
webOpixel 2018-02-26 14:11
クリック時のイベントに
$header.toggleClass(‘open’);
とすればいけると思います。
khen 2020-01-23 16:27
はじめまして
つい最近webの勉強を始め、こちらの記事がとても参考になり使わせて頂きました。
そこで一つ質問させて頂きたいのですがナビゲーション部分に背景色を
付けたいと思いgloval-navの部分にbg-colorで色を指定したところ
上手く反映されませんでした。どうすれば良いか分からないので
解決方法などあれば教えて頂けないでしょうか。
どうぞよろしくお願い致します。
khen 2020-01-26 02:56
はじめまして
一つ質問がございましてこちらのナビゲーションの下に画像を
配置したいのですがどうしても画像がナビゲーションの下に
潜り込んでしまいます。何か解決策などございませんでしょうか。
どうぞよろしくお願い致します。
webOpixel 2020-01-26 22:20
この記事のは結構時間がたってしまってなぜこのように作ったのかなという感じなのですが、
ナビゲーションに色をつける場合は「#top-head」にbackgroundを設定すれば大丈夫なようです。
画像の方はz-indexを設定してみてはどうでしょう。