jQuery・多階層のマウスオーバードロップダウンメニューを作りました [IE9対応]
仕事で必要だったため作成。
作った後に気づいたことだが、西畑一馬氏のコードとほぼ同一のものとなった。
検証済みブラウザと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; を指定することで、各要素に隣接したドロップダウンが出来る
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | <body> <nav id="dd"> <ul> <li><a href="">会社概要</a> <ul class="level1"> <li><a href="" class="item-arrow">ダミーテキスト</a> <ul class="level2"> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキストダミーテキスト</a></li> <li><a href="">ダミーテキストダミーテキスト</a></li> <li><a href="">ダミーテキストダミーテキスト</a></li> <li><a href="">ダミーテキストダミーテキスト</a></li> </ul> </li> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキストダミーテキスト</a></li> <li><a href="">ダミーテキストダミーテキスト</a></li> </ul> </li> <li><a href="">ダミーテキスト</a> <ul class="level1"> <li><a href="">ダミーテキスト</a></li> <li><a href="" class="item-arrow">ダミーテキスト</a> <ul class="level2"> <li><a href="">ダミーテキスト</a></li> <li><a href="" class="item-arrow">ダミーテキスト</a> <ul class="level2"> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキストダミーテキスト</a></li> <li><a href="">ダミーテキストダミーテキスト</a></li> </ul> </li> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> </ul> </li> <li><a href="" class="item-arrow">ダミーテキスト</a> <ul class="level2"> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> </ul> </li> <li><a href="" class="item-arrow">ダミーテキストダミーテキスト</a> <ul class="level2"> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> </ul> </li> </ul> </li> <li><a href="">ダミーテキスト</a> <ul class="level1"> <li><a href="" class="item-arrow">ダミーテキスト</a> <ul class="level2"> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキストダミーテキスト</a></li> <li><a href="">ダミーテキストダミーテキスト</a></li> </ul> </li> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> </ul> </li> <li><a href="">ダミーテキスト</a> <ul class="level1"> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> <li><a href="">ダミーテキスト</a></li> </ul> </li> <li><a href="">ダミーテキスト</a></li> </ul> <!-- /#dd-01 --></nav> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <script src="js/javascript.js"></script> </body> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | a { color: black; text-decoration: none; } #dd { text-align: center; background: lighten(black, 95%); > ul { width: 1000px; display: flex; margin: 0 auto; > li { height: 70px; flex: 1; &:not(:last-child) { margin-right: 5px; } } } ul { li {position: relative;} } li { li {border-bottom: 1px solid white;} } a { display: block; transition: 0.3s; &:hover { text-decoration: none; } } > ul > li > a { padding: 19px 0 15px; border-bottom: 5px solid #999; &.active { border-bottom-color: #37a0da; } } .level1, .level2 { width: 100%; position: absolute; z-index: 9; a { padding: 10px 15px; background: lighten(black, 95%); } .active { color: white; background: #37a0da; } } .level1 { top: 100%; left: 0; } .level2 { top: 0; left: 100%; border-left: 1px solid white; } .item-arrow { &:after { @include arrow; width: 7px; height: 7px; top: 50%; right: 10px; margin-top: -4px; border-color: #37a0da; } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /* level drop down menu Author: KEITA HIRAI URL: keitahirai.net */ $(function() { $("#dd li ul").hide(); $("#dd li").hover(function() { $(">ul", this).stop(true, true).slideDown("fast"); $(">a", this).addClass("active"); }, function() { $(">ul", this).stop(true, true).slideUp("fast"); $(">a", this).removeClass("active"); }); }); |
Sassのmixinはこちらの記事を参照。
2コメント
sassをコンパイルしようとするとmixin arrowが定義されていないとエラーが出てしまうのですが、どうしたらよいでしょうか。
投稿に記載漏れがありすみません。
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