ASP.NET menu where some menu items have different CSS styles

Hi. I have been tasked with creating a menu for an application.

The graphics designer has asked for different items on the menu to have different styles - so for example the Home button will have a grey image in the background and the services menu button will have a black image in the background.

How do I apply different styles to menu items ? Can I do this using the menu control and sitemaps ?

dkmarshAsked:
Who is Participating?
 
AdamConnect With a Mentor Senior DeveloperCommented:
The event is called 'MenuItemDataBound'

Unfortunately, e.Item doesn't appear to contain any methods or properties for CssClass or anything else that can be used to change the look of an item. Use intellisense to browse what there is.
Looking at the properties of the Menu object on the page, it seems Styles are applied at the top level, not to individual items. The e.Item.Parent refers to the parent Menu item, not the parent control (DIV, SPAN, Table cell whatever is used), so this is not of much use.

You could, however, change the the style of the menu item text. See the example below.

If you wanted to go further (to, for example, change the background), you'd have to create your own custom menu control. To do this, you'd need to extend the existing control, and over-ride the way it is rendered to add the extra functionality (try the RenderChildren method)
<asp:Menu ID="Menu1" runat="server" OnMenuItemDataBound="Menu1_MenuItemDataBound" >
 
 
protected void Menu1_MenuItemDataBound(object sender, MenuEventArgs e)
{
    if (e.Item.Text.Contains("Home"))
    {
        e.Item.Text = String.Format("<span style='font-weight:bold'>{0}</span>", e.Item.Text);
    }
}

Open in new window

0
 
AdamSenior DeveloperCommented:
This all depends on how you are creating your menus - there are as many ways of answering this question as there are of creating menus.

For example, if you are reading the menu structure from somewhere (an XML file, for example) then generating the HTML, you could add some additional data to the XML to define what style should be used to create the menu, and act on that when you create the HTML.

Alternatively, if you are using some sort of ASP.net control, then you could use the OnRowDataBound event to chnage the CssClass for each item
0
 
dkmarshAuthor Commented:
Thanks Cyber-spy. That sounds great - I just need a bit more detail to make sure I understand - I am able to create standard menu's, but have not experimented with more complex ones yet.

I am using a sitemap for the datasource and an asp.net menu control. I have copied / pasted the sitemap and menu below.

I checked the sitemap data source and menu for a OnRowDataBound event, but could not find one.

Can you please give me some pointers on how to acheive this.

Thanks





The sitemap is as below
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
  <siteMapNode url="~/home.aspx" title="Homepage"  description="" >
    <siteMapNode url="~/yb.aspx?entity_id=0" title="Your Benchlearning"  description="" />
    <siteMapNode url="~/entity_profile_select.aspx" title="Entity Profiles"  description="" />
    <siteMapNode  url="Administration\admin.aspx" title="Admin"  description="">
      <siteMapNode url="Administration\user_log.aspx" title="User Activity Log"  description="User Activity Log"/>
      <siteMapNode url="Administration\user_admin.aspx" title="User Administration"  description="User Administration"/>
      <siteMapNode url="Administration\data_admin_select.aspx" title="Data Administration"  description="Data Administration" />
    </siteMapNode>
      <siteMapNode url="~/logout.aspx" title="Logout"  description="" />

  </siteMapNode>
</siteMap>

The menu is:

<asp:Menu ID="Menu1" runat="server"
                                        DataSourceID="SiteMapDataSource2" DynamicHorizontalOffset="2"
                                        DynamicVerticalOffset="1"
    Font-Bold="True" Font-Names="Arial"
                                        Font-Size="Small" ForeColor="#666666"
    Height="45px" Orientation="Horizontal"
                                        StaticDisplayLevels="2"
    StaticSubMenuIndent="10px" Width="1020px" BorderStyle="None" BorderColor="Black" CssClass="mainnav">
                                                                   <StaticSelectedStyle CssClass="staticSelectedStyle" />
                                                                   <StaticMenuItemStyle  CssClass="staticItemStyle" />
                                                                   <StaticHoverStyle CssClass="hoverStyle" />
                                                               </asp:Menu>
0
All Courses

From novice to tech pro — start learning today.