スマホではtoggle、PCではマウスオーバーでドロップダウンができるナビゲーションを作るCSSとスクリプト

スマホではハンバーガーボタンをタップでナビゲーションメニューが表示されて、768px以上ではマウスオーバーでサブメニューが表示されるかたちのメニューをCSSとjQuery(プラグインなし)で作ってみました。

sponsored link

ナビゲーションのデモ

このナビゲーションメニューの特徴としてはこのようなものになります。

  • スマホではハンバーガーボタンを表示する(fixed)
  • ハンバーガーボタンをタップするとナビゲーションがブラウザ一杯に表示される
  • 768px以上になるとボタンが非表示になり、代わりにナビゲーションが表示される
  • ナビゲーションをマウスオーバーするとサブナビゲーションがドロップダウンで表示される

ブラウザのウィンドウ幅を動かすとナビゲーションが切り替わっているのが分かると思います。

See the Pen toggle&hoverMenu by ManabuYasuda (@gaku) on CodePen.

jQuery

まず.prepend().before()メソッドでbodyタグの先頭とメインメニューの直前にidとクラスの付いたHTMLを挿入します(もちろんHTMLに直接記述してもOKです)。

4行目以降は.click()イベントでボタンがクリックされたらナビゲーションを表示・非表示するようにしています。最終的な表示の制御はCSS側でしています。

HTML

HTMLはul要素にdropDownMenuというidとクラスをつけておきます。サブメニューとしてリストを入れ子にして記述しています。

CSS

長いですが、CSSはこのように指定しています。

ブラウザいっぱいの黒いレイヤー

ハンバーガーボタンをクリックした時にLightboxのようにブラウザ全体を黒い透明なレイヤーでおおいます。
grayLayerがブラウザすべてに配置されるようにhtmlbody要素にheight:100%;を指定しておきます。

ハンバーガーボタンとキャンセルボタン

iconBarsFont Awesomeのアイコンフォント、iconCloseは疑似要素を使ってアイコンを表示しています。アイコンはheight:44px;になるように指定しています。それぞれposition:fixed;でブラウザに対しての絶対位置を指定して固定させています。

iconBarsをタップするとナビゲーションの表示、iconCloseをタップすると非表示になるようにjQueryで指定しています。

スマホ向けナビゲーション

スマホでのナビゲーションではハンバーガーボタンの位置を固定させるので、ナビゲーションもposition:fixed;で絶対位置に指定しておきます。z-indexgrayLayerより高く指定しておかないと触れなくなってしまうので注意します。

768px以上

768px以上になるとボタンが非表示になり、ナビゲーションだけが表示されます。スマホでナビゲーションを表示したままになっていると表示がおかしくなってしまうので(スタイル属性が残ったままになるため)いくつか!importantを指定しています。

ちなみにドロップダウンはサブメニューの高さを0にしておいて、メインメニューにマウスオーバーされたら高さを出すようにして表現しています。

参考にしたエントリー