Hinzufügen und Gestalten von Menü-Widgets in Adobe Muse

Öffnen Sie die Widgets-Bibliothek, während die Musterseite zur Bearbeitung in der Ansicht Entwurf geöffnet ist. Wenn sie noch nicht geöffnet ist, wählen Sie „Fenster“ > „Widgets-Bibliothek“ aus.

Klicken Sie im Widgets-Bibliothek-Bedienfeld auf „Menüs“, um die Liste der Menü-Widgets zu erweitern. Wählen Sie in Abhängigkeit vom Design Ihrer Site und der gewünschten Menüplatzierung eine der folgenden Optionen:

• Horizontal zum Hinzufügen eines horizontalen Menüs.
• Vertikal zum Hinzufügen eines vertikalen Menüs.

Verwenden Sie das Auswahlwerkzeug, um das Widget zu ziehen und an der gewünschten Stelle in Ihrem Layout abzulegen. Sie können zum Beispiel ein horizontales Menü-Widget im Kopfbereich platzieren.

Im Menü werden automatisch die Namen der Seiten angezeigt, die Sie erstellt haben, und zwar in derselben Reihenfolge, in der sie in der Sitemap erscheinen. Die Menübeschriftungen werden automatisch mit den Seiten verknüpft und sind dynamisch. Das heißt, dass bei einer späteren Umbenennung oder Verschiebung von Seiten das Menü automatisch aktualisiert wird. Die Links funktionieren weiterhin wie erwartet.

Klicken Sie auf den Farbwähler im Steuerungsbedienfeld und legen Sie die Farbe für das Menü fest. Verwenden Sie dann das Feld Textgröße, um die Textgröße für den Text im Menü festzulegen.

Wählen Sie das Menü-Widget aus und klicken auf den blauen Pfeil in der oberen rechten Ecke des Widgets. Das System zeigt das Bedienfeld Optionen an.

Konfigurieren Sie das Menü-Widget mithilfe des Bedienfelds „Optionen“. Hier können Sie folgende Optionen einstellen:

• Menütyp: Gibt an, welche Seiten in die Site-Navigation aufgenommen werden sollen. Wählen Sie „Top-Seiten“ aus, um nur die Seiten der ersten Ebene oder übergeordneten Seiten aufzunehmen. Wählen Sie „Alle Seiten“ aus, um die Unterseiten in die Navigation aufzunehmen. Die untergeordneten Seiten werden als Untermenüs angelegt. Wählen Sie „Manuell“, um die Seiten, die im Menü-Widget angezeigt werden sollen, manuell auszuwählen.
• Richtung: Geben Sie an, ob Sie das Menü horizontal oder vertikal hinzufügen möchten. 
• Gemeinsam bearbeiten: Aktivieren Sie dieses Kontrollkästchen, wenn Sie alle Menüelemente gemeinsam aktualisieren möchten. Dieses Kontrollkästchen ist standardmäßig aktiviert. Wenn Sie dieses Kontrollkästchen nicht aktivieren, werden die Konfigurationen, die Sie wählen, nur für das ausgewählte Menüelement angewendet.
• Objektgröße: Geben Sie an, ob die Menüelemente gleichmäßig nach Breite oder nach Größe verteilt werden sollen.
• Linkes Symbol einblenden: Dieses Kontrollkästchen ist standardmäßig nicht ausgewählt. Wählen Sie diese Option aus, wenn Sie ein Symbol in der linken Ecke der einzelnen Menüelemente einfügen möchten.
• Beschriftung anzeigen: Dieses Kontrollkästchen ist standardmäßig aktiviert. Wenn Sie dieses Kontrollkästchen deaktivieren, werden die Menübeschriftungen nicht mehr angezeigt.
• Rechtes Symbol einblenden: Wählen Sie „Aus“, wenn Sie Symbole auf der rechten Seite deaktivieren möchten. Wählen Sie Ein, wenn Sie Symbole in der rechten Ecke der Menüelemente konfigurieren möchten. Das rechte Symbol ist eine nützliche Option, wenn Sie Pfeile hinzufügen möchten, um zu zeigen, dass Untermenüs für ein Menüelement vorhanden sind. Sie können auch die Option Nur Untermenüs wählen, damit nur dann ein Symbol rechts konfiguriert wird, wenn es bei einem Menüelement Untermenüs gibt.
• Teileposition: Gibt den Ausgangspunkt für die internen Teile der einzelnen Tabs an.

Doppelklicken Sie auf die Menübeschriftung, die bearbeitet werden soll, und wählen Sie sie aus.

Öffnen Sie das Bedienfeld Text (Fenster > Text), um den Text im Menüelement zu bearbeiten. Verwenden Sie das Bedienfeld Text (die Beschriftung muss ausgewählt sein), um den Text zu formatieren. Wählen Sie hierzu folgende Optionen:

• Schrift: Wählen Sie die Schrift aus, die Sie auf die Menübeschriftung anwenden möchten.
• Schriftschnitt: Wählen Sie bei Bedarf entweder „Kursiv“ oder „Fett“ für die Menübeschriftung aus.
• Größe: Wählen Sie die Schriftgröße für das Menüelement.
• Farbe: Wählen Sie die Farbe entweder im Drop-down-Feld „Farbe“ oder durch Eingabe des Hex-Codes der Farbe, die angewendet werden soll. Alternativ können Sie die gewünschte Farbe auch mithilfe der Pipette wählen.
  

