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:
  1. <div id="menu">  
  2.   <ul>  
  3.     <li>  
  4.       <a href="#">1</a>  
  5.       <ul>  
  6.         <li><a href="#">1.1</a></li>  
  7.         <li><a href="#">1.2</a></li>  
  8.         <li><a href="#">1.3</a></li>  
  9.       </ul>  
  10.     </li>  
  11.     <li><a href="#">2</a></li>  
  12.     <li><a href="#">3</a></li>  
  13.     <li><a href="#">4</a></li>  
  14.     <li>  
  15.       <a href="#">5</a>  
  16.       <ul>  
  17.         <li><a href="#">5.1</a></li>  
  18.       </ul>  
  19.     </li>  
  20.     <li><a href="#">6</a></li>  
  21.     <li><a href="#">7</a>  
  22.       <ul>  
  23.         <li><a href="#">7.1</a></li>  
  24.         <li><a href="#">7.2</a></li>  
  25.         <li><a href="#">7.3</a></li>  
  26.       </ul>  
  27.     </li>  
  28.   </ul>  
  29. </div>  
css kód:
  1. #menu {width:850px; height:38px; padding:0 0 0 130px;}  
  2. #menu ul {list-style-type:none;}  
  3. #menu ul li {height:26px; float:left; position:relative; display:inline; padding:0 0 12px 0;}  
  4. #menu ul li:hover {background-color:rgba(0,0,0,0.8);}  
  5. #menu ul li a {text-decoration:none; font-family:Verdana; font-size:12px; color:white; font-weight:bold; padding:12px 19px; display:block;}  
  6. #menu ul li a:hover {color:#515b85;}  
  7. #menu ul li ul {position:absolute; visibility:visible; display:none;}  
  8. #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;}  
  9. #menu ul li ul li:hover {background-color:#585a5f;}  
  10. #menu ul li ul li a {width:150px; padding:10px 20px;}  
  11. #menu ul li ul li a:hover {color:black;}  
jquery kód:
  1. $(document).ready(function(){  
  2.   
  3.      $('#menu > ul > li > ul').hide();  
  4.      $('#menu').show();  
  5.      $('#menu > ul > li > a').mouseover(function(){  
  6.          $(this).next('ul').slideDown('slow');  
  7.      }).mouseout(function(){  
  8.      $(this).next('ul').delay('2000').slideUp('fast');  
  9.      });  
  10.   
  11. });  
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..