ナビメニューをトグル型にする

モバイル閲覧時など画面サイズが小さいときにだけ、ナビゲーションメニューをトグル型に変更します。
 
【PCサイズ】
(ヘッダー内にナビゲーションメニュー)

【モバイル】
メニューが閉じた状態

メニューを開いた状態。

ボタンによってメニューの表示/非表示を切り替えることが出来ます。

あらかじめ記述している全画面幅共通のスタイル

<CSS>

以降のステップでは上記のCSSにメディアクエリを用いて画面幅768pxをブレイクポイントとしてレイアウトが切り替わるように追記していきます。

STEP.1
通常、floatプロパティにより横並びにしているメニューとロゴを小さい画面幅の時はfloat:none として縦並びに変更します。
<css>

STEP.2
①メニューボタンを作成する。( HTML)
後のステップで解説するjQueryのセレクタに設定するためのid #menubtnをつけています。
(今回の記事ではボタンのデザインについては割愛します)

②初期状態ではナビゲーションメニューを非表示にしておきます。(CSS )

③大きい画面幅ではボタンを常に非表示にします。(CSS )

<HTML>

<CSS>

このようなボタンが出来ます。

STEP.3 【jQueryでボタンに機能を持たせる。】

①jQueryファイルを読み込む。

②STEP.2で作成したメニューボタンをセレクタとしてクリックイベント内でslideToggleメソッドを使いメニューを開閉できるようにしています。

※今回は外部のJSファイルを読み込まず、HTML内に直接スクリプトを記述しています。

<HTML>

STEP.4 【仕上げ】

①ボタンの位置を変更する。<CSS>
position:absolute にして、ボタンの位置を右に寄せています。

②【注意】大きい画面ではメニューを常に表示状態にする。<CSS>
メニューのプロパティをdisplay : block !important として
閉じたメニューが画面幅が大きいときに閉じたままにならないようにする。

Follow me!

ナビメニューをトグル型にする” に対して1件のコメントがあります。

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください