Muse Kompakt Kurs – Lektion 8 – Menü gestalten

In der letzten Lektion, haben wir uns angesehen, wie man die Navigation erstellt. Dabei haben wir uns sowohl die automatisch, als auch manuell erstellten Menüs angesehen. Heute geht es darum, wie man diese Menüs in ihrem aussehen verändern kann. Dabei werden wir auch die verschiedenen Status Zustände, die ein Element mit Link haben kann kennenlernen.

Um das besser zeigen zu können, habe ich meine Website etwas erweitert und verändert. Es ist eine neue Seite mit dem Namen „Über uns“ dazugekommen. Die Seite Kontakt wurde aus dem Menü ausgeschlossen. Das wurde so gemacht, wie auch bereits die Homepage Seite.

 

So soll es aussehen

Es sind jetzt im automatischen Menü die Seiten „Über uns“, „Produkte“ und „Services“. Weiters wurde ein manuelles Menü mit den Einträgen „Kontakt“ und „Impressum“ erstellt.

Die Menü auf der Musterseite eingefügt sehen dann wir folgt aus:

Muse - Menü unformatiert

Muse – Menü unformatiert

Das fertig gestaltete Menü soll dann wie folgt aussehen.

Muse - Menü formatiert

Muse – Menü formatiert

Man erkennt daran aber nur einen Teil der gemachten Arbeit, denn es wurden bei der Navigation auch die verschiedenen Status Zustände verändert. Neben dem normalen Zustand gibt es noch „Rollover“, „Maustaste gedrückt“ und „Aktiv“. Uns interessieren neben „Normal“ vor allem die Zustände „Rollover“ und „Aktiv“. Unter Rollover versteht man den Zustand, wenn der User mit der Maus über einen Menüpunkt fährt, ohne noch darauf zu klicken. Der Zustand Aktiv, wird dann angezeigt, wenn die Seite im Browser aktiv angezeigt wird.

Als Beispiel bei unserem Menü haben wir im folgenden Bild „Über uns“ als Normal, „Produkte“ als Rollover und „Services“ als aktiv dargestellt.

Muse - Hauptmenü Status

Muse – Hauptmenü Status

Auch beim Kontakten, habe ich die verschiedenen Zustände gestaltet. So sieht man bei „Kontakt“ den aktiven und bei Impressum den Rollover Zustand.

Muse - Kontaktmenü Status

Muse – Kontaktmenü Status

In den nächsten Schritten werden wir uns ansehen, wie man diese verschiedenen Zustände gestalten kann.

 

Die Elemente des Menüs

Bevor wir uns den Status Zuständen zuwenden, möchte ich dir noch zeigen, welche Teile man wie bei einem Menü formatieren kann.

Das Menu, hat eine Besonderheit, den es besteht nicht nur einfach aus einem Element, das man direkt anwählen kann, sondern aus Elementen, die ineinander verschachtelt sind.

Das gesamte Element „Menü“ kann man anwählen in dem man es einmal mit der Maus anklickt. Dann ist auch der Selektionsrahmen um das ganze Menü. Zur Kontrolle, sieht man links oben „Menü – Kein Status“

Muse - Element Menü

Muse – Element „Menü“

Ist das Menü ausgewählt und selektiert, dann kann man mit der Maus einmal auf eines der Menüelemente klicken – zum Beispiel auf „Homepage“.

Jetzt ist der Selektionsrahmen um dieses Element und links oben, kann man zur Kontrolle „Menübefehl: Normal“ lesen. Es ist also der Teil „Menübefehl“ selektiert.

Muse - Element Menübefehl

Muse – Element „Menübefehl“

Man könnte annehmen, dass dies schon genügt. Beim es geht noch weiter. Noch ein Klick auf die Schrift innerhalb des Menübefehl Elements und man selektiert die „Beschriftung“. Auch das kann man links oben an „Beschriftung: Normal“ erkennen.

Muse - Element Beschriftung

Muse – Element „Beschriftung“

Das Gute, aber auch das Gemeine an der Möglichkeit verschiedene Elemente anzuwählen, ist, dass jedes einzelne Element auch formatiert werden kann und sich diese Formatierung auch überschreiben können. So kann zum Beispiel der Text bei allen drei Elemente verändert werden.

Es stellt sich jetzt die Frage, was passiert, wenn man zum Beispiel die Textfarbe bei allen drei Elementen unterschiedlich einstellt.

Die Antwort darauf ist einfach. Es gewinnt immer das innen liegende Element. Also am Beispiel des Menüs die „Beschriftung“. Wird dem Text bei „Beschriftung“ eine Farbe zugewiesen, dann kann man beim „Menü“ Element oder beim „Menübefehl“ Element die Farbe noch so oft verändern, es tut sich gar nichts.

Das ist eine kleine Stolperfalle, die einen ganz schön zu Verzweiflung bringen kann, wenn man dieses Verhalten nicht kennt oder nicht daran denkt.

Daher mein Tipp: Merke dir dieses Verhalten gut, das spart Nerven. Das gilt übrigens nicht nur bei Menüs, sondern bei allen Elementen, die verschachtelt sind.

 

