Javascript Navigation

02/13/2013 10:20 Rakinzon#1
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:
Code:
        
<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:


HTML Code:
<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
02/13/2013 11:05 iKyroja :>#2
Wiso machst du das nicht mit jQuery?
02/13/2013 11:13 Rakinzon#3
Mit jQuery habe ich mich noch nicht richtig bechäftigt, ähnlich wie mit Javascript.

Kannst du mir das als Beispiel erläutern?
02/13/2013 12:06 MrPuschel#4
jquery ist eine gute Idee. Es erlaubt dir Dinge schneller, eleganter und mit Crossbrowserunterstützung umzusetzen. Schau es dir mal an.

[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]

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?
02/13/2013 12:32 iKyroja :>#5
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:

HTML Code:
<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>