Javascript Navigation

[Rakinzon]

Hallo epvpers,

ich habe mal wieder ein kleines Problem mit Javascript.

Ich arbeite derzeit an der Navigation meines Systems.
Wenn ein User nun Events drückt öffnet sich ein Dropdown Menü welches ich mit:

        
<script type="text/javascript">
            $.jGrowl("Hello world!");
            function toggle(id, link) {
                var e = document.getElementById(id);
                    if (e.style.display == '') {
                        e.style.display = 'none';
                    } else {
                        e.style.display = '';
                    }
            }
		</script>

realisiert habe. Drückt ein User nun z.B. auf Übersicht schließt sich das Menü wieder:

<div id="navigaion">
	<ul>
        <li><a onclick="toggle('events', this);">Events</a></li>
            <div id="events" style="display:none">
                <li id="navi_open"><a href="?action=stocks">Übersicht</a></li>
                <li id="navi_open"><a href="?action=event_add">Hinzufügen</a></li>
            </div>
	</ul>
	</div>

Wird das style="display:none" entfernt bleibt das Menü geöffnet. Habt ihr Anregungen wie das System sich merken soll/kann, dass ein Menü geöffnet war (da später auch mehrere Menüpunkte folgen sollen)

--> Wichtig dabei ist, dass ich nicht für jede Seite eine extra Navigation machen möchte

[iKyroja :>]

Wiso machst du das nicht mit jQuery?

[Rakinzon]

Mit jQuery habe ich mich noch nicht richtig bechäftigt, ähnlich wie mit Javascript.

Kannst du mir das als Beispiel erläutern?

[MrPuschel]

jquery ist eine gute Idee. Es erlaubt dir Dinge schneller, eleganter und mit Crossbrowserunterstützung umzusetzen. Schau es dir mal an.




Zu deinem Problem, du möchtest dir nur merken ob ein Menüpunkt geöffnet ist oder nicht? Das kannst du doch tun wenn du prüfst ob display auf none gestzt ist oder es direkt mit in einer globalen variable speichern, oder verstehe ich es falsch?

[iKyroja :>]

So wie hier z.B würde ich es jetzt einfach und auf die schnelle coden.

PHP Code:

$('#menu ul li ul.sub-menu').hide();

$('#menu ul li').hover(function() {
    $(this).children('ul.sub-menu').slideDown('fast');
}, function() {
    $(this).children('ul.sub-menu').slideUp('fast');
}); 


In HTML müsstest du die Navi dan so coden:

<div id="menu">
    <ul>
        <li>Events
             <ul>
                 <li><a href="link">Übersicht</a></li>
                 <li><a href="link">Hinzufügen</a></li>
             </ul>
        </li>
    </ul>
</div>