Solved

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

Posted on 2009-04-12
4
479 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
The Email Laundry PDF encryption service allows companies to send confidential encrypted  emails to anybody. The PDF document can also contain attachments that are embedded in the encrypted PDF. The password is randomly generated by The Email Laundr…
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

742 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