2012-05-10 16 views
-3

私は、このHTMLコードを持っている:HTMLバウンス効果

<!doctype html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Untitled Document</title> 
    <link rel="stylesheet" href="navbar.css" type="text/css"> 
    </head> 

    <body><div class="AJXCSSMenuGAbaaTB"><!-- AJXFILE:navbar.css --> 
    <ul class="sub"> 
    <li><a href="http://www.gigabyte.heliohost.org/" title="Home"><b>Home</b></a></li> 
    <li><a class="ajxsub" href="http://www.gigabyte.heliohost.org/about" title="About Us &amp; Contact Information"><b>About</b></a> 
     <ul> 
     <li class="sfirst slast"><a href="http://www.fb.fan.page.gigabyte.heliohost.org/" title="Like GigaByte on Facebook">Facebook Page</a></li> 
     </ul> 
    </li> 
    <li><a class="ajxsub" href="http://www.gigabyte.heliohost.org/tools/"><b>Tools</b></a> 
     <ul> 
     <li class="sfirst"><h1>Online</h1></li> 
     <li><h1>Backyard Monsters</h1></li> 
     <li><a href="http://www.gigabyte.heliohost.org/tools/bm-icalc/" title="Backyard Monsters Inferno Base Health Calculator">Inferno Base Health Calculator</a></li> 
     <li><a href="http://www.gigabyte.heliohost.org/tools/bm-calc/" title="Backyard Monsters Main Base Health Calculator">Main Base Health Calculator</a></li> 
     <li><a href="http://www.gigabyte.heliohost.org/tools/bm-opcalc/" title="Backyard Monsters Outpost Base Health Calculator">Outpost Base Health Calculator</a></li> 
     <li><a href="http://www.gigabyte.heliohost.org/tools/bmlist/" title="Update List for Backyard Monsters ">Update List</a></li> 
     <li><h1>War Commander</h1></li> 
     <li><a href="http://www.gigabyte.heliohost.org/tools/wc-calc/" title="War Commander Main Base Health Calculator">Main Base Health Calculator</a></li> 
     <li><a href="http://www.gigabyte.heliohost.org/tools/wclist/" title="Update List for War Commander">Update List</a></li> 
     <li><h1>Offline</h1></li> 
     <li class="slast"><a href="http://www.gigabyte.heliohost.org/tools/offdl/">Downloads</a></li> 
     </ul> 
    </li> 
    <li><a class="ajxsub" href="http://www.gigabyte.heliohost.org/help/" title="Help"><b>Help</b></a> 
     <ul> 
     <li class="sfirst slast"><a href="http://www.gigabyte.heliohost.org/help/faq/" title="Frequently Asked Questions">F.A.Q.</a></li> 
     </ul> 
    </li> 
    </ul> 
    <br > 
    </div> 
    </body> 
    </html> 

とCSSコード:

