Menüs, die bei einem Klick wieder verschwinden

…ist eine Skriptsprache, die die Möglichkeiten von HTML stark erweitert. Sie wird eingesetzt, um Internet-Seiten flexibel und interessant gestalten zu können. Beispiel: Formulare mit Berechnungsfunktionen / animierte Schaltflächen oder einfach fallender Schnee. - Fragen - Antworten –Tipps hier hinein...

Moderator: lauras

Beiträge bitte im neuen Forum

Menüs, die bei einem Klick wieder verschwinden

Beitragvon phpguy » Freitag 6. Mai 2011, 16:48

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
Benutzeravatar
phpguy
HTML-Newbie
 
Beiträge: 10
Registriert: Sonntag 17. April 2011, 12:47

Re: Menüs, die bei einem Klick wieder verschwinden

Beitragvon Sarkkan » Freitag 6. Mai 2011, 17:49

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^^)
Benutzeravatar
Sarkkan
HTML-Acrobat
 
Beiträge: 1557
Registriert: Montag 5. April 2010, 01:46
Wohnort: Bei Köln

Re: Menüs, die bei einem Klick wieder verschwinden

Beitragvon phpguy » Freitag 6. Mai 2011, 18:36

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?
Benutzeravatar
phpguy
HTML-Newbie
 
Beiträge: 10
Registriert: Sonntag 17. April 2011, 12:47

Re: Menüs, die bei einem Klick wieder verschwinden

Beitragvon Sarkkan » Freitag 6. Mai 2011, 18:44

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

Achja.. und noch was:
Siehe mein Punkt3?
Benutzeravatar
Sarkkan
HTML-Acrobat
 
Beiträge: 1557
Registriert: Montag 5. April 2010, 01:46
Wohnort: Bei Köln

Re: Menüs, die bei einem Klick wieder verschwinden

Beitragvon phpguy » Freitag 6. Mai 2011, 20:08

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?
Benutzeravatar
phpguy
HTML-Newbie
 
Beiträge: 10
Registriert: Sonntag 17. April 2011, 12:47

Re: Menüs, die bei einem Klick wieder verschwinden

Beitragvon Sarkkan » Freitag 6. Mai 2011, 21:45

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();
    }
}
Benutzeravatar
Sarkkan
HTML-Acrobat
 
Beiträge: 1557
Registriert: Montag 5. April 2010, 01:46
Wohnort: Bei Köln

Re: Menüs, die bei einem Klick wieder verschwinden

Beitragvon phpguy » Samstag 7. Mai 2011, 09:37

achso ... Verzeihung, ich hatte mich verlesen, ich dachte onload und nicht onclick :o
Benutzeravatar
phpguy
HTML-Newbie
 
Beiträge: 10
Registriert: Sonntag 17. April 2011, 12:47

Re: Menüs, die bei einem Klick wieder verschwinden

Beitragvon phpguy » Samstag 7. Mai 2011, 09:44

danke für die Hilfe, es funktioniert jetzt alles wie gewünscht!
Benutzeravatar
phpguy
HTML-Newbie
 
Beiträge: 10
Registriert: Sonntag 17. April 2011, 12:47

Re: Menüs, die bei einem Klick wieder verschwinden

Beitragvon DerWaldschrat » Samstag 7. Mai 2011, 15:49

Auch im Internet-Explorer?
DerWaldschrat
DerWaldschrat
HTML-Freund
 
Beiträge: 88
Registriert: Freitag 4. Juli 2008, 16:37

Re: Menüs, die bei einem Klick wieder verschwinden

Beitragvon phpguy » Samstag 7. Mai 2011, 16:21

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?
Benutzeravatar
phpguy
HTML-Newbie
 
Beiträge: 10
Registriert: Sonntag 17. April 2011, 12:47

Re: Menüs, die bei einem Klick wieder verschwinden

Beitragvon DerWaldschrat » Samstag 7. Mai 2011, 16:24

Ä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
DerWaldschrat
HTML-Freund
 
Beiträge: 88
Registriert: Freitag 4. Juli 2008, 16:37

Re: Menüs, die bei einem Klick wieder verschwinden

Beitragvon phpguy » Samstag 7. Mai 2011, 19:48

danke, es funktioniert.
Benutzeravatar
phpguy
HTML-Newbie
 
Beiträge: 10
Registriert: Sonntag 17. April 2011, 12:47


Beiträge bitte im neuen Forum

Zurück zu JavaScript

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 2 Gäste

cron