Die Menü Status Zustände

So nachdem wir jetzt wissen, welche Elemente wir formatieren können gehen wir zu den verschiedenen Status Zuständen.

Vielleicht ist die schon aufgefallen, dass zwei der oben genannten Elemente nach dem Namen einen Doppelpunkt und die Bezeichnung „Normal“ hatten. Eines der Elemente, das „Menü“, hatte die Bezeichnung „Kein Status“.

Nehmen wir eines der beiden Elemente mit dem Zusatz „Normal“ her, dann erkennen wir, dass der Text orange und unterstrichen ist. Als fortgeschrittene Muse Anwender wissen wir schon, dass eine solche Formatierung bedeutet, dass durch Klick auf diesen unterstrichenen Text weitere Einstellmöglichkeiten zum Vorschein kommen.

Klicken wir also auf das Wort „Normal“ und es erscheint eine Liste der verschiedenen Zustände, die ich oben schon erwähnt habe.

Muse - Menü Status Normal

Muse – Menü Status Normal

Wählen wir aus der Liste einen anderen Zustand, zum Beispiel „Rollover“ aus, denn können wir am selektierten „Menübefehl“ sofort die Formatierung dieses Zustandes erkennen. Ähnlich ist es auch bei den anderen beiden Zuständen.

Muse - Menü Status Rollover

Muse – Menü Status Rollover

 

Menü gestalten in 5 Schritten

Ich zeige dir jetzt in 5 Schritten, wie man die einzelnen Zustände anpassen kann.

Schritt 1 – Menü anwählen

Zuerst kommt die Formatierung des „Menü“ Elements. Also einmal auf das Menü klicken, damit der Selektionsrahmen um das ganze Menü geht.

Muse - Menü Element selektiert

Muse – Menü Element selektiert

Jetzt können wir bei den Bedienfeldern oder aus der Leiste oben die Formatierung für den Text öffnen und dabei folgende Einstellungen ändern

– Schrift: Arial
– Größe: 14
– Farbe #666666
– Fett formatiert

Muse - Menü Text Eigenschaften

Muse – Menü Text Eigenschaften

Weiters ändern wir auch die Fläche. Diese bekommt ein ganz leichtes grau, nämlich #EEEEEE

Muse - Menü Fläche ändern

Muse – Menü Fläche ändern

Schritt 2 – Menüpunkt („Menübefehl“) ändern:

Wenn diese Formatierungen angeschlossen sind, dann wird ein „Menübefehl“ Element ausgewählt. Ob es richtig ausgewählt wurde, erkennt man wieder an dem Rahmen, der nun um eines der Menüelemente liegen sollte.

Muse - Menübefehl selektiert

Muse – Menübefehl selektiert

Hier wird nur eine Formatierung durchgeführt – es wird die Fläche auf transparent gesetzt:

Muse - Menübefehl Fläche transparent

Muse – Menübefehl Fläche transparent

Warum ändern wir die Hintergrundfarbe beim „Menü“ Element und nehmen diese beim „Menübefehl“ Element weg? Der Grund dafür ist, dass es sonst ein Abstand zwischen den Elementen sichtbar ist und keine durchgängige Fläche, wie in meinem Beispiel Menü. Das ist jetzt eine Design Entscheidung, die ich getroffen habe. Möchtest du den Abstand haben, dann kann die Hintergrundfarbe beim „Menübefehl“ Element verändert werden.

 

Schritt 3 – Aktiven Status ändern:

Jetzt geht es weiter mit dem aktiven Status. Das „Menübefehl“ Element sollte noch ausgewählt sein. Dadurch lässt sich in der Liste der Status Zustände „Aktiv“ auswählen.

Muse - Menübefehl Status Aktiv

Muse – Menübefehl Status Aktiv

Wenn wir das getan haben, dann wird Hintergrundfarbe auf  #CCCCCC geändert.

Muse - Menübefehl Fläche

Muse – Menübefehl Fläche

Weiters ändern wir noch den Rahmen und zwar nur unten auf eine Stärke von 3px und eine Farbe #666666.

Muse - Menübefehl Kontur

Muse – Menübefehl Kontur

Wenn wir uns das Menü jetzt ansehen, dann erkennt man ein kleine Unschönheit. Die Menübeschriftungen sind unterschiedlich hoch. Sprich der Eintrag „Über uns“ ist jetzt etwas höher, wegen dem eingefügten unteren Rahmen.

Muse - Menü Problem

Muse – Menü Problem