Verwenden Sie das Bedienfeld „Text“, um die Randwerte für Ihre Menübeschriftung zu konfigurieren. Wenn Sie bereits über ein Hyperlink-Format verfügen, das Sie auf die Menübeschriftung anwenden möchten, wählen Sie das Format im Drop-down-Feld neben abc aus.

Wählen Sie zum Anwenden eines Absatzformats das Format im Drop-down-Feld Absatzformat im Bedienfeld Text aus.

Um Füllungen und Konturen auf die Menübeschriftungen anzuwenden, doppelklicken Sie auf die Menübeschriftung, um sie auszuwählen. Wählen Sie in der Symbolleiste oben auf der Seite die Farbe für Füllung und Kontur aus. 

Sie können auch die Konturstärke bearbeiten und den Eckenradius für Menübeschriftungen in der Symbolleiste einstellen.

Wählen Sie mit dem Auswahlwerkzeug die Menübeschriftung aus, für die Sie den Rollover-Status erstellen möchten. Öffnen Sie das Bedienfeld Status. Beachten Sie, dass die Standardstatus der Schaltfläche bereits definiert sind. Klicken Sie auf die Rollover-Miniatur im Statusbedienfeld, um diesen Status zu bearbeiten.

Verwenden Sie bei ausgewählter Menübeschriftung den Farbwähler für die Füllung und wählen Sie keine Füllung (transparent) aus, indem Sie das weiße Farbfeld mit der roten diagonalen Linie anklicken.

Klicken Sie auf das Textwerkzeug und verwenden Sie den Farbwähler im Steuerungsbedienfeld, um eine cremefarbene Farbe für den Rollover-Status auszuwählen.

Wählen Sie im Statusbedienfeld den Status „Maustaste gedrückt“ aus. Legen Sie bei ausgewähltem Textwerkzeug für den Maustaste-gedrückt-Text eine dunklere Farbe fest, indem Sie im Steuerungsbedienfeld das gewünschte Farbfeld im Farbwähler auswählen.

Wählen Sie im Statusbedienfeld den Status „Aktiv“ aus. Klicken Sie im Steuerungsbedienfeld auf den Link „Fläche“, um das Menü „Fläche“ zu öffnen.

Klicken Sie im Menü Füllung auf den Farbwähler und legen Sie für die Füllfarbe Ohne fest. Klicken Sie auf das Ordnersymbol neben dem Abschnitt „Bild“. Navigieren Sie im daraufhin angezeigten Dialogfeld „Importieren“ zur Hintergrundbild-Datei mit dem Namen „top-nav-over.png“. Klicken Sie auf „Auswählen“, um sie auszuwählen. Das Dialogfeld „Importieren“ wird automatisch geschlossen.

Überprüfen Sie im Menü „Fläche“, dass die Option „Anpassen“ auf „Originalgröße“ festgelegt ist. Klicken Sie anschließend im Bereich „Position“ auf den mittleren der neun Punkte. Dadurch wird die Hintergrundbild-Füllung in mittlerer Position, ohne Füllfarbe und in Originalgröße angezeigt. Klicken Sie an eine andere Stelle, um das Menü „Fläche“ zu schließen.

Da die Standardoption Gemeinsam bearbeiten im horizontalen Menü-Widget aktiviert ist, wurden alle Änderungen, die Sie an der Menübeschriftung vorgenommen haben, automatisch auf alle Buttons in der Navigationsleiste angewendet.

Wählen Sie „Datei“ > „Speichern“, um Ihre Arbeit zu speichern. Klicken Sie auf das „X“ in der Registerkarte „A-Musterseite“, um die Seite in der Entwurfsansicht zu schließen und zur Planungsansicht zurückzukehren. Beachten Sie, dass alle Seitenminiaturbilder aktualisiert werden und den Inhalt einschließen, der auf der Musterseite eingefügt wurde.

Gehen Sie zur Planungsansicht in Adobe Muse, wenn Sie bereits eine Sitemap für Ihre Site erstellt haben. Nehmen wir für dieses Verfahren an, dass Sie über eine Sitemap mit den Seiten „Home“, „Portfolio“, „My Story“, „Contact“ und „Products“ verfügen.

Wenn Sie zur Musterseite gehen und ein Menü-Widget ziehen, sehen Sie, dass alle Seiten in das Menü integriert werden.

Um eine bestimmte Seite auszuschließen, klicken Sie in der Planungsansicht mit der rechten Maustaste auf die Seite, die Sie ausschließen möchten. Klicken Sie auf im Menüoptionen > Seiten aus Menüs ausschließen.

Wenn Sie zum Beispiel die Seite „Products“ ausschließen möchten, klicken Sie mit der rechten Maustaste auf „Products“. Wählen Sie dann „Menüoptionen“ > „Seiten aus Menüs ausschließen“.

Wenn Sie jetzt zur Musterseite zurückkehren, um Ihr Menü anzuzeigen, sehen Sie, dass die Seite „Products“ aus dem Menü-Widget entfernt wurde.

In Szenarien, in denen ein bestimmter Menüpunkt ohne Link angezeigt werden soll, klicken Sie in der Planungsansicht mit der rechten Maustaste auf die spezifische Seite. Wählen Sie Menüoptionen > Seite ohne Hyperlink einbeziehen.

Diese Option eignet sich in verschiedenen Fällen, wenn Sie eine Website erstellen. Wenn Sie beispielsweise über eine Rollover-Seite „Products“ verfügen, auf der Site-Besucher nur auf Produktkategorien und nicht auf die Hauptbeschriftung „Products“ klicken sollen, können Sie dies Option verwenden.