[jQuery]レスポンシブに対応したナビゲーションを作ってみました。

カテゴリー:
jQuery

ウィンドウの幅に応じて、動作とデザインが切り替わるナビゲーションを作ってみました。ウィンドウ幅が広ければヘッダーに横一列で表示し、スマフォなどの場合はボタンで操作でナビゲーションが開閉します。

html

PCなどではヘッダーに横一列に、スマフォでは縦に並べて必要なときにボタンで開閉させる、オーソドックスなナビゲーション。

css

jQuery

demo

開閉ボタンとナビゲーションは、ウィンドウ幅に応じて.noneを付けたり取ったりしてdislplayの状態をコントロールします。ナビゲーションが閉じているときはボタンの文字が「メニュー」、開いているときは「メニューを閉じる」になります。

PC閲覧時にウィンドウ幅をリサイズした場合も考慮していて、ウィンドウ640px以下にしてナビゲーションを開いた後、ウィンドウサイズを641px以上にした場合、ナビゲーションはいったん初期化。非表示になります。ボタンの文字もメニューに戻ります。

高機能なjQueryプラグインがいろいろあるので使ってもいいのですが、自分で作ったほうがカスタマイズが簡単だったり、設置が手軽だったりするかと。

なにより自分で作ってみるといろいろと勉強になります。

※なお、 jQuery(window).resize(function(){/*何らかの処理*/});という記述でウィンドウ幅を取得しているのですが、リサイズし続ける間中取得し続けるので、発火する処理によってはブラウザに負荷がかかるようです。注意が必要かと思います。

参考:[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です