Um das zu ändern, wechseln wir zurück in den Status Normal und setzen dort ebenfalls Rahmen unten in der selben Farbe wie Hintergrundfarbe (#EEEEEE) des Element. Durch dieselbe Farbe ist der Rahmen nicht sichtbar.

Muse - Menübefehl Normal Kontur

Muse – Menübefehl Normal Kontur

Achtung: Das Ändern des Rahmens muss wirklich in dieser Reihenfolge erfolgen. Also zuerst beim aktiven Menüpunkt ändern und dann erst beim „Normal“ Status. Macht man es umgekehrt, dann funktioniert das interessanterweise nicht.

 

Schritt 4 – Ändern des „Rollover“ Zustandes:

Nachdem der „Normal“ und „Aktiv“ Zustand fertig ist, kümmern wir uns noch um den „Rollover“ Status. Dazu wechseln wir wieder bei ausgewählten „Menübefehl“ Element den Status und zwar zu „Rollover“.

Muse - Menübefehl Rollover

Muse – Menübefehl Rollover

Dort ändern wir nur die Schriftfarbe ändern auf #FFFFFF.

Muse - Menübefehl Rollover Textfarbe

Muse – Menübefehl Rollover Textfarbe

Schritt 5 – „Maustaste gedrückt“ Zustand ändern

Jetzt fehlt nur noch ein Zustand, nämlich der „Maustaste gedrückt“ Status. Diese ist sichtbar, wenn wir mit der Maus auf einen Menüpunkt klicken, bis zu dem Zeitpunkt des Ladens der neuen Seite. Für diesen Zustand wollen wir kein spezielles Aussehen haben. Daher können wir alles Formatierungen für diesen Status entfernen. Das geht einfach, in dem wir den Status aus der Liste auswählen und dann das Papierkorbsymbol anklicken.

Muse - Menübefehl Maustaste gedrückt

Muse – Menübefehl Maustaste gedrückt

 

Kontakt Menü

Wir haben jetzt unser automatisch erstelltes Hauptmenü fertig gestaltet. Jetzt gehen wir noch das kleinere manuelle Kontakt Menü an.

An diesem Beispiel möchte ich zeigen, wie du weitere kleinere Spezial Menüs unterbringen und gestalten kannst.

Weiter oben habe ich dir schon gezeigt, wie das Kontakt Menü aussehen soll. Der entscheidende Unterschied, ist, dass die Menüpunkte untereinander sind. Also ein Fall für ein vertikales Menü. Jetzt haben wir aber bereits ein horizontales Menü eingefügt. Das ist aber, wie wir wissen kein grosses Problem.

Im Eigenschaftsmenü können wir die Eigenschaft „Richtung“ auf „Vertikal“ ändern. Schon sind die Menüpunkte untereinander angeordnet.

Muse - Kontaktmenü vertikal

Muse – Kontaktmenü vertikal

Ist das Element „Menü“ ausgewählt, dann ändern wir den Text auf die Schriftart „Arial“, die Größe aus 12 und die Farbe auf #666666.

Muse - Kontaktmenü Text

Muse – Kontaktmenü Text

Als nächstes wählen wir das „Menübefehl“ Element aus und setzen die Hintergrundfarbe auf transparent.

Muse - Kontaktmenü Fläche

Muse – Kontaktmenü Fläche

Jetzt wird noch die Gesamthöhe des „Menü“ Elements verkleinert, damit die beiden Elemente näher zusammenrücken.

Muse - Kontaktmenü Höhe

Muse – Kontaktmenü Höhe

Wir müssen nur mehr die verschiedenen Status Zustände „Menübefehl“ Element anpassen. Beginnen dabei mit dem Status Aktiv.

Dort ändern wir die Hintergrundfarbe auf ein ganz helles Grau (#EEEEEE).

Muse - Kontaktmenü Menübefehl Aktiv Fläche

Muse – Kontaktmenü Menübefehl Aktiv Fläche

Zusätzlich wollen wir auf der rechten Seite noch eine senkrechte Linie haben. Diese wird wieder durch eine Kontur erreicht. Diese ist nur auf der rechten Seite und hat die Farbe #666666.

Muse - Kontaktmenü Menübefehl Aktiv Kontur

Muse – Kontaktmenü Menübefehl Aktiv Kontur

Bei Rollover Status ändern wir nur noch die Textfarbe auf schwarz (#000000) und zusätzlich den Hintergrund auf transparent.

Fehlt am Schluss noch der Status „Maustaste gedrückt“, den wir so wie vorhin einfach entfernen.

Schon ist unsere Navigation fertig gestaltet.

 

Was hast du in dieser Lektion gelernt?

Du hast gesehen, welche verschachtelten Elemente es für das Muse Menü gibt und worauf man dabei beim Formatieren achten muss. Weiters hast du die verschiedenen Status Zustände kennen gelernt. Im nächsten Schritt haben wir das Design der einzelnen Zustände geändert.

Damit solltest du in der Lage sein deine Navigation nach deinen Vorstellungen einzufügen und zu gestalten.

 

Was kommt das nächste mal?

Wir bleiben noch ein wenig beim Thema Design und werden uns mit fortgeschrittener Text Formatierung im speziellen der Absatz und Zeichenformate widmen. Diese Formatierungshilfen unterstützen uns einfach über die komplette Website eine konsistente Formatierung zu erreichen.

Comments

    • Vielen Dank für die Rückmeldung.

      Ja in der Tat, ist das ein Thema, das interessant und in letzter Zeit immer wieder gefragt wurde.

      Ich werde mich dem Thema der mobilen Menüs in einer Sonderlektion widmen.

      Liebe Grüße
      Andreas

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.