Solved

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

Posted on 2009-04-12
4
475 Views
Last Modified: 2012-05-06
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 ?

0
Comment
Question by:dkmarsh
  • 2
4 Comments
 
LVL 12

Expert Comment

by:Cyber-spy
ID: 24126627
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
 

Author Comment

by:dkmarsh
ID: 24126802
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
 
LVL 12

Accepted Solution

by:
Cyber-spy earned 250 total points
ID: 24127169
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
How to Install VMware Tools in Red Hat Enterprise Linux 6.4 (RHEL 6.4) Step-by-Step Tutorial
Attackers love to prey on accounts that have privileges. Reducing privileged accounts and protecting privileged accounts therefore is paramount. Users, groups, and service accounts need to be protected to help protect the entire Active Directory …

735 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question