jQuery近年ではモニターサイズが広くなってきた影響もあり、サイドバーを固定表示させてるサイトが多くみられるようになった気がします。そこでここでは画面が狭くなるとハンバーガメニューになるレスポンシブに対応した固定サイドバーの作成方法をご紹介します。Linkロゴがナビゲーションに含まれる・マウスオーバーでサブメニュー開閉タイプDEMOロゴもサイドバーに含むレイアウトで、サブメニューがある場合はマウスオーバーすると右に表示するタイプです。HTML幅を狭めた時にはロゴ部分とメニューは別にしたかったので、構造的に分けてCSSで調節するようにします。id="overlay"></div>CSSCSSは長いので主要部分だけピックアップします。完全版はサンプルをご覧ください。hidden;、直下のaタグにはwidthを指定してます。スライドなのでleftとかでアニメーションさせればよさそうですが、重なりの関係などもあったりするので、.sub-menu-navのホーバーでwidthをアニメーションさせてます。77行目ここからは主にタブレット以下のサイズを想定してますので、マウスオーバーで表示していたサブメニューは非表示にしてます。JavaScript最後にJavaScriptです。サブメニューの開閉自体はマウスオーバーなのでCSSでやってるのですが、開いている親のボタンをアクティブにしておきたかったので、そこはjQueryでやってます。あとはハンバーガーメニューの開閉ですね。これくらいだったらjQuery入れない選択もありですが、やっぱり楽かなとか。});})(jQuery);</script>ロゴはコンテンツ側・サブメニューがアコーディオンのタイプDEMOヘッダーはコンテンツ側についていて、サブメニューを閉じるとコンテンツ幅が広がって閉じるタイプです。-->サブメニューをアコーディオンにする場合は画面にコンテンツ量によっては画面に収まらない可能性がありますので、スクロールバーを入れるのがスタンダードです。Scrollbarはバーをいい感じにしてくれます。あとアコーディオン動作にはVelocity.jsを使用してます。});})(jQuery);</script>書いてて全然意味わかんなくなってきましたが以上です。ロゴがナビゲーションに含まれる・マウスオーバーでサブメニュー開閉タイプ参照させていただきWEBページを作成中です。表示するメニューの行間を狭めて上に少し詰めたいのですがその寸法の変更はどこの数字をいらったらいいのでしょうか?お手数ですが教えてください。申し訳ございませんがもう一つ教えてください。ハンバーガーのメニューの線の太さをもう少し太くしたいのですが線の太さはどこで調整いいのか教えてください。線だとborderですね。スタイルはChromeのデベロッパーツールで調べるとすぐわかると思います。サンプルコードを確かめました。メニュバーが気に入ったので加工しますが、利用しても良いでしょうか?©の記載があったので連絡させていただきました。コメントありがとうございます。記事のコードは自由に使っていただいて大丈夫です。探していたレスポンシブメニューだったのでとても参考になります!マウスオーバーで横にサブメニューが開くタイプですが、こちらハンバーガーメニュー時にもサブメニュー開くことができるコードがあればご教授いただきたいです。コメントありがとうございます。間があいてしまっているのでなんで開かないのかなという感じではありますが、機会がありましたらこちらも対応したいと思います。2つ目のコードと参考にしていただけたら多分できるのかな。REPLYNAMEE-MAILURLコードを書く場合は<pre>で囲んでください。WixこのブログではjQueryやWordPressを中心としたWeb制作関係のことを書いております。ご意見ご感想などお気軽にコンタクトフォームよりお問い合わせください。Web関係のお仕事も募集しております。