jQuery・横幅3種類・マウスオーバードロップダウンを作りました [スマホ未対応 / IE8対応]
仕事で依頼されるドロップダウンは大抵この3種類なので作り置き。
マウスオーバーをスマホ対応に出来ないかと試行錯誤したが、すぐには無理っぽいので諦める。
検証済みブラウザとOS
- IE 8～ ※一部CSSはIE8不可
- Firefox
- Google Chrome
- Safari
- Windows 7
- OS X Yosemite
このjQueryで出来ること、出来ないこと
- 出来ること
- 実務で必要なドロップダウンの横幅を全てカバー
- iOSで一応は動作する
- 出来ないこと
- Androidで動作しない
要点とコード
- リストタグをネスト
- ナビゲーション部分に id や class を適用しない、プレーンなHTML
- jQueryはごく普通のコードで、id 以外は全て同じ
1 2 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script src="js/dropdown.js"></script> |
1 2 3 4 5 6 7 8 9 10 | a { color: #333; text-decoration: none; display: block; padding: 10px 0; &:hover { color: white; background: #666; } } |
ベーシック
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 | <nav id="dd"> <ul> <li><a href="">HOME</a></li> <li><a href="">アクセス</a> <ul> <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> <li><a href="">後ろで大きな爆発音がした</a></li> <li><a href="">親譲りの無鉄砲</a></li> <li><a href="">小供の時から</a></li> </ul> </li> <li><a href="">お問い合わせ</a> <ul> <li><a href="">Lorem ipsum</a></li> <li><a href="">dolor sit amet</a></li> <li><a href="">consectetur adipisicing elit</a></li> <li><a href="">sed do eiusmod tempor Ut enim ad minim veniam</a></li> </ul> </li> </ul> <!-- /#dd --></nav> |
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 | #dd { @include cf; > ul > li { width: 25%; text-align: center; float: left; position: relative; > a { border: 1px solid #ccc; border-left: 0; } &:first-child > a { border-left: 1px solid #ccc; } } li ul { width: 100%; text-align: left; position: absolute; top: 100%; left: -1px; background: white; a { border: 1px solid #ccc; border-top: 0; padding: 10px 20px; } } .active { color: white; background: #666; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /* Cursor over drop down menu Author: KEITA HIRAI URL: keitahirai.net */ $(function(){ $("#dd li ul").hide(); $("#dd > ul > 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"); }); }); |
コンテンツ幅 100%
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <nav id="dd-mega"> <ul> <li><a href="">HOME</a></li> <li><a href="">アクセス</a> <ul> <li><img src="//placeimg.com/400/300/animals"> <p>テキスト</p></li> </ul> </li> <li><a href="">会社概要</a> <ul> <li><img src="//placeimg.com/400/300/arch"> <p>テキスト</p></li> </ul> </li> <li><a href="">お問い合わせ</a> <ul> <li><img src="//placeimg.com/400/300/nature"> <p>テキスト</p></li> </ul> </li> </ul> <!-- /#dd-mega --></nav> |
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 | #dd-mega { position: relative; @include cf; > ul > li { width: 25%; text-align: center; float: left; > a { border: 1px solid #ccc; border-left: 0; } &:first-child > a { border-left: 1px solid #ccc; } } li ul { width: 100%; color: white; text-align: left; position: absolute; left: 0; padding: 30px; background: rgba(0, 0, 0, 0.7); img { float: left; margin-right: 20px; } } .active { color: white; background: #666; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /* Cursor over drop down menu Author: KEITA HIRAI URL: keitahirai.net */ $(function() { $("#dd-mega li > ul").hide(); $("#dd-mega > ul > 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"); }); }); |
ブラウザ幅 100%
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 | <nav id="dd-full"> <ul> <li><a href="">HOME</a></li> <li><a href="">アクセス</a> <ul> <li><div> <img src="//placeimg.com/400/300/animals"> <p>テキスト</p> </div></li> </ul> </li> <li><a href="">会社概要</a> <ul> <li><div> <img src="//placeimg.com/400/300/arch"> <p>テキスト</p> </ul> </li> <li><a href="">お問い合わせ</a> <ul> <li><div> <img src="//placeimg.com/400/300/nature"> <p>テキスト</p> </ul> </li> </ul> <!-- /#dd-full --></nav> |
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 | #dd-full { @include cf; > ul > li { width: 25%; text-align: center; float: left; > a { border: 1px solid #ccc; border-left: 0; } &:first-child > a { border-left: 1px solid #ccc; } } li ul { width: 100%; color: white; text-align: left; position: absolute; left: 0; padding: 30px 0; background: rgba(0, 0, 0, 0.7); div { width: 1000px; margin: 0 auto; } img { float: left; margin-right: 20px; } } .active { color: white; background: #666; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /* Cursor over drop down menu Author: KEITA HIRAI URL: keitahirai.net */ $(function() { $("#dd-full li > ul").hide(); $("#dd-full > ul > 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"); }); }); |
カスタマイズ
- メニューを画像にしたい
- リストそれぞれに id を指定し、a / hover / .active に background を指定する。
画像メニューは時代遅れかつ面倒なのでやるべきでない。
問題点
- 動作はPCのみ
- ユーザーエージェントを切り替えたり、touchstart / touchend を設定したりといろいろ試したが、まともに動かせなかった。
- 実務的にはPCとスマホでメニューのデザインを切り替えるのが普通なので、まぁ何とかなるだろう。
![Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)](http://ecx.images-amazon.com/images/I/51Hq9FIAfIL.jpg)
Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)
posted with amazlet at 15.08.13
西畑一馬
KADOKAWA/アスキー・メディアワークス
売り上げランキング: 96,461
KADOKAWA/アスキー・メディアワークス
売り上げランキング: 96,461
コメントを投稿する