Verwenden von Bildern mit dem Menüsteuerelement
Aktualisiert: November 2007
Mithilfe von Bildern können zusätzlich verfügbare, untergeordnete Menüelemente angezeigt werden, wenn mit dem Mauszeiger auf einen Menüeintrag gezeigt wird. Weiterhin können Bilder zum Unterscheiden von statischen und dynamischen Menüelementen oder als Hintergrund für das ganze Menü bzw. für eine Ebene von Menüelementen verwendet werden.
Mithilfe von Cascading Stylesheets (CSS) und den Eigenschaften des Menu-Steuerelements können Sie festlegen, welche Bilder verwendet und wie diese angezeigt werden sollen.
Verwenden der standardmäßigen Popoutbilder
Sie können die Bilder, die als Hinweis auf untergeordnete, beim ersten Anzeigen des Menu-Steuerelements nicht angezeigte Menüelemente verwendet werden, mithilfe einer oder beiden der folgenden Eigenschaften festlegen. Um das Standardbild für den Hinweis zu verwenden, dass ein statisches Menüelement über untergeordnete Elemente verfügt, legen Sie die StaticEnableDefaultPopOutImage-Eigenschaft auf true fest. Um das Standardbild für dynamische Menüelemente mit untergeordneten Elementen zu verwenden, legen Sie die DynamicEnableDefaultPopOutImage-Eigenschaft auf true fest. Wenn Sie für eine oder beide dieser Eigenschaften den Wert auf false festlegen, wird das standardmäßige schwarze Pfeilsymbol für alle Menüelemente mit untergeordneten Elementen ausgeblendet.
Im folgenden Beispiel wird für beide Werte true festgelegt, sodass für alle statischen und dynamischen Menüelemente mit untergeordneten Elementen der standardmäßige schwarze Pfeil angezeigt wird.
<asp:Menu ID="Menu1"
StaticEnableDefaultPopOutImage="true"
DynamicEnableDefaultPopOutImage="true">
Festlegen benutzerdefinierter Hinweissymbole
Um benutzerdefinierte Bildern als Hinweissymbole zu verwenden, legen Sie Werte für die StaticPopOutImageUrl-Eigenschaft und die DynamicPopOutImageUrl-Eigenschaft fest. In jeder dieser Eigenschaften wird ein Dateispeicherort und -name für das zu verwendende Bild angegeben. Die StaticPopOutImageUrl-Eigenschaft legt das Bild für statische Menüelemente und die DynamicPopOutImageUrl-Eigenschaft das Bild für dynamische Menüelemente fest.
Im folgenden Beispiel wird sowohl für das statische als auch das dynamische Hinweissymbol das Bild Greenarrow.gif im Verzeichnis Images festgelegt.
<asp:Menu ID="Menu1" Runat="server"
StaticPopOutImageUrl="~/images/greenarrow.gif"
DynamicPopOutImageUrl="~/images/greenarrow.gif">
Festlegen von Trennbildern
Menüelemente auf der gleichen Ebene können mithilfe von Trennbildern voneinander getrennt werden. Sie können Trennbilder festlegen, die über und unter Menüelementen einer bestimmten Ebene oder auf allen Ebenen von statischen bzw. dynamischen Menüs angezeigt werden. Trennbilder werden durch vier Eigenschaften festgelegt. Je zwei Eigenschaften legen die oberen und unteren Trennbilder für statische bzw. dynamische Menüelemente fest:
Im folgenden Beispiel wird festgelegt, dass das Bild Greenseparator.gif unter allen statischen Menüelementen angezeigt wird.
<asp:Menu ID="Menu2" Runat="server"
StaticBottomSeparatorImageUrl="~/greenseparator.gif">
Festlegen von Bildern für Bildlaufleisten
Wenn Sie eine große Anzahl von Menüelementen festlegen, wird das Popupfenster zum Anzeigen der dynamischen Menüelemente möglicherweise nicht ausreichend zum Anzeigen aller Menüelemente erweitert. Mit dem Menu-Steuerelement werden automatisch Bildlaufleisten erstellt, damit Benutzer einen Bildlauf durch die Liste der Menüelemente durchführen können. Mithilfe der ScrollDownImageUrl-Eigenschaft und der ScrollUpImageUrl-Eigenschaft können Sie den nach-oben- und nach-unten-Symbolen der Bildlaufleiste benutzerdefinierte Pfeile oder andere Bilder zuweisen.
Im folgenden Beispiel wird dargestellt, wie Sie mit diesen beiden Eigenschaften benutzerdefinierte Bilder für die Pfeile der Bildlaufleiste festlegen.
<asp:Menu ID="Menu1" Runat="server"
ScrollUpImageUrl="~/images/greenuparrow.gif"
ScrollDownImageUrl="~/images/greenuparrow.gif"
Angeben der Bildgröße in CSS
Die Verfahren zum Verwenden von Bildern können erhebliche Auswirkungen auf deren Anzeige in einem Menu-Steuerelement haben. Wenn beispielsweise eine Seite zum ersten Mal angezeigt wird, und die für das Menu-Steuerelement verwendeten Bilder noch nicht vom Browser zwischengespeichert wurden, können diese Bilder flimmern oder "springen", bis die Bildgröße vom Browser ermittelt wird. Sie können dies verhindern, indem Sie die Größe der im Menu-Steuerelement verwendeten Bilder in einem Cascading Stylesheet (CSS) angeben.
Wenn ein Bild für ein Menüelement verwendet wird, weisen Sie zunächst mithilfe des Bilds im HTML-Markup der WebControl.CssClass-Eigenschaft einen Klassennamen zu. Anschließend können Sie die Bildgröße im CSS angeben. Im folgenden Beispiel wird der StaticMenuItemStyle-Eigenschaft und der DynamicMenuItemStyle-Eigenschaft der Klassenname "menuitem" zugewiesen.
<StaticMenuItemStyle CssClass="menuitem" />
<DynamicMenuItemStyle CssClass="menuitem" />
Anschließend geben Sie in einer CSS-Datei, auf die die Seite mit dem Menü verweist, einen Verweis auf die CSS-Klasse des Menüelements an und legen die Bildgröße fest.
Im folgenden Beispiel wird auf die CSS-Klasse "menuitem" verwiesen und angegeben, dass ein 40-Pixel-mal-40-Pixel großes Bild als Hinweis auf untergeordnete Elemente in einem Menüelement verwendet wird.
.menuitem {} /*Style code for each menu item goes here. */
.menuitem img
{
width: 40px;
height: 40px;
}
Siehe auch
Aufgaben
Exemplarische Vorgehensweise: Anzeigen eines Menüs auf Webseiten
Exemplarische Vorgehensweise: Programmgesteuertes Kontrollieren von ASP.NET-Menüs
Konzepte
ASP.NET-Webserversteuerelemente und CSS-Formatvorlagen
Übersicht über das Menü-Steuerelement