Ich erstelle programmgesteuert ein ASP.Net 4.5-Menü in C #. Die oberen Menüelemente werden nach meinen Wünschen formatiert, aber die Formatierung wird nicht von den untergeordneten Elementen übernommen. Die Formatierung, mit der ich mich am meisten beschäftige, sind zwei: StaticEnableDefaultPopOutImage, mit dem gesteuert wird, ob dieser kleine Pfeil neben dem MenuItem angezeigt wird, und ItemSpacing. Ersteres ist in der Definition von asp: Menu auf false gesetzt und funktioniert für die oberen Menüelemente (dh es wird kein kleiner Pfeil angezeigt), funktioniert jedoch nicht für die untergeordneten Elemente (der kleine Pfeil wird neben den untergeordneten Elementen angezeigt). . Letzteres ist auf 75px eingestellt, und die oberen Menüpunkte sind gut voneinander beabstandet. Die untergeordneten Elemente und ihre untergeordneten Elemente sind jedoch nebeneinander vollgestopft. Ich bin mir nicht sicher, wie ich dieses Verhalten kontrollieren soll. Schließlich wird das Menü auf einer Masterseite definiert. Hier ist mein Menücode in Master:
<asp:Menu runat="server" CssClass="bgcell_top_nav" ID="menuMain" Orientation="Horizontal" RenderingMode="Table" StaticEnableDefaultPopOutImage="false" Width="100%" ItemWrap="false" Height="250" DynamicVerticalOffset="8" StaticDisplayLevels="1">
<StaticMenuItemStyle ItemSpacing="75px" />
</asp:Menu>
Und das ist mein Code dahinter:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//top menu items
MenuItem ApplicationFunctionality = new MenuItem();
ApplicationFunctionality.Text = "Applications";
ApplicationFunctionality.SeparatorImageUrl = "~/images/menu-pipe.png";
this.menuMain.Items.Add(ApplicationFunctionality);
MenuItem DatabaseFunctionality = new MenuItem();
DatabaseFunctionality.Text = "Databases";
DatabaseFunctionality.SeparatorImageUrl = "~/images/menu-pipe.png";
this.menuMain.Items.Add(DatabaseFunctionality);
//sub menu items
MenuItem Application_Add = new MenuItem();
Application_Add.Text = "Add";
ApplicationFunctionality.ChildItems.Add(Application_Add);
MenuItem Application_Search = new MenuItem();
Application_Search.Text = "Search";
ApplicationFunctionality.ChildItems.Add(Application_Search);
MenuItem Application_Reports = new MenuItem();
Application_Reports.Text = "Reports";
ApplicationFunctionality.ChildItems.Add(Application_Reports);
MenuItem CreateInternalApplication = new MenuItem();
CreateInternalApplication.Text = "Internal";
CreateInternalApplication.NavigateUrl = "~/TemplateForms/ApplicationCreationTemplateForm.aspx";
Application_Add.ChildItems.Add(CreateInternalApplication);
MenuItem CreateExternalApplication = new MenuItem();
CreateExternalApplication.Text = "External";
Application_Add.ChildItems.Add(CreateExternalApplication);
}
}
Und ich füge ein Bild davon bei, wie das aussieht, damit die Leute sehen können, um welche Themen es sich handelt.
Jede Anleitung zum Formatieren der untergeordneten Elemente wird sehr geschätzt.
Pfeilsymbole entfernen:
Das Problem ist, dass StaticEnableDefaultPopOutImage="false"
nur für statische Menüebenen gilt und Sie haben StaticDisplayLevels="1"
. Die anderen beiden Ebenen sind dynamisch, also brauchen Sie auch DynamicEnableDefaultPopOutImage="false"
.
Abstand hinzufügen:
Zum Hinzufügen von Abständen zu dynamischen Ebenen können Sie Folgendes verwenden:
<DynamicMenuItemStyle ItemSpacing="75px" />
Anwenden benutzerdefinierter Stile:
Alternativ können benutzerdefinierte Stile auf jede Menüebene angewendet werden. Dies gibt Ihnen mehr Kontrolle darüber, wie das Menü aussieht. Deklarieren Sie in Ihrem Menü Stile für Menüelementebenen mit LevelMenuItemStyles
. Zum Beispiel füge ich hier Stilklassen für die ersten 3 Menüelementstufen hinzu:
<asp:Menu runat="server" CssClass="bgcell_top_nav"
ID="menuMain" Orientation="Horizontal" RenderingMode="Table"
StaticEnableDefaultPopOutImage="false" Width="100%"
ItemWrap="false" Height="250" DynamicVerticalOffset="8"
StaticDisplayLevels="1">
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="menuItemLevel1"/>
<asp:MenuItemStyle CssClass="menuItemLevel2"/>
<asp:MenuItemStyle CssClass="menuItemLevel3" />
</LevelMenuItemStyles>
</asp:Menu>
Dann sollten Sie in der Lage sein, Stile auf Elementebene des Menüs anzupassen, z
.menuItemLevel2{
margin-left:7px;
}
.menuItemLevel3{
margin-left:12px;
}
Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen