タグ

ブックマーク / yori3.com (1)

  • ドロップダウンメニュー(レスポンシブ)を実装してみた

    ナビゲーションにホバーすると、下層のナビゲーションが出てくる、いわゆるドロップダウンメニューを作ってみました。 調子に乗ってレスポンシブで、スマホのときはアコーディオンメニューにしようとか考えて、結構苦労しました・・・。 デモはこちらから DEMO 以下、コードです。 HTML liの中にulを入れる入れ子構造です。普通に打つとかなりめんどくさいですね。何かしら楽をする方法を使う方がいいでしょう。私の場合はemmetでやりました。 CSS 動きに関わる部分は特にありません。ほぼ見た目を整えるために使ってます。「>」は子要素を指定するセレクタです。今回みたいな入れ子構造のものは子要素のみを指定してあげればclass・idなしでも実装できます。(メンテナンス性とかの良し悪しはさておき・・・) jQuery 画面サイズによってイベントを切り替えています。700pxより大きい場合はhoverイベン

    ドロップダウンメニュー(レスポンシブ)を実装してみた
  • 1