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):
<div id="nav">

        <ul class="nav">
            <li><a href="#">főoldal</a></li>
            <li><a href="rolunk">rólunk</a></li>
            <li><a href="#">szolgáltatások</a>
                <ul>
                    <li><a href="lakberendezesi-tanacsadas">lakberendezési tanácsadás</a></li>
                    <li><a href="enteriortervezes">enteriőrtervezés</a></li>
                    <li><a href="enterior-styling">enteriőr-styling</a></li>
                    <li><a href="arculattervezes">arculattervezés</a></li>
                </ul>
            </li>
            
            <li class="highlight"><a href="#">referenciák</a>
                <ul>
                    <li class="highlight"><a href="#">enteriőrtervezés</a>
                        <ul>
                            <li><a href="#">projekt1</a></li>
                            <li class="highlight"><a href="#">projekt2</a></li>
                            <li><a href="#">projekt3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">enteriőr styling</a>
                        <ul>
                            <li><a href="#">projekt1</a></li>
                            <li><a href="#">projekt2</a></li>
                            <li><a href="#">projekt3</a></li>
                        </ul>
                    </li>
                    <li><a href="arculattervezes-referencia">arculattervezés</a></li>
                </ul>
            </li>
            <li><a href="kapcsolat">kapcsolat</a></li>
            <li><a href="/blog">blog</a></li>
        </ul>
    </div>​
jQuery:

        $(document).ready(function(){
            var str = location.href.toLowerCase();
            $("ul.nav li a").each(function() {
                if (str.indexOf(this.href.toLowerCase()) > -1) {
                    $("li.highlight").removeClass("highlight");
                    $(this).parent().addClass("highlight");
            
                }
            });
            
            $("li.highlight").parents().each(function(){
                if ($(this).is("li")){            
                    $(this).addClass("highlight");
                }
            });
        });

        (function(){
            $('ul.nav li ul').hide();

            $('ul.nav a').on('click', function(e){
                if ($(this).siblings('ul').size() > 0){                    
                    var links_parent = $(this).parent(),
                        other_menu = links_parent.siblings('li').children('ul'),
                        submenu = $(this).siblings('ul');

                    other_menu.slideUp('200');
                    submenu.slideToggle('200');
                    e.preventDefault();
                }
                                
            });
            
        })();​
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 :)