jQuery・サイド固定の縦100％とAmazonライクなマウスオーバーメガメニューを作りました [PC限定/IE8対応]
ふと「Amazonのメガメニューはどの程度のコードで作れるの？」と思い、暇つぶしで作成。
タッチデバイスでは使えないPC限定、ついでになぜか固定サイドメガメニューも作成。
検証済みブラウザとOS
- IE 8～ ※一部CSSはIE8不可
- Firefox
- Google Chrome
- Safari
- Windows 7
- OS X Yosemite
このjQueryで出来ること、出来ないこと
- 出来ること
- 無駄なアニメーションを排除しているので、直感的な操作を期待できる
- マウスを置くコンテンツの範囲が広く、訪問者のストレスを小さくする
- 多数のカテゴリを省スペースでまとめられる
- 出来ないこと
- タッチデバイスでの動作
要点とコード
- jQueryは普通のコード
- 子セレクタを使い、直下のリストタグを表示・非表示操作
1 2 | <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script src="js/verticalDropdown.js"></script> |
サイド固定縦100％
- トリガーは .open
- position: fixed; で固定させ、margin-left で強引に表示
- 階層を管理しやすいように、level-00 とクラスを付与して切り分け
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 | <nav id="dd-side"> <ul> <li><a href="">HOME</a></li> <li class="open"><a href="">アクセス</a> <ul class="level-01"> <li><a href="">この文章はダミーですこの文章はダミーです</a></li> <li><a href="">文字の大きさ</a></li> <li><a href="">量、字間、行間等</a></li> <li><a href="">確認するために</a></li> <li class="open"><a href="">入れています</a> <ul class="level-02"> <li><a href="">この文章はダミーです</a></li> <li><a href="">この文章はダミーです</a></li> <li><a href="">この文章はダミーです</a></li> <li class="open"><a href="">この文章はダミーです</a> <ul class="level-03"> <li><a href="">この文章はダミーです</a></li> <li><a href="">この文章はダミーです</a></li> <li><a href="">この文章はダミーです</a></li> <li><a href="">この文章はダミーです</a></li> <!-- /.level-03 --></ul> </li> <!-- /.level-02 --></ul> </li> <!-- /.level-01 --></ul> </li> <li class="open"><a href="">会社概要</a> <ul class="level-01"> <li><a href="">文字の大きさ</a></li> <li><a href="">量、字間、行間等</a></li> <li><a href="">確認するために</a></li> <li><a href="">入れています</a></li> <li class="open"><a href="">この文章はダミーです</a> <ul class="level-02"> <li><a href="">この文章はダミーです</a></li> <li><a href="">この文章はダミーです</a></li> <li><a href="">この文章はダミーです</a></li> <li class="open"><a href="">この文章はダミーです</a> <ul class="level-03"> <li><a href="">この文章はダミーです</a></li> <li><a href="">この文章はダミーです</a></li> <li><a href="">この文章はダミーです</a></li> <li><a href="">この文章はダミーです</a></li> <!-- /.level-03 --></ul> </li> <!-- /.level-02 --></ul> </li> <!-- /.level-01 --></ul> </li> <li class="open"><a href="">お問い合わせ</a> <ul class="level-01"> <li><a href="">文字の大きさ</a></li> <li><a href="">量、字間、行間等</a></li> <li><a href="">確認するために</a></li> <li><a href="">入れています</a></li> <li class="open"><a href="">この文章はダミーですこの文章はダミーです</a> <ul class="level-02"> <li><a href="">この文章はダミーです</a></li> <li><a href="">この文章はダミーです</a></li> <li><a href="">この文章はダミーです</a></li> <li class="open"><a href="">この文章はダミーです</a> <ul class="level-03"> <li><a href="">この文章はダミーです</a></li> <li><a href="">この文章はダミーです</a></li> <li><a href="">この文章はダミーです</a></li> <li><a href="">この文章はダミーです</a></li> <!-- /.level-03 --></ul> </li> <!-- /.level-02 --></ul> </li> <!-- /.level-01 --></ul> </li> </ul> <!-- /#dd-side --></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 40 41 42 43 44 45 46 47 48 | #dd-side { width: 200px; height: 100%; position: fixed; border-right: 1px solid #ccc; background: white; a { display: block; padding: 10px 20px 10px 10px; &:hover { color: white; background: #666; } } .open { position: relative; &:after { @include arrow; width: 5px; height: 5px; color: #ccc; top: 50%; right: 15px; margin-top: -3px; } } >ul ul { width: 200px; height: 100%; position: fixed; top: 0; border-left: 1px solid #ccc; border-right: 1px solid #ccc; background: white; } .level-01 {left: 199px;} .level-02 {left: 398px;} .level-03 {left: 597px;} .active { color: white; background: #666; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /* Side fixed menu Author: KEITA HIRAI URL: keitahirai.net */ $(function(){ $("#dd-side li >ul").hide(); $("#dd-side .open").hover(function() { $(">ul", this).stop(true, true).show(); $(">a", this).addClass("active"); }, function() { $(">ul", this).stop(true, true).hide(); $(">a", this).removeClass("active"); }); }); |
Amazonライクメガメニュー
- こちらも同様に、level-00 とクラスを付与して階層を管理
- メニュー部の level-02 はwidth未指定、コンテンツ部の level-03 はwidthを指定
- hide() メソッドは、overflow: hidden; をインラインCSSで追加するため、絶対配置をネストすると、二階層以下は非表示になる。
解決策として、level-01 をスライドさせる際に、最下層の level-02 に overflow: visible; を追加して、無理やり表示させている。123$(">ul", this).stop(true, true).slideDown("fast", function() {$("#dd-am .level-02").css("overflow", "visible")});
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 | <nav id="dd-am"> <ul class="level-01"> <li><a href=""><i class="fa fa-bars"></i> メニュー</a> <ul class="level-02"> <li><span>Kindle・電子書籍</span> <ul class="level-03"> <li><img src="//placeimg.com/200/200/animals"> <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p></li> <!-- /.level-03 --></ul> </li> <li><span>Amazon インスタントビデオ</span> <ul class="level-03"> <li><img src="//placeimg.com/200/200/tech"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></li> <!-- /.level-03 --></ul> </li> <li><span>デジタルミュージック</span> <ul class="level-03"> <li><img src="//placeimg.com/200/200/arch"> <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p></li> <!-- /.level-03 --></ul> </li> <li><span>本・コミック・雑誌</span> <ul class="level-03"> <li><img src="//placeimg.com/200/200/nature"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></li> <!-- /.level-03 --></ul> </li> <li><span>DVD・ミュージック・ゲーム</span> <ul class="level-03"> <li><img src="//placeimg.com/200/200/animals"> <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p></li> <!-- /.level-03 --></ul> </li> <li><span>家電・カメラ</span> <ul class="level-03"> <li><img src="//placeimg.com/200/200/tech"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></li> <!-- /.level-03 --></ul> </li> <li><span>ホーム・キッチン・ペット</span> <ul class="level-03"> <li><img src="//placeimg.com/200/200/arch"> <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p></li> <!-- /.level-03 --></ul> </li> <li><span>ヘルス・ビューティー</span> <ul class="level-03"> <li><img src="//placeimg.com/200/200/nature"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></li> <!-- /.level-03 --></ul> </li> <li><span>ヘルス・ビューティー</span> <ul class="level-03"> <li><img src="//placeimg.com/200/200/animals"> <p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p></li> <!-- /.level-03 --></ul> </li> <!-- /.level-02 --></ul> </li> <!-- /.level-01 --></ul> <!-- /#dd-am --></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 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 | #dd-am { .level-01 { position: relative; >li { width: 150px; border: 1px solid #ccc; border-radius: 2px; >a { text-align: center; display: block; padding: 5px 0; } } } .level-02 { position: absolute; left: 0; top: 98%; border: 1px solid #ccc; border-bottom-left-radius: 2px; background: white; >li >span { cursor: default; display: block; position: relative; padding: 5px 30px 5px 20px; &:hover { color: white; background: #666; } &:after { @include arrow; width: 5px; height: 5px; color: #ccc; top: 50%; right: 15px; margin-top: -3px; } } } .level-03 { width: 500px; height: 100.5%; position: absolute; left: 100%; top: -1px; padding: 20px; border: 1px solid #ccc; border-top-right-radius: 2px; border-bottom-right-radius: 2px; background: white; 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 17 18 19 20 21 22 23 24 25 26 27 28 | /* Like Amazon menu navigation Author: KEITA HIRAI URL: keitahirai.net */ $(function(){ $("#dd-am li >ul").hide(); $("#dd-am .level-01 >li").hover(function() { $(">ul", this).stop(true, true).slideDown("fast", function() { $("#dd-am .level-02").css("overflow", "visible") }); $(">a", this).addClass("active"); }, function() { $(">ul", this).stop(true, true).slideUp("fast"); $(">a", this).removeClass("active"); }); $("#dd-am .level-02 >li").hover(function() { $(">ul", this).stop(true, true).show(); $(">span", this).addClass("active"); }, function() { $(">ul", this).stop(true, true).hide(); $(">span", this).removeClass("active"); }); }); |
カスタマイズ
- メニュー部分を画像にしたい
- 時間と労力の無駄でしかないので、画像はやめるよう先方を説得しよう。
時代は変わった。
![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.15
西畑一馬
KADOKAWA/アスキー・メディアワークス
売り上げランキング: 45,345
KADOKAWA/アスキー・メディアワークス
売り上げランキング: 45,345
コメントを投稿する