Menüs, die bei einem Klick wieder verschwinden

phpguy · 6. Mai 2011

Hallo zusammen!
Ich arbeite seit einiger Zeit an einem Onlinespiel. Dieses Spiel hat oben eine Menüleiste, die einige Kategorien hat. Wenn man eine dieser Kategorien anklickt, erscheint ein Untermenü. Ich arbeite hierfür mit Div-Blöcken und dem Style-Element display.

Nun möchte ich, dass dieses Untermenü wieder ausgeblendet wird, wenn man irgendwo hinklickt (außer auf das Untermenü oder das Menü).

Ich hoffe, Ihr könnt mir helfen.

vielen Dank im Vorraus
phpguy

Sarkkan · 6. Mai 2011

1. Wieso arbeitest du nicht einfach mit <ul>'s? Allein schon der Semantik wegen
2. ..kennst du :hover? Ist eine CSS-Pseudoklasse mit der etwas beim herüberfahren mit der Maus passiert.
Damit ist es ganz bequem solche Aufklappmenüs zu erstellen, theoretisch kannst damit sogar ein Menü kreeiren, welches sich beim Anklicken öffnet, aber wenn man mit der Maus weg geht wieder zu klappt.

3. window.onclick = function(){ docment...style.display = "none"; } ? .__.
(ist natürlich nur die Grobform :p solltest halt mit ner Variabel arbeiten un so^^)

phpguy · 6. Mai 2011

Ich habe soweit alles schon fertig - ich brauche nur einen Event, der das Menü wieder ausblendet. Ich poste mal, was ich habe:

Code

<script type="text/javascript">
	<!--
	function showgame()
	{
		document.getElementById('login').style.display='none';
		document.getElementById('game').style.display='block';
		document.getElementById('game').focus;
	}
	function showlogin()
	{
		document.getElementById('login').style.display='block';
		document.getElementById('game').style.display='none';
		document.getElementById('login').focus;
	}
	function hidesubmenues()
	{
		document.getElementById('login').style.display='none';
		document.getElementById('game').style.display='none';
	}
	//-->
</script>

Alles anzeigen

Code

<div style="width: 100%;height: 150;position: absolute;top: 125;left: 0;background-color: #909F05;color: #28375B;" id="menue"><a href="javascript:showgame();">Das Spiel</a><a href="javascript:showlogin();">Anmelden</a></div>
<div style="display:none;width: 100%;height: 150;position: absolute;top: 275;left: 0;background-color: #6C6117;color: #28375B;" id="game" onBlur="javascript:hidesubmenues();">Das Spiel</div>
<div style="display:none;width: 100%;height: 150;position: absolute;top: 275;left: 0;background-color: #6C6117;color: #28375B;" id="login">Anmelden</div>

Im Prinzip brauche ich jetzt nur noch einen Event, das die Funktion hidesubmenues() aufruft - undzwar nicht, sobald das Menü mit der Maus verlassen wird, sondern sobald man wo anders hinklickt. Geht das?

Sarkkan · 6. Mai 2011

Hübsch
Wir arbeiten mit den Event-Attributen
Schon mal überlegt das auszulagern?

Achja.. und noch was:
Siehe mein Punkt3?

phpguy · 6. Mai 2011

nagut, das würde mir ein Teil des style-Attributs im Div-Element ersparen ... Aber eine Lösung des Problems sehe ich darin nicht - Du etwa?

Sarkkan · 6. Mai 2011

Hach Junge -.-
window.onclick trifft dann ein, wenn ich irgendwo in das Fenster klicke.
Über das Event, welches übergeben wird, könnte ich dann noch schauen ob der Klick nun in die Liste ging, oder sonst irgendwo hin.

Code

window.onclick = function(e){
    var targetId = e.target.id;
    // Die ID des angeklickten Elements




    if(targetId == "login"){
        showgame();
    } else if(targetId == "login"){
        showlogin();
    } else {
        hidesubmenues();
    }
}

Alles anzeigen

phpguy · 7. Mai 2011

achso ... Verzeihung, ich hatte mich verlesen, ich dachte onload und nicht onclick :o

phpguy · 7. Mai 2011

danke für die Hilfe, es funktioniert jetzt alles wie gewünscht!

DerWaldschrat · 7. Mai 2011

Auch im Internet-Explorer?
DerWaldschrat

phpguy · 7. Mai 2011

nein, danke für den Hinweis ... Der bekommt das mal wieder nicht hin. Typisch Internet Explorer.
Ich glaube, ich werde dann einfach eine Abfrage programmieren, die den Nutzern vom Internet Explorer stattdessen einen Link "Untermenü ausblenden" oder so anzeigt - dann hat die Mehrheit, die noch an den Internet Explorer glaubt, halt nicht so viel Komfort wie die anderen. Oder kennt einer eine bessere Lösung?

DerWaldschrat · 7. Mai 2011

Ähm du könntest auch den Eventhandler für das Fenster ändern:

Code

window.onclick = function(e){
    var targetId = e.target.id || window.event.target.id;
    // Die ID des angeklickten Elements




    if(targetId == "login"){
        showgame();
    } else if(targetId == "login"){
        showlogin();
    } else {
        hidesubmenues();
    }
}

Alles anzeigen

DerWaldschrat

phpguy · 7. Mai 2011

danke, es funktioniert.

Menüs, die bei einem Klick wieder verschwinden

Jetzt mitmachen!

Teilen