Formatting items in ASP.Net Menu


This article is written by Pon Saravanan  on 15-Jul-09 Last modified on :17-Feb-11





ASP.Net Menu And CSS to format

Without a menu the asp.net web application is hard to navigate. We can even bind to a hierarchical data. Or with little additional work the database tables can be bound easily.

Format Base Menu

Base menu can be formatted using some simple format options(similar like anyother controls in asp.net shown as below). But the important item to be noted is the section where this is applied for. To format base menu use LevelMenuItemStyles section(BackColor="Silver" BorderStyle="Dashed" BorderWidth="1"). If  the menu has to be displayed horizontally, the orientation attribute has to be changed accordingly(Orientation="Horizontal") which is availabel in the <asp:Menu section itself

Sample grey background style will look like
<LevelMenuItemStyles >
<asp:MenuItemStyle BackColor="Silver" BorderStyle="Solid" Font-Bold="true" BorderColor="Gray" BorderWidth="1" HorizontalPadding="10px" />
</LevelMenuItemStyles>

Format Menu Item

Same as base menu but here the style is in the same tag. The tag is DynamicMenuItemStyle. sample of the dynamic menu item style is.
<DynamicMenuItemStyle BackColor="Orange" ForeColor="Maroon" Font-Bold="true" BorderStyle="Solid" BorderColor="Gray" BorderWidth="1" HorizontalPadding="10px" />

Selected Menu using DynamicSelectedStyle

 The following sample will highlight both base menu and the sub menus. The base menu is handled by LevelSelectedStyles and the sub menu is hadled by DynamicSelectedStyle. Currently i have used BackColor for understanding purposes. 
    <LevelSelectedStyles >
    <asp:MenuItemStyle BackColor="Gray" ForeColor="White" Font-Bold="true" BorderStyle="Solid" BorderColor="Gray" BorderWidth="1" HorizontalPadding="10px" />
    </LevelSelectedStyles>
        <DynamicSelectedStyle BackColor="Maroon" ForeColor="Orange" Font-Bold="true" BorderStyle="Solid"                                 
BorderColor="Gray" BorderWidth="1" HorizontalPadding="10px" />
    <Items> 

Screen Capture

Screen Capture- On Hover Menu Style


Screen Capture - Selected Menu Style

Source Code

Markup(*.Aspx)

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:Menu runat="server" ID="mnuBase" Orientation="Horizontal">
    <LevelMenuItemStyles >
        <asp:MenuItemStyle BackColor="Silver" BorderStyle="Solid" Font-Bold="true" BorderColor="Gray" BorderWidth="1" HorizontalPadding="10px" />
    </LevelMenuItemStyles>
    <LevelSelectedStyles  >   
        <asp:MenuItemStyle BackColor="Gray" ForeColor="White" Font-Bold="true" BorderStyle="Solid" BorderColor="Gray" BorderWidth="1" HorizontalPadding="10px" />
    </LevelSelectedStyles>
   
    <DynamicMenuItemStyle BackColor="Orange" ForeColor="Maroon" Font-Bold="true" BorderStyle="Solid" BorderColor="Gray" BorderWidth="1" HorizontalPadding="10px" />
    <DynamicSelectedStyle BackColor="Maroon" ForeColor="Orange" Font-Bold="true" BorderStyle="Solid" BorderColor="Gray" BorderWidth="1" HorizontalPadding="10px" />
   
    <Items>
  
        <asp:MenuItem Text="one">
            <asp:MenuItem Text="One-One" ></asp:MenuItem>
            <asp:MenuItem Text="One-Two"></asp:MenuItem>
        </asp:MenuItem>
       
        <asp:MenuItem Text="two">
            <asp:MenuItem Text="Two-One" ></asp:MenuItem>
            <asp:MenuItem Text="Two-Two"></asp:MenuItem>
        </asp:MenuItem>
        <asp:MenuItem Text="three"></asp:MenuItem>
    </Items>
    </asp:Menu>
    </div>
    </form>
</body>
</html>











Comments
  • GUEST
    I copied this code to my computer and it doesn't exactly do what you are saying. The submenus will change color on selction but not the top base menu. 2/17/2011 10:58:02 AM

  • pons
    Please refer to the screenshots, is that not what you are expecting to see. If you are expecting something different please explain in detail 2/17/2011 6:29:55 PM


Comments
   
Captcha Image
For you specially:  
Captcha Text Enter the text in the image.(Not Case sensitive)    



Spam Bot Trap



   



Select Theme
White
Blue
Brown
Gray