SiteMap menu with icons

26 Comments

• Thanks for this tip! I was looking exactly that.
  

• Donna: what BackImage are you referring to? If you want different background images for each menu item, I think you're out of luck, sorry.
  

• thanks for the post - menu's now look great
  

• For background image try setting a custom attribute to reflect the css class for the menu item and set the background in a stylesheet.
  

• Peter: the problem is that there isn't an individual css class for each menu item, so this will work for a category of items, but not for different backgrounds for each item.
  

• No sample up and running?
  

• AdmiralGanja: sorry, no.
  

• Great, works well!
  
  Is it possible to put spaces between the icon and the text?
  

• Mark: you should be able to do that with CSS. For example if the CSS class for your menu item is "foo", styling "foo img" with some right padding should do the trick.
  

• How can I set a cssclass for an image?
  
  The only classes I can set at the moment are:
  
  
  
  
  
  
  
  

• Mark: you do it in the style sheet. Your MenuItemStyle points to menuRootPanelItem, but you can define a ".menuRootPanelItem img" style in your stylesheet which will only affect images that are inside an element with class menuRootPanelItem. Does that make sense?
  

• Thanks, I understand how css works but it doesn't seem to recognise "img" for any cssClass even if I put ".img" or "imgUrl" or ".imgUrl".
  
  Do I need to define "img" somewhere?
  

• Mark: I just checked, and it works great. In the stylesheet, I have:
  .item img {padding-right: 50px;}
  
  and the item style is
  

• Lance: you can't, sorry.
  

• No worries, I've got it working now.
  
  I wasn't setting an img class for both StaticMenuItemStyle AND DynamicMenuItemStyle as they use different cssClasses.
  
  Thanks for your help.
  

• Great post Bertrand. Know of any way to change the image on hover? Say a grayscale image until the user hovers over an icon and then diplay the same image in color.
  

• Freakin' sweet! (Peter Griffin voice)
  
  This is just what I needed to figure out how to *remove* Menu items programmatically. I couldn't just remove them from my sitemap b/c I still wanted them to show up in the breadcrumbs (don't ask). I added a "hideOnMenu" property to the sitemapnodes I wanted hidden and set it to true.
  
  Then, in the MenuItemDataBound event I added the following:
  MenuItem parent = e.Item.Parent;
  string hideOnMenu = ((SiteMapNode)e.Item.DataItem)["hideOnMenu"];
  if (hideOnMenu != null)
  {
  if (bool.Parse(hideOnMenu))
  {
  parent.ChildItems.Remove(e.Item);
  }
  }
  
  I don't know if this is the best solution, but it's working great for me!!
  

• errr... slight modification to work with top-level menu items:
  
  string hideOnMenu = ((SiteMapNode)e.Item.DataItem)["hideOnMenu"];
  if (hideOnMenu != null && bool.Parse(hideOnMenu))
  {
  MenuItem parent = e.Item.Parent;
  if (parent != null) parent.ChildItems.Remove(e.Item);
  else (sender as Menu).Items.Remove(e.Item);
  }
  

• Thanks This was very useful to me
  

• @Omego2K: err, the menu item does: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.menuitem.imageurl.aspx
  

• thanks, just what I was looking for.
  

• Thanks, very helpful
  

• Hi Bertrand, need help on this.
  I'm new in this kind of stuff, and I'm trying to have image buttons instead of text in the sitemap. I'm using web.sitemap file from ASP.Net. Then I specified this in my masterpage:
  
  
  
  And add some coding part as you said in the article.
  But it still return text-sitemap, not image sitemap the way I want. Is there anything I should add or something?
  

• Hi Bertrand, just found out why it didn't work out. My mistake, my asp:menu tag was not complete. It runs well now, Thanks..
  

• yes this will work i have used it _target
  

• Awesome.Very clean way to implement it. thanks.