Das ASP.NET Menü Control erlaubt horizontale, vertikale, statische und dynamische Menüs für Web Seiten zu erstellen. Dieser Artikel widmet sich der Problematik von statischen Menüs. Diese sind meist oben in der Webseite als erste  Zeile vorhanden.

Die Frage die sich ursprünglich stellte, wie bekommt man ein | Symbol zwischen die Menüpunkte.
Punkt1 | Punkt2 | Punkt 3

Dies spart mehr Platz als mit den Standard Einstellungen, die ein default Menü Control erzeugen kann. Zunächst muss das Menü in der ASPX Seite erzeugt werden und die Ausrichtung auf Horizontal gesetzt werden.

<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" ...

Die Daten können  in den Menüitems deklariert werden, aus einer Datenbank kommen oder per Sitemap eingelesen werden.

Mein erster Gedanke war die prerender Funktion zu verwenden, die gefeuert wird bevor der HTML Code endgültig erzeugt wird. Aber wie so oft geht es viel einfacher.

CSS

Mein zweiter Ansatz ist per CSS die Ausgabe zu beeinflussen. CSS ist sehr mächtig und erlaubt sehr professionelles Layout. Für meinen Test habe ich einfach eine Style Klasse toolbar direkt in die Seite eingebaut.
IM Element StaticMenuItemstyle des ASP.NET Menu Controls können dann die Abstände der Menüpukte mit Itemspacing deklariert werden. Natürlich wird dort auch per CssClass auf die Style Klasse verwiesen.

<StaticMenuItemStyle   HorizontalPadding="3"  ItemSpacing="3" CssClass="toolbar"  >

    
Die Style Klasse nimmt dann ein IE Feature zur Hilfe. Mit dem Filter lassen sich z.B. Farbverläufe definieren, wie man das z.B. von Outlook Web Access kennt.

<style>         .toolbar         {font-size: 13px;   font-family: Verdana;   padding: 6px;   filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=# ffffff,endColorStr=lightblue);        } </style>

Das Ergebnis im Browser sieht echt stark aus.

Die Drop Down Menüs werden dadurch nicht beeinflusst.

Template

Mein nächster Ansatz verwendet das StaticItemTemplate, mit dem man völlig frei das Design bestimmen kann. Die Datenbindung erfolgt mit dem Feld Text und der auch sonst üblichen Notation (<%#). Die neue Hilfsfunktion Eval wertet den Ausdruck aus.
Ein guter Designer setzt die Hintergundfarbe um vor störenden Effekten aus den Windows Settings gefeit zu sein.

<StaticMenuItemStyle   HorizontalPadding="1"  ItemSpacing="0"  BackColor=white > </StaticMenuItemStyle> <StaticItemTemplate>         [&nbsp;<%# Eval( "Text" ) %>] </StaticItemTemplate>

Die Ausgabe im Browser