Solved

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

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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

I have developed many web applications with asp & asp.net and to add and use a dropdownlist was always a very simple task, but with the new asp.net, setting the value is a bit tricky and its not similar to the old traditional method. So in this a…
In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
This is a high-level webinar that covers the history of enterprise open source database use. It addresses both the advantages companies see in using open source database technologies, as well as the fears and reservations they might have. In this…
If you're a developer or IT admin, you’re probably tasked with managing multiple websites, servers, applications, and levels of security on a daily basis. While this can be extremely time consuming, it can also be frustrating when systems aren't wor…

691 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