2012-05-10 2 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, что, когда на зависать в главном меню, это позволит создать сильный удар чтобы показать подменю, задержка в 160 мс при показе подменю и возврате подменю, он просто ослабит верх с задержкой в ​​600 мс, прежде чем он отключится.

+3

И ваш вопрос ... – romainberger

+5

Вы что-то пробовали или вам просто нужно сделать работу бесплатно? –

+0

@Jacek_FH Я просто новичок в JQuery. И я считаю этот stackoverflow самым простым способом ответить на мои вопросы. Я только что был промежуточным звеном в HTML, а не Javascript или JQuery. –

ответ

0

Если вы хотите быть ниндзя в JQuery Я люблю это бесплатно 30 дней, чтобы узнать: http://tutsplus.com/course/30-days-to-learn-jquery/

Или просто прочитать документ: и рикошета http://jqueryui.com/demos/effect/#easing

Вы можете проверить это легко с инструменты, такие как: http://jsfiddle.net/ или http://jsbin.com/3/

Это хороший стартовый комплект!

+0

Как я могу это сделать?

+0

Где вы находите этот скрипт? , пожалуйста, прочтите следующее: http://api.jquery.com/on/ –

Смежные вопросы