ein- ausblenden einer Menüleiste

[maggie]

Hallo,
ich möchte eine Menüleiste (in einem div container) per klick ausblenden bzw. einblenden.
Wie mache ich das am Einfachsten?
Danke für Eure Tipps.
Gruß
Maggie

[Micha]

Hallo maggie,

Wie mache ich das am Einfachsten?

Du setzt die Style-Eigenschaft display auf den entsprechenden Wert (none|block), wenn das Ereignis <click> eintitt.

Mit freundlichem Gruß
Micha

[maggie]

Hallo Micha,
ich würde diese Möglichkeit auch gerne ausprobieren.

<a href ="#" onclick="display:none">Menü</a>
Bin ich damit schon mal auf dem richtigen Pfad?

Wie muss ich nun die div id einbinden?

Kannst Du mir da noch auf die Sprünge helfen.
Danke dafür.

Gruß
Maggie

[Micha]

Hallo maggie,

ich würde diese Möglichkeit auch gerne ausprobieren.

Die CSS-Variante ist, wenn man genügend Weitblick hat, aber vorzuziehen. Felix hat Dir sehr anschaulich beschrieben, wie er vorgegangen ist. Mit ein wenig Übung schaffst Du es auch.

<a href ="#" onclick="display:none">Menü</a>
Bin ich damit schon mal auf dem richtigen Pfad?

Naja, schwer zu sagen. Binär ausgedrückt: 0. :-)

Wie muss ich nun die div id einbinden?

JavaScript bietet hierfür ein paar Methoden an, eine davon heißt getElementById und entsprcht genau dem, was Du wahrscheinlich benötigst.

Nehmen wir an, Du hast ein Element mit der id=foo, dann kann Dir die o.g. Methode das Element als Objekt zurück liefern:

  
var obj = document.getElementById("foo");  

Dieses kannst Du nun manipulieren:

  
obj.style.backgroundColor = "red";  

siehe für Details den Link aus meinem letzten Posting.

Kannst Du mir da noch auf die Sprünge helfen.

Reicht Dir das um weiter zu kommen?

Mit freundlichem Gruß
Micha

[Felix Riesterer]

Liebe maggie,

ich möchte eine Menüleiste (in einem div container) per klick ausblenden bzw. einblenden.

also wenn ein Überfahren mit der Maus auch reichen würde, dann wäre JavaScript nicht meine Wahl. Ich hätte das dann mit CSS gelöst.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[maggie]

Liebe maggie,

ich möchte eine Menüleiste (in einem div container) per klick ausblenden bzw. einblenden.

also wenn ein Überfahren mit der Maus auch reichen würde, dann wäre JavaScript nicht meine Wahl. Ich hätte das dann mit CSS gelöst.

Liebe Grüße aus Ellwangen,

Hi Felix,
das ist ja ganz fein!
So stelle ich mir das vor :-)
...und mit CSS (warum kann ich das nicht:-(

Kannst Du mir zeigen wie das geht? Bitte!

Gruß
Maggie

[Felix Riesterer]

Liebe maggie,

Ich kann Dir gerne erklären, was ich gemacht habe, allerdings müsstest Du dann zumindest verstehen, wie man <http://de.selfhtml.org/css/formate/einbinden.htm#separat@title=CSS-Dateien einem Dokument als Layoutvorlage hinzufügt>, und wie man <http://de.selfhtml.org/javascript/intro.htm#javascriptdateien@title=Javascript-Dateien einbindet> (nur für den Internet-Explorer Version 6 und kleiner notwendig).

Wie Du im HTML-Quelltext auf der Seite sehen kannst, steht dort ein <div> mit der ID "navigation". Ich verwende deshalb ein <div>, da ich in ihm nicht nur die Liste an Links, sondern auch noch eine Unterüberschrift (<h2>) zusammen gruppiere. Also sieht das (stark gekürzt) so aus:

<div id="navigation">  
    <h2>Navigation</h2>  
    <ul>  
        <li><a href="inedx.html">Home</a></li>  
    </ul>  
</div>

Um nun die Navi zusammengeklappt darzustellen, lasse ich das <ul> Element nicht anzeigen (display:none). Man sieht also nur die Unterüberschrift mit dem Wort "Navigation". Das <div> drumherum habe ich mit einem Rand und weißem Hintergrund versehen, daher der Kasten. Ja, und dieses Symbol zum Aufklappen ist lediglich ein Hintergrundbild dieses <div>-Kastens.

Der eigentliche CSS-Code für das Aufklappen der Navi ist dieser hier:

#navigation ul {  
    display: none;  
    font-size: 100%;  
    padding: 0 0 0 2em;  
    margin: 0;  
}  
  
#navigation:hover ul {  
    display: block;  
}

Du kannst Dir auch gerne den vollständigen CSS-Code ansehen.

Dazu muss man allerdings sagen, dass der Internet-Explorer in der Version 6 und darunter diesen Effekt nicht beherrscht. Bei ihm klappt da nix auf. Da muss man dann mit Javascript nachhelfen, um ihm diese Unfähigkeit für unsere Zwecke abzutrainieren. Dazu verwende ich eine Art Scriptsammlung von Dean Edwards, die auf den Namen IE7 hört, und die ich so eingebunden habe:

<!-- compliance patch for microsoft browsers -->  
<!--[if lt IE 7]><script src="/main/js/ie7/ie7-standard-p.js" type="text/javascript"></script><![endif]-->

Ich habe also Dean Edwards IE7-Script im Ordner /main/js/ie7 abgelegt. Du musst es Dir herunterladen und auf Deiner Seite irgendwo in einen Ordner ablegen, um es dann von dort aus einzubinden.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[maggie]

Danke Felix,
für die ausführlichen Infos!!
Das CSS hat schon mal geklappt!!
Das Script schau ich später an - jetzt muss ich mal 'ne Pause einlegen.
Schönen Abend!
Gruß
Maggie