- 締切済み
auのナビゲーションの動きをするJquery
auのWebサイト http://www.au.kddi.com/ こちらのメインイメージ下のナビゲーションと 同じような動きをするJqueryプラグインを探しております。 マウスオンでメニューが下に展開して、カーソルを他のボタンに移動させると 切り替わり、吹き出しのような三角も追従する 丸×ボタンを押すと消える プラグインで良いのがありますでしょうか。 どうぞ宜しくお願い致します。
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
回答がないみたいなので… 少々複雑な構成になっているので、そのままというライブラリはそう間単に見つからないのでは… ご提示のサイトもjQueryを利用しているようですが、設置されているものがそのままライブライと言えばいえるでしょう。でも、オリジナルのようですし、著作権もありそうな… ごく簡単なサンプルとして、似て非なるもの（？）をご参考までに。 画像でやるべきところを、▲や×などで代用していますので、見た目もそれなりになってますが、考え方はある程度までは使えるかと。 hoverだとqueueに処理が溜まりやすいので、ちゃんとやるなら、アニメーションをキャンセルして処理するような考え方にしたほうがよろしいと思います。 サンプルなので画像を使っていませんし、実際の構成も変わると思いますので、ＣＳＳはかなりいい加減です。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <style type="text/css"> body{ background-color:#eee; } #menu{ width:808px; margin:0 auto; } #menu ul, #menu li{ list-style-type:none; margin:0; padding:0; } #menu ul.navi{ overflow:hidden; zoom:1; } #menu ul.navi li{ width:200px; height:100px; background-color:#fff; float:left; margin-right:2px; } ul.navi img{ width:100px; height:50px; margin:20px 50px; } div.pointer{ background-color:#fff; height:12px; margin-top:8px; position:relative; } div.pointer div{ position:absolute; top:0; color:#ccc; font-size:14px; } #menu .panel{ height:320px; position:relative; overflow:hidden; } #menu ul.contents, #menu ul.contents li{ height:300px; } #menu ul.contents{ border:1px solid #ccc; border-width:1px 0; background-color:#ddd; position:relative; } #menu ul.contents li{ padding:10px; position:absolute; top:0; } div.closer{ height:20px; background-color:#fff; position:relative; } div.closer div{ width:28px; background-color:#ccc; text-align:center; position:absolute; top:-12px; left:390px; cursor:pointer; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var slider = function(e, s){ this.element = e, this.speed = s; e.hide(); } slider.prototype = { open: function(){ this.element.slideDown(this.speed); }, close: function(){ this.element.slideUp(this.speed); } } var panel = new slider($("#menu .panel"), "slow"); panel.set = function(target){ var index = $(">li", target.parent()).index(target); this.open(); $("#menu .contents>li").animate({opacity: 0}) .eq(index).stop().animate({opacity: 1}); } var pointer = new slider($("#menu .pointer div"), 200); pointer.set = function(target){ var left = target.offset().left - target.parent().offset().left; left += (target.width() - this.element.width())/2 | 0; this.open(); this.element.animate({left:left}, 500); } $("#menu .navi>li").hover(function(){ var target = $(this); pointer.set(target); panel.set(target); }, function(){}); $("#menu .closer div").click(function(){ panel.close(); pointer.close(); }); }); </script> </head> <body> <div id="menu"> <ul class="navi"> <li><img src="img/01.jpg" alt=""></li> <li><img src="img/02.jpg" alt=""></li> <li><img src="img/03.jpg" alt=""></li> <li><img src="img/04.jpg" alt=""></li> </ul> <div class="pointer"><div>▲</div></div> <div class="panel"> <ul class="contents"> <li>パネルＮｏ１ <img src="img/01.jpg" alt=""></li> <li>パネルＮｏ２ <img src="img/02.jpg" alt=""></li> <li>パネルＮｏ３ <img src="img/03.jpg" alt=""></li> <li>パネルＮｏ４ <img src="img/04.jpg" alt=""></li> </ul> <div class="closer"><div>×</div></div> </div> </div> </body> </html>
