Menu openklappen

[Gangkast]

Heb er al een tijd mijn eigen brein over lopen breken.
aangezien ik geen ICT'er ben, hoewel in het verleden wel met PHP heb gewerkt, kom ik het hier niet zo snel mee uit.

het gaat om het volgende:

code:

<script type="text/javascript">
            
$(document).ready(function() {
    // Add a value to each menu:
    $("#Menu > li > a + ul").attr("slide", "down");
    
    // Collapse everything but the first menu:
    $("#Menu > li > a").not(":first").find("+ ul").slideUp(1).attr("slide", "up");
    
    // Expand or collapse:
    $("#Menu > li > a").click(function() {
        // Collapse open menu:
        $(this).find("#Menu > li > a + ul[@slide='down']").slideUp("fast").attr("slide", "up");
        
        // Expand this menu:
        $(this).find("+ ul").slideToggle("fast").attr("slide", "down");
    });
});
        </script>

met dit als het menu:

code:

<div align="left">
<ul id="Menu">

    <li><a href="pagina1.php" target="frame1">Pagina1</a>


    <li><a href="Pagina2.php"  target="frame1">Pagina2</a>

        <ul>
            <li><a href="sub1.php" target="frame1">Sub1</a></li>
            <li><a href="sub2.php" target="frame1">Sub2</a></li>
            <li><a href="sub3.php" target="frame1">Sub3</a></li>
            <li><a href="sub4.php" target="frame1">Sub4</a></li>

        </ul>
    </li>

<li><a href="pagina3.php"  target="frame1">Pagina3</a>


        <ul>                    
            <li><a href="sub5.php" target="frame1">Sub5</a></li>
            <li><a href="sub6.php" target="frame1">Sub6</a></li>
            <li><a href="sub7.php" target="frame1">Sub7</a></li>
            <li><a href="sub8.php" target="frame1">Sub8</a></li>
        </ul>
    </li>
    

    <li><a href="pagina4.php" target="frame1" >Pagina4</a>
    <li><a href="pagina5.php" target="frame1">Pagina5</a>
    <li><a href="pagina6.php" target="frame1">Pagina6</a>

</ul>

</div>

Nu klapt het submenu open als je op 'Pagina2' of op 'Pagina3' klikt.

nu wil ik hetzelfde menu, op andere pagina, maar dat 'Pagina2' al standaard open staat vanaf het begin.
dit geld ook voor weer een andere pagina, maar dan voor 'Pagina3'

waarschijnlijk is het maar 1 regel meer in de javascript, heb dit menu zelf niet geschreven en heb zelf al verschillende combinaties proberen te maken, maar niet gelukt.

[H004]

Verander regel 8, zodat niet de eerste ul open blijft, maar degene met de id de jij wil: je zal dus al je submenu-uls een afzonderlijk id mee moeten geven. Met PHP kun je dan je javascript gereneren:

PHP:

// www.site.nl/index.php?pagina=home
echo "$(\"#Menu > li > a\").not(\"".$_GET["pagina"]."\").find(\"+ ul\").slideUp(1).attr(\"slide\", \"up\")";

[NMe]

Is wat jij wil niet gewoon een simpele suckerfish, waar je tegenwoordig kant en klare menu's van kan downloaden?

[RM-rf]

het eenvoudigste is als je dit gewoon met statische CSS oplost en het menu dat je op bepaalde pagina's open wilt hebben, gewoon een extra <UL class="open"> en de regel:

code:

$("#Menu > li > a").not(":first")

veranderen in

code:

$("#Menu > li > a").not(".open")

het script komt trouwens over als mootools, klop dat? dat is eigenlijk wel info die handig kan zijn.

[Gangkast]

H004 schreef op zaterdag 08 maart 2008 @ 17:37:
Verander regel 8, zodat niet de eerste ul open blijft, maar degene met de id de jij wil: je zal dus al je submenu-uls een afzonderlijk id mee moeten geven. Met PHP kun je dan je javascript gereneren:

