ein- ausblenden einer Menüleiste

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