.AJXCSSMenuGAbaaTB {position:relative;margin:0 auto;z-index:100;width:590px;height:52px;text-align:center;} 
    .AJXCSSMenuGAbaaTB ul {position:relative;display:inline-block;margin:0;padding:0;list-style-type:none;} 
    * html .AJXCSSMenuGAbaaTB ul {display:inline;} 
    *+html .AJXCSSMenuGAbaaTB ul {display:inline;} 
    .AJXCSSMenuGAbaaTB li {float:left;margin:0;} 
    .AJXCSSMenuGAbaaTB li:hover,.AJXCSSMenuGAbaaTB .ajxover {position:relative;} 
    .AJXCSSMenuGAbaaTB ul ul h1 {width:184px;padding:5px 8px 5px 8px;margin:0;font:bold 14px/14px Arial,Helvetica,sans-serif;text-decoration:none;text-align:center;color:#000000;background:#ffffff;} 
    .AJXCSSMenuGAbaaTB ul ul .sfirst h1 {margin-top:4px;} 
    .AJXCSSMenuGAbaaTB a {display:block;float:left;height:52px;white-space:nowrap;overflow:hidden;padding:0 0 0 16px;font:18px/52px Arial,Helvetica,sans-serif;text-decoration:none;text-align:center;color:#ffffff;background:#3c3c3c url(navbar_files/top.gif) no-repeat top left;} 
    .AJXCSSMenuGAbaaTB a b {display:block;padding:0 22px 0 0;font-weight:normal;background:url(navbar_files/top.gif) no-repeat top right;} 
    .AJXCSSMenuGAbaaTB li:hover a,.AJXCSSMenuGAbaaTB .ajxover a {background:#ff6600 url(navbar_files/top.gif) no-repeat bottom left;} 
    .AJXCSSMenuGAbaaTB li:hover a b,.AJXCSSMenuGAbaaTB .ajxover a b {background:url(navbar_files/top.gif) no-repeat bottom right;} 
    .AJXCSSMenuGAbaaTB a.ajxsub {background:#3c3c3c url(navbar_files/top-sub.gif) no-repeat top left;} 
    .AJXCSSMenuGAbaaTB a.ajxsub b {background:url(navbar_files/top-sub.gif) no-repeat top right;} 
    .AJXCSSMenuGAbaaTB li:hover a.ajxsub,.AJXCSSMenuGAbaaTB .ajxover a.ajxsub {background:#ff6600 url(navbar_files/top-sub.gif) no-repeat bottom left;} 
    .AJXCSSMenuGAbaaTB li:hover a.ajxsub b,.AJXCSSMenuGAbaaTB .ajxover a.ajxsub b {background:url(navbar_files/top-sub.gif) no-repeat bottom right;} 
    .AJXCSSMenuGAbaaTB ul ul {position:absolute;left:-9999px;top:-9999px;width:208px;height: auto;display:inline-block;float:none;margin:0;background:#ff6600 url(navbar_files/sub-bg.gif) right center;} 
    .AJXCSSMenuGAbaaTB ul :hover ul,.AJXCSSMenuGAbaaTB ul .ajxover ul {left:-4px;top:52px;} 
    .AJXCSSMenuGAbaaTB li li {width:200px;padding:0 4px 0px 4px;} 
    .AJXCSSMenuGAbaaTB li li.slast {padding-bottom:4px;} 
    .AJXCSSMenuGAbaaTB ul ul a,.AJXCSSMenuGAbaaTB ul :hover ul a,.AJXCSSMenuGAbaaTB ul .ajxover ul a {float:none;margin:0;width:172px;height:auto;white-space:normal;padding:5px 8px 5px 20px;font:14px/14px Arial,Helvetica,sans-serif;text-decoration:none;text-align:left;border:0;color:#000000;background:#ffffff;} 
    .AJXCSSMenuGAbaaTB ul :hover ul .sfirst a,.AJXCSSMenuGAbaaTB ul .ajxover ul .sfirst a {margin-top:4px;} 
    .AJXCSSMenuGAbaaTB ul ul :hover a,.AJXCSSMenuGAbaaTB ul ul .ajxover a {background:#f1f1f1;} 
    .AJXCSSMenuGAbaaTB br {clear:both;height:0;font-size: 1px;line-height: 0px;} 

が、私は上のメインメニューを置くと、それはバウンスを作成することのJavaScriptファイルを作成したいですサブメニューを表示するには、サブメニューの表示とサブメニューの表示に160msの遅れがありますが、緩和する前に600msの遅れで上部に緩和されます。

+3

あなたの質問は... – romainberger

+5

あなたは何かを試したことがありますか、あなたは仕事が無料で済むだけですか? –

+0

@Jacek_FH私はJqueryの初心者です。そして、私はこのstackoverflowが私の質問に答える最も簡単な方法だと思っています。私はちょうどJavascriptやJqueryではなく、HTMLの中間体です。 –

答えて

0

私は学ぶために、この無料の30日間の愛のjQueryで忍者になりたい場合は、次の http://tutsplus.com/course/30-days-to-learn-jquery/

それとも、ドキュメントを読んで:とバウンス http://jqueryui.com/demos/effect/#easing

のためにあなたがして簡単にそれをテストすることができますツール: http://jsfiddle.net/またはhttp://jsbin.com/3/

これは良いスターターキットです!

+0

どうすればこの作業を行うことができますか? (バウンス)、{回:(バウンス)、(時間):(スクリプト)= "テキスト/ javascript"> $( "li.sfirst")に(ホバリング "" ajxsub ")(機能(){ $ 3}、300); })); –

+0

このスクリプトはどこにありますか? こちらをお読みください:http://api.jquery.com/on/ –

関連する問題