Hauptmenü

  • WCF 1

Achtung: Diese Seite ist nur noch Teil eines Archivs und wird in Zukunft entfernt.

Das Hauptmenü ist oftmals das Kernstück eines Stiles, deshalb sollte man es auch möglichst gut anpassen können. Das geht durch den Stileditor nicht nur einfach, sondern auch umfangreich. Standardmäßig befindet sich das Hauptmenü direkt unter dem Seitenkopf:


Es gibt im Stileditor hier 4 fieldsets, "Buttons", "Beschriftung", "Hintergrundfarbe" und "Hintergrundgrafik".

Im Bereich "Buttons" kann man erst einmal die einzelnen Menüpunkte ausrichten, also ob sie links-, rechtsbündig oder aber zentriert dargestellt werden. Außerdem lässt sich darunter eine Transparenz für die Buttonleiste aktivieren. Das ist vor allem dann sinnvoll, wenn man eine Hintergrundgrafik hat, die aber nicht dem Hauptmenü zugewiesen ist, dennoch dort aber angezeigt werden soll. Damit wird der Bereich neben den Buttons selbst transparent und wenn man die Hintergrundfarbe der einzelnen Buttons auch entfernt, sind sogar diese transparent.
Sofern man diese Transparenz für die Buttonleiste aktiviert, erscheint darunter nochmals eine Option, um die Trennlinie anzuzeigen. Dabei ist die Trennlinie vom Seitenkopf zum Hauptmenü gemeint, die beim Deaktivieren dieser Funktion nicht mehr angezeigt wird. Der Unterschied sieht so aus (Bild 1 mit aktivierter Trennlinie, Bild 2 ohne aktivierte Trennlinie):


Im zweiten fieldset lässt sich die Beschriftung anpassen. Für das Menü gibt es dabei 4 verschiedene Zustände. Der "Normale Zustand" ist, wenn der Menüpunkt nicht aktiv ist und man nicht mit der Maus darüber fährt. Normalerweise ist ein Menüpunkt dann aktiv, wenn man sich in diesem Bereich befindet. So ist der Menüpunkt "Galerie" aktiv, wenn man sich im Bereich der Galerie befindet. Das wäre dann der dritte Zustand. Der zweite Zustand ist der "Hover", also wenn man mit der Maus über einen Menüeintrag fährt, außer es handelt sich dabei um den aktiven Menüeintrag. Dieser wird mit dem vierten Zustand angepasst, dem "Aktiv Hover".
Genau dasselbe gilt im dritten fieldset für die Hintergrundfarbe.

Auf Wunsch kann man dann im letzten fieldset noch eine Hintergrundgrafik angeben. Einmal für den "Normalen Zustand" und einmal für den Zustand "Hover". Letzterer wirkt sich dabei auf den Zustand "Hover", "Aktiv" und "Aktiv Hover" aus. Die Hintergrundgrafik wird dann standardmäßig immer vertikal und horizontal wiederholt.
Über den Autor
Ich bin Webentwickler in Stuttgart und administriere Server seit vielen Jahren. In diesem Blog erstelle ich hauptsächlich Tutorials für andere Webentwickler, Webdesigner und Serveradministratoren.
-------------------------------------------------------------------------------------------------------------------------------------
I’m a web developer in Stuttgart, Germany, and server administrator since many years. This blog mainly contains a tutorial set for other web developer, web designer and server administrators.

29.648 mal gelesen

Kommentare 11

  • PatrickGER -

    Ich glaub ich weiß warum er ne PDF will :P Er möchte sich bestimmt mit einem klick alles rausdrucken lassen und in Ruhe durchlesen :P So muss man sich aber jeden Punkt einzeln rauslassen ^^

  • ThreeSixteen -

    Großartiges Tutorial :)

  • Black Rider -

    Warum denn eine PDF? Der Artikel ist ja hier immer verfügbar. ;)

  • spacenight -

    Gibt es davon eine PDF???
    Wäre Cool!
    Danke für den Eintrag hat geholfen!

  • Black Rider -

    Dann solltest du dich wohl mal etwas mit CSS auseinandersetzen ;)

  • sabi -

    Also ich verstehe nix.

  • TheZac -

    Thx, Black Rider. :)

  • TeRRy -

    Vielen Dank !!!

  • Lantash (Martouf) -

    Kenn einige Anfänger die mit dem WBBLite hantieren und denen dieser Artikel sicher weiterhilft. Für mich selbst stand auch wieder einiges neues drin. Danke fürs schreiben.

  • Black Rider -

    Das war die Hoffnung und auch der Grund, da das Tutorial dort entfernt wurde ;)

  • Trap -

    Sehr ausführlicher und verständlicher Artikel! Wird einigen jetzt, wo die WCom das Zeitliche gesegnet hat, sicher helfen.