jQuery・多階層のマウスオーバードロップダウンメニューを作りました [IE9対応]

04

仕事で必要だったため作成。
作った後に気づいたことだが、西畑一馬氏のコードとほぼ同一のものとなった。

検証済みブラウザとOS

  • IE 9~
  • Firefox
  • Google Chrome
  • Safari
  • Windows 7
  • OS X El Capitan

 

要点とコード

  • CSS / jQuery ともに直下セレクタで区切り、子孫要素への伝播を防ぐ
  • 最初のドロップダウンの ul タグには .level1、以降のドロップダウン全ての ul タグには .level2 を指定し、CSS管理をわかりやすく
  • 最上階のリストを除く li タグに position: relative; を指定し、level1 / level2 に position: absolute; を指定することで、各要素に隣接したドロップダウンが出来る

Sassのmixinはこちらの記事を参照。

どんなコーディング案件でも対応可能なミックスイン8種類

2コメント
名無しのお方

sassをコンパイルしようとするとmixin arrowが定義されていないとエラーが出てしまうのですが、どうしたらよいでしょうか。

返信
Keita Hirai

管理人の平井です。
投稿に記載漏れがありすみません。

Sassに下記mixinを追記してみてください。
@mixin arrow {
content: “”;
position: absolute;
border-top: 1px solid;
border-right: 1px solid;
transform: rotate(45deg);
}

普段使っているSassのミックスインは下記の投稿にまとめています。
■どんなコーディング案件でも対応可能なミックスイン8種類
https://keitahirai.net/archives/827

返信

コメントを投稿する

※メールアドレスは私にだけ届き、サイトには表示されません。
※「送信する」ボタンは一度だけクリックしてお待ちください。