PHP:

// www.site.nl/index.php?pagina=home
echo "$(\"#Menu > li > a\").not(\"".$_GET["pagina"]."\").find(\"+ ul\").slideUp(1).attr(\"slide\", \"up\")";

Met PHP heb ik het liefst, zo genereer ik ook een de inhoud van mijn Iframe, als nodig.

nu komt die regel 8 er in de source zo uit:

code:

$("#Menu > li > a").not("Menu2").find("+ ul").slideUp(1).attr("slide", "up")

het menu heb ik zo veranderd:

code:

<div align="left">
<ul id="Menu">

    <li><a href="pagina1.php" target="frame1">Pagina1</a>


    <li><a href="Pagina2.php"  target="frame1">Pagina2</a>

        <ul id="Menu2">
            <li><a href="sub1.php" target="frame1">Sub1</a></li>
            <li><a href="sub2.php" target="frame1">Sub2</a></li>
            <li><a href="sub3.php" target="frame1">Sub3</a></li>
            <li><a href="sub4.php" target="frame1">Sub4</a></li>

        </ul>
    </li>

<li><a href="pagina3.php"  target="frame1">Pagina3</a>


        <ul id="Menu3">                    
            <li><a href="sub5.php" target="frame1">Sub5</a></li>
            <li><a href="sub6.php" target="frame1">Sub6</a></li>
            <li><a href="sub7.php" target="frame1">Sub7</a></li>
            <li><a href="sub8.php" target="frame1">Sub8</a></li>
        </ul>
    </li>
    

    <li><a href="pagina4.php" target="frame1" >Pagina4</a>
    <li><a href="pagina5.php" target="frame1">Pagina5</a>
    <li><a href="pagina6.php" target="frame1">Pagina6</a>

</ul>

</div>

maar het menu blijft nog steeds standaard ingeklapt...

[RM-rf]

met alle respect, maar javascript met PHp gaan generen vind ik peroonlijk onzin, de meerwaarde ligt juist in een scheiding tussen clientside en serverside programmering, dat houd je scripting veel schoner en overzichtelijker als ik eerlijk mag zijn:

hét probleem hier is dat je niet lijkt te weten wat bepaalde regels programma-code doen, de oplossing daarvoor is _altijd_ zelf uit te zoeken wat die bepaalde regels dan wél doen:

de regel die je veranderd hebt, creert een collection van A-elementen die zelf direkt child zijn van een LI element dat zelf weer direkt een child is van het #Menu element (welk een UL is) (dus het eerste niveau binnen de boomstructuur)...de
'.not()' method haalt daar weer een element uit...

wat je nu gedaan hebt is de not te definieren met de 'id' van een onderliggende UL (alhoewel je dan eigenlijk had moeten doen:

PHP:

echo ( ".not(\"#".$_GET["pagina"]."\")";

dat werkt echter ook niet omdat je gezochtte collectie enkel A-elementen bevat en niet de betreffende UL...

wat je veel beter kunt doen is met je PHP-scripting afblijven van de javascript, maar wel de gegenereerde html-code een extra class toewijzen aan de A-link

HTML:

<li><a href="Pagina2.php"  target="frame1" class="open">Pagina2</a>

        <ul id="Menu2">
            <li><a href="sub1.php" target="frame1">Sub1</a></li>
            <li><a href="sub2.php" target="frame1">Sub2</a></li>
            <li><a href="sub3.php" target="frame1">Sub3</a></li>
            <li><a href="sub4.php" target="frame1">Sub4</a></li>

        </ul>
    </li>

en van je javascript maken:

JavaScript:

    // Collapse everything but the first menu:
    $("#Menu > li > a").not(".open").find("+ ul").slideUp(1).attr("slide", "up");

[Gangkast]

Perfect! zo werkt het
hardstikke bedankt!