Erstellen von Menüleisten mit Spry
Wenn der Mauszeiger über eine Menüleiste bewegt wird, wird ein Untermenü angezeigt. Menüleisten ermöglichen den Zugriff auf viele Menüoptionen über ein sauberes, übersichtliches Hauptmenü. Die Interaktivität, die sie bieten, wenn ein Besucher den Mauszeiger über eine Menüoption bewegt, fügt einer Webseite ein dynamisches Element hinzu.
Menüleisten-Widgets können horizontal oder vertikal sein:
- Vertikale Menüleisten werden normalerweise in Rahmen, Tabellenspalten oder anderen Layoutobjekten (z. B. einem DIV oder einem AP-DIV) auf der linken Seite der Seite ausgerichtet.
- Horizontale Menüleisten werden normalerweise am oberen Rand der Seite ausgerichtet und können dort platziert werden, ohne in ein Layoutobjekt eingefügt zu werden.
Mit dem Spry Widget zum Einfügen von Menüleisten-Widgets können Sie Menüleisten mit zwei Ebenen von Untermenüs generieren. Daher kann ein Benutzer auf eine Menüoption klicken, ein Untermenü mit einem neuen Satz von Optionen sehen, eine dieser Optionen auswählen und aus einem zweiten Untermenü auswählen.
Gehen Sie folgendermaßen vor, um ein Menüleisten-Widget zu generieren:
- Speichern Sie die Seite, in die das Widget eingefügt werden soll.
- Wählen Sie Einfügen > Spry > Spry Menüleiste. Wenn das Dialogfeld Spry-Menüleiste angezeigt wird, wählen Sie horizontales oder vertikales Format.
- Nachdem Sie ein Menüleisten-Widget generiert haben, können Sie im Eigenschafteninspektor einige grundlegende Menüleisteneigenschaften definieren. Wählen Sie Menüpunkte oder Untermenüpunkte auf der linken Seite des Eigenschafteninspektors; Ändern Sie sie dann nach Belieben (siehe Abbildung 4):
- Geben Sie im Textfeld den Text ein, der im Menü angezeigt wird.
- Geben Sie im Feld Link den Link ein, der geöffnet wird, wenn das Element angeklickt wird.
- Geben Sie im Feld Titel den Eingabehilfetext ein, der im Browserfenster angezeigt wird, wenn ein Benutzer den Mauszeiger über eine Menüoption bewegt.
- Lassen Sie das Zielfeld leer, um den Link im selben Browserfenster zu öffnen, oder geben Sie _blank ein, um den Link in einem neuen Browserfenster zu öffnen.
- Verwenden Sie die Schaltflächen Plus (+) und Minus (-) über den Spalten Menü oder Untermenü (Oderuntermenü), um neue Menüelemente hinzuzufügen oder zu löschen. Verwenden Sie die Schaltflächen Element nach oben und Element nach unten verschieben, um die Reihenfolge der Menüelemente zu ändern.
Abbildung 4 Definieren der Menüleistenoptionen im Eigenschafteninspektor.
Wenn Sie ein Menüleisten-Widget erstellen oder auswählen, wird im Eigenschafteninspektor eine Schaltfläche zum Deaktivieren der Stile angezeigt. Das Deaktivieren von Stilen hat keinen Einfluss darauf, wie der Stil in einem Browser gerendert wird, sondern deaktiviert die Formatierung im Dokumentfenster. Sie können die Formatierung verschiedener Menüleisteneigenschaften einer ausgewählten Menüleiste mithilfe des Bedienfelds CSS-Stile anpassen.
Jede Menüleiste generiert mindestens ein Dutzend CSS-Stile. Die meisten dieser CSSstyles definieren die Positionierung und Größe der Menüs und Untermenüs, die angezeigt werden, wenn ein Benutzer den Mauszeiger über eine Menüoption bewegt. Die Standardpositionierung dieser Menüs ist normalerweise in Ordnung und muss nicht angepasst werden. Sie cancreate eine kundengebundene Menüleiste, indem Sie Ihre eigenen Verbindungen und Text definieren und ihm adistinctive Format geben, indem Sie Text und Hintergrundfarben besonders anfertigen.
Einige der CSS-Stiloptionen steuern relativ unauffällige Elemente der Menüleiste, aber alle können im CSS-Stilfenster bearbeitet werden. Um die Stile zu bearbeiten, die einem Menüleisten-Widget zugeordnet sind, erweitern Sie SpryMenuBarHorizontal, um eine Liste der Klassenstile anzuzeigen, die diesem Stylesheet zugeordnet sind. Wenn Sie einen dieser Klassenstile im oberen Teil des Bedienfelds CSS-Stile auswählen, können Sie die Eigenschaften für diesen Stil in der unteren Hälfte des Bedienfelds CSS-Stile bearbeiten.
Um die Hintergrund- oder Textfarbe für die Menüleiste zu ändern, wählen Sie styleul.MenuBarHorizontal a (für eine vertikale Menüleiste, ul.MenuBarVertical a). Wenn der Stil im Bedienfeld CSS-Stile ausgewählt ist, verwenden Sie das Feld Hintergrundfarbfeld in der unteren Hälfte des Bedienfelds CSS-Stile, um eine neue Hintergrundfarbe auszuwählen, und verwenden Sie das Farbfeld, um die Schriftfarbe zu ändern (siehe Abbildung 5).
Abbildung 5 Ändern der Textfarbe für eine Menüleiste.
Eine weitere Option besteht darin, die Hintergrund- und Textfarbe einer überhorizontalen Menüoption mit der Maus zu ändern, indem Sie diese Elemente verwenden:
- ul.MenuBarHorizontal a.MenuBarItemHover
- ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
- ul.MenuBarHorizontal a.MenuBarSubmenuVisible
Der Stil für vertikale Menüleisten ist ähnlich, jedoch mit Vertical anstelle vonhorizontal im Stilnamen.
Wie Sie sehen, bieten Spry-Menüleisten viele, viele anpassbare Elemente. Experimentieren Sie für die besten Ergebnisse. Im Wesentlichen bearbeiten Sie den Inhalt von Menüleisten entweder im Eigenschafteninspektor oder indem Sie einen der zahlreichen generierten CSS-Stile auswählen und im CSS-Stylespanel bearbeiten.
Okay, du bist jetzt auf dich allein gestellt! Viel Spaß mit diesen und anderen Sprywidgets. Und denken Sie daran, in Kontakt zu bleiben und mich wissen zu lassen, wie sie auf Ihren Websites arbeiten.