Muse Kompakt Kurs – Lektion 7 – Widgets und Menü

Ein wesentlicher und wichtiger Bestandteil einer Website ist die Navigation bzw. das Menü. Genau diesem Thema werden wir uns heute widmen. Dazu werden wir uns vorher die Widgets von Muse ansehen, da das Menü mittels dieser Widgets eingefügt wird.

Wir werden sehen, wie Muse die Menüs automatisch erzeugt, wo und wie wir es am besten einfügen und wie wir die Einträge anpassen können.

 

Das Widget Bedienfeld

Du kennst ja bereits die Bedienfelder in Muse. Einige davon haben wir uns ja bereits in den vergangenen Lektionen angesehen.

Um in Muse ein Menü einzufügen, verwenden wir am besten das Menü-Widget. Die Widgets befinden sich im Bedienfeld „Widgets-Bibliothek“, die wir uns jetzt etwas näher ansehen werden. Klappt man das Bedienfeld auf, dann gibt es einige Kategorien. Für heute öffnen wir die Kategorie „Menüs“.

Muse - Bedienfeld Widgets Bibliothek

Muse – Bedienfeld Widgets Bibliothek

 

Menü Widget

Wenn das Menü Widget geöffnet ist, hat man die Auswahl zwei verschiedene Widgets einzufügen. Es gibt hier ein horizontales und ein vertikales Menü. Das bedeutet, du kannst hier entscheiden, ob deine Menüpunkte nebeneinander oder untereinander dargestellt werden solle. Aber keine Sorge, wenn du später draufkommst, dass zu deinem Design besser die andere Variante passt, dann kann man das über die Einstellungen des Menüs ändern.

Muse - Menü Widget

Muse – Menü Widget

 

Horizontales Menü einfügen

Um das Menü einzufügen, müssen wir uns die passende Seite aussuchen. Wir könnten jetzt das Menü auf jeder unserer Seiten einfügen. Das wäre aber auf der einen Seite sehr aufwendig, vor allem dann wenn wir viele Seiten haben und auch unpraktisch, wenn wir etwas ändern oder designen wollen. Hätten wir das auf jeder Seite, dann müssten wir auch in diesen Fällen jede Seite erneut angreifen.

In der letzen Lektion, haben wir uns ja die Musterseiten angesehen und genau in diese Musterseite gehört auch das Menü.

Ich öffne einmal meine Musterseite, wo bereits das Logo eingefügt wurde und ziehe ein horizontales Menü mittels Drag & Drop in meine Seite.

Muse - Horizontales Menü einfügen

Muse – Horizontales Menü einfügen

Wenn wir die Maustaste loslassen, dann befindet sich das Menü auf unserer Seite und wir können es jetzt noch an die passende Position schieben. Wie man am Bild unten gut erkennen kann, wurde das Menü automatisch mit meinen bereits vorhandenen Seiten erstellt. Würde man weitere Seiten hinzufügen oder Seiten entfernen, dann wird das Menü automatisch verändert.

 

Menü-Eigenschaften ändern

Wenn wir unser Menü ausgewählt haben, dann erkennen wir im rechten unteren Eck ein kleines blaues Symbol mit einem Pfeil. Dieses Symbol, gibt es übrigens bei den meisten Widgets und es deutet darauf hin, dass sich dahinter noch einige weitere Eigenschaften befinden.

Klicken wir also einmal drauf uns sehen, was passiert.

Muse - Menü Eigenschaften Button

Muse – Menü Eigenschaften Button

Es öffnet sich das Eigenschaften (oder auch Optionen) Fenster, wo es einige Einstellungen zu unserem Menü gibt. Sehen wir uns diese nun etwas genauer an.

Muse - Menü Eigenschaften

Muse – Menü Eigenschaften

 

Eigenschaften – Menütyp (1):

Mit dieser Einstellung, kann man angeben, welche Menüpunkte man dargestellt haben möchte. Standard ist die oberste Ebene eingestellt. Das bedeutet, wenn Untermenüpunkte vorhanden sind, dass diese dann nicht dargestellt werden. Ändert man die Einstellung auf „Alle Seiten“, dann werden auch die Untermenüpunkte dargestellt.

Muse - Menü Eigenschaften Menütyp

Muse – Menü Eigenschaften Menütyp

Als Beispiel, habe ich in meinem Projekt bei der Produkt Seite zwei weitere Unterseiten – wie hier in der Planungsansicht zu sehen ist.

Muse - Planungsansicht Unterseiten

Muse – Planungsansicht Unterseiten

Ändern wir den Menütyp jetzt auf „Alle Seiten“, dann sieht man das auch in der Darstellung des Menüs.

Muse - Untermenü - eine Ebene

Muse – Untermenü – eine Ebene

Technische gesehen, kann man das sehr weit treiben. Ich habe einmal zum Probieren unterhalb der Hauptebene fünf weitere Ebenen eingefügt und das in der Vorschau ausprobiert. Die Untermenüs werden rechts vom Menüpunkt weiter aufgeklappt. Wie man am Beispiel sehen kann, haben wir vom Design ein Problem nach der vierten Ebene. Für den Menüpunkt der fünften Ebene ist rechts kein Platz mehr.

Muse - Untermenü - mehrere Ebenen

Muse – Untermenü – mehrere Ebenen

Was am Desktop Design schon recht problematisch wird, ist bei mobilen Designs noch viel schlimmer. Ich rate daher, bei Anzeige von allen Menüebenen, die Ebenentiefe eher geringer zu halten. Leider ist es bei Muse nicht möglich die Anzahl der Ebenen einzuschränken oder erst bei einer bestimmten Ebene zu beginnen. Vielleicht ändert das Adobe ja in künftigen Versionen.

 

Eigenschaften – Richtung (2):

Gibt an, ob die Menüpunkte nebeneinander oder untereinander angeordnet werden. Wenn diese Eigenschaft hier umgestellt wird, ist das selbe, wie wenn man aus der Widget-Bibliothek „Menü -> Vertikal“ auswählt. Man kann also nach dem Einfügen die Art jederzeit verändern.

 

Eigenschaften – Gemeinsam Bearbeiten (3):

Ist diese Checkbox gesetzt dann werden bei Änderung des Aussehens von einem Menüpunkt alle anderen Menüpunkte genauso verändert. Ist die Checkbox nicht aktiv, dann kann man jeden einzelnen Menüpunkt getrennt designen. Wie die Menüpunkte gestaltet werden können, werden wir uns im Detail in der nächsten Lektion ansehen.

 

Eigenschaften: Objektgröße (4):

Bei der Eigenschaft Objektgröße, gibt es zwei Auswahlmöglichkeiten. Die Standardeinstellung „Gleichmässige Größe“ und dann noch „Gleichmässiger Abstand“. Bei der ersten Variante, sind alle Menüpunkte gleich breit, bei der zweiten Variante, passen sich die Menüpunkte dem Text in der Breite an. Der Abstand zwischen den einzelnen Punkten ist damit immer gleich groß. Wie groß dieser ist, lässt sich beim Gestalten noch verändern.

Muse - Menü Eigenschaften Objektgröße

Muse – Menü Eigenschaften Objektgröße

 

Eigenschaften: Teile (5):

Unter dem Punkt Teile gibt es einige Einstellungen, die dazu dienen um Symbole anzuzeigen. „Linkes Symbol einblenden“, gibt die Möglichkeit links vom Menüpunkt ein kleines Icon anzuzeigen:

Muse - Menü Eigenschaften Teile

Muse – Menü Eigenschaften Teile

 

Das rechte Symbol betrifft entweder den Pfeil für die Untermenüs oder ebenfalls eigene Symbole. Möchte ich den Text komplett ausblenden, dann kann man die Checkbox bei „Beschriftung einblenden“ weglassen.

Die Teileposition ganz unten dient dazu, um die Inhalte innerhalb der Menübox anzuordnen.

 

Seiten aus Menü ausschliessen

Manchmal, kann es vorkommen, dass man einzelne Seiten aus dem Menü ausschliessen will, zum Beispiel die Bezeichnung Home. Dafür können wir dann das Logo mit der Startseite verbinden.

Um einen Menüpunkt auszuschliessen, gehen wir auf die Planungsansicht und klicken mit der rechten Maustaste auf die auszuschliessende Seite. Beim diesem Menü, gibt es einen Eintrag „Menüoption“ und dahinter drei Auswahlmöglichkeiten. Wählen wir hier „Seite aus Menüs ausschliessen“, dann wir dieser Eintrag im Menü entfernt.

Muse - Seite ausschließen

Muse – Seite ausschließen

Wechseln wir jetzt auf eine unserer Seiten, in meinem Beispiel auf die Produkt Seite, dann sehen wir, dass der Eintrag „Homepage“ verschwunden ist. Die Namen der Menüeinträge ergeben sich übrigens aus den Seitennamen in der Planungsansicht. Möchte ich also den Text eines Eintrages verändern, dann geht das in der Planungsansicht.

Muse - Seite ausgeschlossen

Muse – Seite ausgeschlossen

 

Manuelles Menü

Hin und wieder kommt es auch vor, dass man bestimmte Seiten nicht im Hauptmenü darstellen, sondern als eigenes Menü auf der Seite platzieren will. Ein Beispiel dafür wäre der Impressum Link, der nicht zu prominent zu sehen sein muss.

