Home

Bolivien

Ratgeber

Demonstration eines Klappmenüs

Der Platz auf der sichtbaren Bildschirmseite ist immer knapp. Banner, Navigation und Inhalte - möglichst viel soll gleichzeigig sichtbar sein. Da wäre es doch eine gute Idee, die Dinge nur dann anzuzeigen, wenn sie benötigt werden, z.B. die Navigation.

Die Idee und die Grundkonstruktion dieses Klappmenüs stammt von der Webseite de.selfhtml.org.

Es wurde um zwei Features erweitert:

• Der Navigationsbereich ist jetzt teilweise transparent.
• Es wurde ein Zusatz eingefügt, der deutlich macht, dass sich links die Navigation befindet. Leider scrollt dieser Teil nicht mit. Das eigentliche Menü ist jedoch immer verfügbar, egal wie weit die Seite nach unten geht.
• Außerdem wurde der Klappleiste eine etwas gefälligere Grafik verpasst.

Werbung

Hier kommt jetzt mal ein bisschen Werbung:

So, hier ist die Werbung zu Ende. So gehört natürlich nicht zu diesem Navigationvorschlag, muss aber eben ab und zu mal sein. Weiter geht es mit der...

Transparenz

Um den Transparenzeffekt zu erreichen wurde die folgende Codierung im CSS-Bereich eingegeben:

filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;

Eigentlich bedeutenden alle drei Anweisungen das gleiche: Stelle ein bestimttes Element mit einer Farbdeckung von 75% dar. Die erste Variante ist für den IE 6, die zweite für FF2 und die dritte, die dem Standard entspricht, wird von Opera und FF3 vestanden.

Quellcode

Der Quellcode dieser Seite ist ausführlich kommentiert. Dadurch sollte es möglich sein, diese Konstruktion bei Bedarf anzupassen und auf der eigenen Webseite zu einzubauen.Speziell für NPage-Nutzer wurde mit Kommentaren deutlich gemacht, welche Teile in Header und Footer des Design eingefügt werden müssen.

Alle zum Ausprobieren und Einbau auf der eigenen Webseite erforderlichen Dateien wurden in ein Zip-Archiv gepackt. Es enthält:

• Die Datei klappe_dhtml.js, die bei NPage in das HTML-verzeichnis geladen werden muss.
• Die Dateien klappe02.png und navigation_back.gif, die bei NPage in das Verzeichnis Bilder hochgeladen werden müssen.
• Eine HTML-Datei, die am besten mit einem einfachen Editor geöffnet wird, um daraus -entprechend den Anweisungen im Kommentar- den Code für den Header und Footer des Designs zu entnehmen.

Download der Dateien