Erfahren Sie, wie Sie Menüs für Ihre Adobe Muse-Site hinzufügen und konfigurieren können. Entdecken Sie, wie Sie mobile Menüs und Rollover-Status erstellen und Menübeschriftungen bearbeiten.

Hinweis:

Adobe Muse wird nicht mehr um neue Funktionen ergänzt und der Support wird am 26. März 2020 eingestellt. Detaillierte Informationen und Unterstützung erhalten Sie auf der Seite zum Ende der Produktlebensdauer von Adobe Muse.

Die Navigation ist einer der wichtigsten Aspekte beim Aufbau einer Website. Beim Entwickeln einer Website ist die Wahl der Art und die Platzierung der Navigation von entscheidender Bedeutung. Die Benutzerfreundlichkeit einer Website kann durch Menüs oder die Site-Navigation entweder verbessert oder zerstört werden.

Adobe Muse ermöglicht es Ihnen, mit Menü-Widgets schnell ein Site-Navigationssystem zu erstellen. Sie können zwar Links erstellen, um Seiten manuell zu verbinden, doch Menü-Widgets bieten Ihnen eine einfache und flexible Möglichkeit zum Hinzufügen
der Navigation auf Ihrer Site. Wie andere Widgets können Sie das Menü-Widget einfach auf Ihre Seite ziehen, um Menüs hinzuzufügen. Wenn Sie das tun, sehen Sie, dass die Menübeschriftungen, die ihrem Seitennamen entsprechen, automatisch ausgefüllt sind. Wenn Sie den Seitennamen in der Planungsansicht ändern, werden die Menübeschriftungen automatisch aktualisiert. 

Sie können sowohl vertikale als auch horizontale Menüs hinzufügen. Darüber hinaus können Sie in Adobe Muse Sandwich-Menüs und Rollover-Status für Menüelemente erstellen. Lesen Sie weiter und erfahren Sie, wie Sie das alles in Adobe Muse tun können.

 

Hinzufügen eines Menü-Widgets

  1. Ö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.

  2. 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.
    Auswahl des vertikalen oder horizontalen Menü-Widgets in Adobe Muse
    Auswahl des vertikalen oder horizontalen Menü-Widgets
  3. 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.

    Positionieren Sie das Menü-Widget über dem Hintergrundbild mit dem braunen Band in der Kopfzeile.
    Positionieren Sie das Menü-Widget über dem Hintergrundbild mit dem braunen Band in der Kopfzeile.

    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.

  4. 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.

    Auswählen der Schriftgröße und -farbe
    Legen Sie die Schriftfarbe und die Punktgröße fest, um die Text-Schaltflächen im Horizontales-Menü-Widget zu steuern.

Konfigurieren und Anpassen von Menü-Widgets

Nun, da Sie das Menü-Widget zu Ihrem Layout hinzugefügt haben, können Sie das Widget gemäß Ihren Anforderungen anpassen. Sie haben die Möglichkeit, Menüs mit dem Bedienfeld Optionen zu konfigurieren.  Das Optionenbedienfeld ist ein kontextsensitives Bedienfeld, in dem Sie Änderungen anwenden können, um spezifische Einstellungen für das jeweilige Widget zu aktualisieren. Verwenden Sie dieses Bedienfeld, um das Verhalten von Widgets und die Anzeige von Widget-Inhalten zu steuern.

  1. 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 des Menü-Widgets über das Bedienfeld „Optionen“
    Konfigurieren des Menü-Widgets über das Bedienfeld „Optionen“
  2. 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.
    Konfigurieren von Menü-Widgets mit dem Bedienfeld „Optionen“
    Konfigurieren von Menü-Widgets mit dem Bedienfeld „Optionen“

Bearbeiten und Gestalten von Menübeschriftungen

Im Nachfolgenden erfahren Sie, wie die Textbeschriftungen aktualisiert werden, die die Seitennamen in jedem Menüelement anzeigen. Gehen Wir von einem horizontalen Menu-Widget mit einem sehr einfachen Design mit einfachen Textverknüpfungen aus. Nehmen wir in diesem Beispiel an, dass dasselbe Schriftformat für alle Status verwendet wird.

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

  2. Ö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.
    Bearbeiten der Menübeschriftungen in Menü-Widgets
    Bearbeiten der Menübeschriftungen in Menü-Widgets
  3. 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.

  4. 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.

    Anwenden von Füllungen und Konturen auf Menübeschriftungen
    Anwenden von Füllungen und Konturen auf Menübeschriftungen

Erstellen von Rollover-Status für Menüelemente

  1. 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.

  2. 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.

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

  4. 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.

  5. 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.

  6. 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.

  7. Ü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.

    Definieren von Schaltflächenstatus
    Definieren Sie den aktiven Status des Menüelements.

    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.

  8. 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.

    Hinweis:

    Die Hilfslinien der Kopf- und Fußzeilenbereiche können nur auf den Musterseiten Ihrer Site bearbeitet werden. Wenn Sie die Größe der Kopf- oder Fußzeilen Ihrer Seiten bearbeiten möchten, doppelklicken Sie auf die Musterseite, um sie in der Entwurfsansicht zu öffnen und um dort die Hilfslinien neu zu positionieren.

Erstellen eines mobilen Menüs

Mit Adobe Muse haben Sie auch die Möglichkeit, ein Sandwich-Menü oder mobiles Menü zu erstellen. Wenn Sie diese Art von Menü erstellen, wird ein Drop-down-Untermenü angezeigt, wenn Sie über das Hauptmenü fahren. Informationen zum Erstellen dieser Art von Menü erhalten Sie unter Erstellen von Untermenüs mithilfe von Kompositions-Widgets.

Ausschließen von Seiten aus dem Menü

Jedes Mal, wenn Sie in der Planungsansicht eine neue Seite der obersten Ebene erstellen, fügt Adobe Muse die Seite automatisch zum Menü hinzu. Es kann jedoch vorkommen, dass Sie eine Seite zuerst testen möchten, bevor Sie sie für Besucher verfügbar machen, oder eine bestimmte Seite ausblenden möchten. In diesen Fällen haben Sie mit Adobe Muse die Möglichkeit, bestimmte Seiten aus der Navigation auszuschließen, um sicherzustellen, dass diese Seiten im Menü-Widget nicht als Menüelemente aufgeführt werden.

So können Sie Seiten aus dem Menü-Widget ausschließen:

  1. 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.

    Anzeigen der Sitemap in der Planungsansicht
    Anzeigen der Sitemap in der Planungsansicht

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

  2. 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“.

    Ausschließen spezifischer Seiten aus Menü-Widgets
    Ausschließen spezifischer Seiten aus Menü-Widgets

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

    Hinweis:

    Gehen Sie zum Löschen des gesamten Menüs zur Seite, auf der Sie das Menü-Widget hinzugefügt haben. Wählen Sie das Widget aus und drücken Sie Löschen.

    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.

Arbeiten mit Menü-Widgets

Arbeiten mit Menü-Widgets
In diesem Video, das von Brian Wood präsentiert wird, erfahren Sie, wie Sie ein Menü-Widget in Ihre Seite einfügen.
Adobe Press - Peachpit

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie