ugrás a tartalomhoz

jQuery menü apró problémával

Ayswer · 2012. Jún. 12. (K), 12.24
Sziasztok!

Van egy 3 szintes jQuery menüm, ami úgy működik hogy:
• Ha nyitva van egy almenü és egy másik nyitható almenüre kattintok, akkor a nyitott összezáródik. Ez a második szinten belül is így működik.

• Az éppen aktív menüpontnak az egy class-t, ezzel kiemeli az aktív menüpontot, illetve a hierarchiában felette álló fő menüpontokat ha vannak.

Ezek eddig működnek.

Ami nem működik:
• Az új oldal betöltésénél összecsukódik a menü, és eddig nem jöttem rá, hogy hogyan lehetne kinyitni a kiemelt classokat. Próbálkoztam már többféle megoldással is, mindhiába.

Az alap koncepciót nem szívesen módosítanám, nem ismerem sajnos a jQuery-t örülök, hogy idáig eljutottam. :) Így tehát csak ezt az egy dolgot kéne megoldani, hogy kinyíljon a menü új oldalletöltésnél. Ellenben ha valaki szerint egy másik megoldás jó, és azt le is írja nekem kód formájában, azt természetesen megköszönöm!

HTML (ide most én írtam be a highlight classokat a szemléltetés végett):
  1. <div id="nav">  
  2.   
  3.         <ul class="nav">  
  4.             <li><a href="#">főoldal</a></li>  
  5.             <li><a href="rolunk">rólunk</a></li>  
  6.             <li><a href="#">szolgáltatások</a>  
  7.                 <ul>  
  8.                     <li><a href="lakberendezesi-tanacsadas">lakberendezési tanácsadás</a></li>  
  9.                     <li><a href="enteriortervezes">enteriőrtervezés</a></li>  
  10.                     <li><a href="enterior-styling">enteriőr-styling</a></li>  
  11.                     <li><a href="arculattervezes">arculattervezés</a></li>  
  12.                 </ul>  
  13.             </li>  
  14.               
  15.             <li class="highlight"><a href="#">referenciák</a>  
  16.                 <ul>  
  17.                     <li class="highlight"><a href="#">enteriőrtervezés</a>  
  18.                         <ul>  
  19.                             <li><a href="#">projekt1</a></li>  
  20.                             <li class="highlight"><a href="#">projekt2</a></li>  
  21.                             <li><a href="#">projekt3</a></li>  
  22.                         </ul>  
  23.                     </li>  
  24.                     <li><a href="#">enteriőr styling</a>  
  25.                         <ul>  
  26.                             <li><a href="#">projekt1</a></li>  
  27.                             <li><a href="#">projekt2</a></li>  
  28.                             <li><a href="#">projekt3</a></li>  
  29.                         </ul>  
  30.                     </li>  
  31.                     <li><a href="arculattervezes-referencia">arculattervezés</a></li>  
  32.                 </ul>  
  33.             </li>  
  34.             <li><a href="kapcsolat">kapcsolat</a></li>  
  35.             <li><a href="/blog">blog</a></li>  
  36.         </ul>  
  37.     </div>​  
jQuery:
  1. $(document).ready(function(){  
  2.     var str = location.href.toLowerCase();  
  3.     $("ul.nav li a").each(function() {  
  4.         if (str.indexOf(this.href.toLowerCase()) > -1) {  
  5.             $("li.highlight").removeClass("highlight");  
  6.             $(this).parent().addClass("highlight");  
  7.       
  8.         }  
  9.     });  
  10.       
  11.     $("li.highlight").parents().each(function(){  
  12.         if ($(this).is("li")){              
  13.             $(this).addClass("highlight");  
  14.         }  
  15.     });  
  16. });  
  17.   
  18. (function(){  
  19.     $('ul.nav li ul').hide();  
  20.   
  21.     $('ul.nav a').on('click', function(e){  
  22.         if ($(this).siblings('ul').size() > 0){                      
  23.             var links_parent = $(this).parent(),  
  24.                 other_menu = links_parent.siblings('li').children('ul'),  
  25.                 submenu = $(this).siblings('ul');  
  26.   
  27.             other_menu.slideUp('200');  
  28.             submenu.slideToggle('200');  
  29.             e.preventDefault();  
  30.         }  
  31.                           
  32.     });  
  33.       
  34. })();​  
Annyit még érdemes tudni, hogy a projektek elemeket egy php kód szúrja be egy adatbázis segítségével.

Előre is köszönöm a segítséget. :)
‹ Triviális IE, CSS probléma Creamama - Jquery Scroll Bar ›
 ■
1

jQuery menu

peti19321 · 2012. Jún. 13. (Sze), 09.49
Szerintem neked egy jQuery UI accordion-ra lenne szükséged

itt egy példa: http://jqueryui.com/demos/accordion/
2

Köszi, megnézem, de nekem

Ayswer · 2012. Jún. 13. (Sze), 14.19
Köszi, megnézem, de nekem most pont az a problémám, hogy örülök, hogy eddig sikerült összehoznom, és nem szeretném már a nulláról kezdeni. :) Kiváltképp, hogy már csak ezt az egy dolgot kell megoldanom, hogy betöltés után a "highlight" elementek kinyíljanak.

Ezt tényleg ennyire bonyolult megoldani? :)
3

jQ menu

peti19321 · 2012. Jún. 13. (Sze), 14.52
Az a helyzet ,hogy én még így is ajánlom a jQuery UI-t mert nagyon egyszerűen ,és gyorsan lehet benne dolgozni . Ha mégis megpróbálnál nem kellene semmit újraírni csak átfutod a dokumentációt ,és rájössz ,hogy ha ezzel kezdtél volna már nem lennének gondjaid.

JQuery UI accordion.

ennyit tudtam segíteni :)