Dazu habe ich in meinem Beispiel eine Seite Impressum hinzugefügt und diese, sowie wie vorhin die Homepage vom Menü ausgeschlossen.

Jetzt füge ich auf der Seite ein weiteres Menü ein und ändere den Menütyp auf „manuell“

Jetzt besteht das Menü aus einem Eintrag mit der Bezeichnung [Name]. So wie auch vorhin, wird bei einmal anklicken das gesamte Menü markiert. Zu erkennen ist das Links oben an der Bezeichnung „Menü“.

Muse - manuelles Menü - Menüauswahl

Muse – manuelles Menü – Menüauswahl

Klickt man ein weiteres mal auf den Menüpunkt, dann ist dieser ausgewählt. Das ist links oben an der Bezeichnung „Menübefehl“ erkennbar. Auch das Menü selbst ändert sich jetzt, denn ich habe links, rechts und unten Plus Symbole verfügbar um weitere Seiten hinzuzufügen.

Muse - manuelles Menü - Menübefehlauswahl

Muse – manuelles Menü – Menübefehlauswahl

Ist so wie jetzt ein Menüpunkt ausgewählt, dann gibt es oben bei den Eigenschaften die Möglichkeit Hyperlinks einzufügen. Klappt man das Drop Down Menü auf, dann kann man in der Liste alle Seiten des aktuellen Projektes sehen. Um das Impressum in das Menü einzufügen, wählen wir es einfach aus.

Muse - manuelles Menü - Link

Muse – manuelles Menü – Link

Das Menü ist jetzt verlinkt, allerdings hat sich der Name nicht automatisch verändert. Das muss / kann man bei manuellen Menü selbst machen. Einfach eine Doppelklick auf die Bezeichnung und schon kann der Text verändert werden. Fertig sieht das dann so aus.

Muse - manuelles Menü - Name

Muse – manuelles Menü – Name

Wie auch das Hauptmenü Menü, sehen wir uns in der nächsten Lektion an, wie man das Design verändern kann.

 

Die verschiedenen Status Darstellungen

Zum Schluss machen wir noch eine Vorschau der Seite um die Funktion unseres Menüs zu prüfen.

Es ist möglich die einzelnen Seiten mittels des Menüs aufzurufen. Was wir jetzt beim Wechseln der Seiten erkennen können, ist dass die aktive Seite immer einen dunkleren Hintergrund besitzt. Damit kann der User schnell erkennen, wo er sich auf unserer Seite befindet. Fährt man mit der Maus über einen der Menüpunkt, so ändert sich ebenfalls die Hintergrundfarbe. Standard ist dabei das selbe grau, wie bei einer aktiven Seite eingestellt. Aber auch das lässt sich beim Gestalten noch verändern.

Muse - Menü Status Darstellungen

Muse – Menü Status Darstellungen

Man kann damit erkennen, wie viel Arbeit einem Muse abnimmt und wieviele Funktionen bereitgestellt werden

 

Was ich mir noch wünschen würde.

Die Menüfunktion in Muse ist schon sehr umfangreich und bietet fast alles an, was man sich wünscht. Dennoch, gibt es einige Dinge, die ich mir dringend wünschen würde, damit das Arbeiten noch effizienter wird.

Mobiles Menü (z.B. Hamburger Menü – das mit den 3 waagrechten Strichen)

Derzeit gibt es leider keine einfache Möglichkeit ein mobiles Menü zu gestalten. Dafür sind einige Tricks notwendig

Bereich der anzuzeigenden Ebenen bestimmen können.

Wie oben schon erwähnt, gibt es bei vielen Ebenen keine Möglichkeit die sichtbaren Ebenen anzugeben. Könnte man das machen, dann wäre zum Beispiel ein Teil des Menüs als horizontales Menü und darunter liegende Ebenen als vertikales Sidebar Menü zu verwenden.

 

Was ihr heute gelernt habt

Heute habt ihr einiges über die Menüs in Muse erfahren. Es sollte jetzt klar sein, die Menüs einzufügen sind und was man bei den Einstellungen vornehmen kann. Ebenso weisst du jetzt, wie man Seiten aus dem Menü ausschliessen kann und wie man ein individuelles Menü erstellt.

Schlussendlich kennst du auch die Grenzen und Schwachstellen des Menü Widgets, damit du diese in deinem Konzept und der Planung bereits berücksichtigen kannst.

 

Was kommt als nächstes mal

Das nächste mal, werden wir uns noch die umfangreichen Gestaltungsmöglichkeiten der Muse Menüs ansehen.

Schreibe einen Kommentar

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