ugrás a tartalomhoz

Jquery dropdown menü

P-mac · 2011. Ápr. 25. (H), 12.05
Üdv.

A problémám annyi, hogy maga a menü lenyíló része nem marad kint (így egyenlőre az alábbi megoldást találtam ki rá).

html kód:

<div id="menu">
  <ul>
    <li>
      <a href="#">1</a>
      <ul>
        <li><a href="#">1.1</a></li>
        <li><a href="#">1.2</a></li>
        <li><a href="#">1.3</a></li>
      </ul>
    </li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li>
      <a href="#">5</a>
      <ul>
        <li><a href="#">5.1</a></li>
      </ul>
    </li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a>
      <ul>
        <li><a href="#">7.1</a></li>
        <li><a href="#">7.2</a></li>
        <li><a href="#">7.3</a></li>
      </ul>
    </li>
  </ul>
</div>
css kód:

#menu {width:850px; height:38px; padding:0 0 0 130px;}
#menu ul {list-style-type:none;}
#menu ul li {height:26px; float:left; position:relative; display:inline; padding:0 0 12px 0;}
#menu ul li:hover {background-color:rgba(0,0,0,0.8);}
#menu ul li a {text-decoration:none; font-family:Verdana; font-size:12px; color:white; font-weight:bold; padding:12px 19px; display:block;}
#menu ul li a:hover {color:#515b85;}
#menu ul li ul {position:absolute; visibility:visible; display:none;}
#menu ul li ul li {float:none; width:190px; height:20px; border-bottom:1px solid gray; text-align:left; background-color:rgba(0,0,0,0.8); padding:0 0 15px 0px; display:list-item;}
#menu ul li ul li:hover {background-color:#585a5f;}
#menu ul li ul li a {width:150px; padding:10px 20px;}
#menu ul li ul li a:hover {color:black;}
jquery kód:

$(document).ready(function(){

     $('#menu > ul > li > ul').hide();
     $('#menu').show();
     $('#menu > ul > li > a').mouseover(function(){
         $(this).next('ul').slideDown('slow');
     }).mouseout(function(){
     $(this).next('ul').delay('2000').slideUp('fast');
     });

});
Leginkább egy olyan megoldás érdekelne, ahol a html fájlba nem kéne külön stílust adni a lenyíló menükre stb, hanem a kód felismerje, hogy ha van benne még egy <ul> akkor lenyílik hover-re(vagy onmouseover-re) és ha lemegyünk róla akkor visszagördül a menü.(slideUP('fast'))

Köszönöm előre is a segítséget.
‹ div, automatikus height tulajdonsággal Cross-domain Request ›
 ■
1

Nem csak <a>-ra, hanem az

ironwill · 2011. Ápr. 25. (H), 23.06
Nem csak <a>-ra, hanem az egész <li>-re kellene beállítanod a mouseout-ot.

OFF
Temérdek dropdown menü létezik. Mivel a jQuery az egyik (ha nem a) legnépszerűbb keretrendszer, ezért abban a kiváltságos helyzetben vagy, hogy bőven van választási lehetőséged. pl. http://css-tricks.com/simple-jquery-dropdowns/
/OFF
2

Dropdown menühöz alapesetben

bb0072 · 2011. Ápr. 27. (Sze), 10.30
Dropdown menühöz alapesetben nem is kell javascript, csak ha még néhány speciális effektet is rá akarsz pakolni a menüanimációra. Ez például a Suckerfish menü, ahol egy nyúlfarknyi javascript a szerencsétlen ie6-ot segíti, ha még mindig célplatform.

A "külön stílust adni a lenyíló menükre" azt jelenti, hogy class-al vagy id-vel megjelölni őket? Nem igazán értem, hogy ezt miért lenne jó elkerülni. Ha mindenképp, akkor ezt leginkább egy onload-ra időzített javascriptből, mégpedig úgy, hogy a js ad egy class-t a menünek...
3

css vs js

ironwill · 2011. Ápr. 27. (Sze), 12.32
Ez szép és természetesen lehet css-ből is menüt építeni, de. Nem ez volt a kérdése..
A másik, hogy ha csak egy kicsit is szeretné animálni a menüt, akkor megint csak nem megoldás..