Solved

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

Posted on 2009-04-12
4
463 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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

746 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now