Tutorial HTML, CSS u. PHP - Forum

[phpguy]

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]

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]

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

Code: Alles auswählen

<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>

Code: Alles auswählen

<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]

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

Achja.. und noch was:
Siehe mein Punkt3?

[phpguy]

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]

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: Alles auswählen

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();
    }
}

[phpguy]

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

[phpguy]

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

[DerWaldschrat]

Auch im Internet-Explorer?
DerWaldschrat

[phpguy]

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]

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

Code: Alles auswählen

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();
    }
}


DerWaldschrat

[phpguy]

danke, es funktioniert.