DevTrain Startseite Visual Studio 1 Magazin  
  
  
SUCHEN:  
ARTIKEL ONLINE: 525   

Kategorien
.NET
Datenbanken
Web
XML

Allgemein
Camp
Foren
Events
Persönliche Einstellungen
Registrieren
Prämien Shop
Kontakt
Impressum
Über DevTrain

Autoren


   Autor: Hannes Preishuber Artikel Drucken
        
ASP.NET 2.0 Menu Control Layout Tricks

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.

ASP.NET Menu Control CSS
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
ASP.NET Menu control StaticItemTemplate

 


DevTrain Camp - Schneller zum .NET 3.5 Developer
 
Verwandte Artikel      Verlinkte Dokumente
    Keine verknüpften Dokumente
    Keine Links vorhanden

  Erfasst am: 05.05.2005
  Gültig bis: 03.08.2005
30 Ratings
Bewertung: 26,0%
schlecht    sehr gut  

 
© Copyright 2007 ppedv AG