Background image with menu control

.NET
1

I have a simple tabbed navigation, it has two states, active and inactive. I have CSS styles for both states. When I use the menu control, because of the way the Menu control outputs HTML, you can’t ever see the active state. Here’s my code:

<asp:sitemapdatasource id="sitemap_navigation" showstartingnode="false" runat="server" />
<asp:menu datasourceid="sitemap_navigation" orientation="Horizontal" runat="server">
    <staticmenuitemstyle cssclass="menu_option_inactive" />
    <staticselectedstyle cssclass="menu_option_active" />
</asp:menu>

The staticmenuitemstyle cssclass always cancels out the staticselectedstyle cssclass. How can I make this stop? Or should I be approaching this differently? Thanks.

2 

[color=#0000ff]<[/color][color=#800000]asp[/color][color=#0000ff]:[/color][color=#800000]SiteMapDataSource[/color] [color=#ff0000]ID[/color][color=#0000ff]="SiteMapDataSource1"[/color] [color=#ff0000]runat[/color][color=#0000ff]="server"[/color] [color=#ff0000]ShowStartingNode[/color][color=#0000ff]="false"[/color] [color=#ff0000]StartingNodeUrl[/color][color=#0000ff]="~/"[/color] [color=#0000ff]/>
[/color][color=#0000ff]<[/color][color=#800000]asp[/color][color=#0000ff]:[/color][color=#800000]Menu[/color] [color=#ff0000]ID[/color][color=#0000ff]="MainMenu"[/color] [color=#ff0000]runat[/color][color=#0000ff]="server"[/color] [color=#ff0000]Orientation[/color][color=#0000ff]="Horizontal"[/color] [color=#ff0000]MaximumDynamicDisplayLevels[/color][color=#0000ff]="2" [/color][color=#ff0000]DataSourceID[/color][color=#0000ff]="SiteMapDataSource1"[/color] [color=#ff0000]DynamicEnableDefaultPopOutImage[/color][color=#0000ff]="False"[/color] [color=#ff0000]StaticEnableDefaultPopOutImage[/color][color=#0000ff]="False"[/color] [color=#ff0000]PathSeparator[/color][color=#0000ff]="|">

[/color][color=#0000ff]<[/color][color=#800000]StaticMenuStyle[/color] [color=#ff0000]CssClass[/color][color=#0000ff]="menu"[/color] [color=#0000ff]/>[/color]
[color=#0000ff]<[/color][color=#800000]StaticMenuItemStyle[/color] [color=#ff0000]CssClass[/color][color=#0000ff]="menuItem"[/color] [color=#0000ff]/>[/color]
[color=#0000ff]<[/color][color=#800000]StaticSelectedStyle[/color] [color=#ff0000]CssClass[/color][color=#0000ff]="menuSelectedItem"[/color] [color=#0000ff]/>[/color]
[color=#0000ff]<[/color][color=#800000]DynamicMenuStyle[/color] [color=#ff0000]CssClass[/color][color=#0000ff]="menuPopup"[/color] [color=#0000ff]/>[/color]
[color=#0000ff]<[/color][color=#800000]DynamicMenuItemStyle[/color] [color=#ff0000]CssClass[/color][color=#0000ff]="menuPopupItem"[/color] [color=#ff0000]Font-Strikeout[/color][color=#0000ff]="False"[/color] [color=#0000ff]/>[/color]
[color=#0000ff]<[/color][color=#800000]DynamicHoverStyle[/color] [color=#ff0000]CssClass[/color][color=#0000ff]="menuPopupItem"[/color] [color=#0000ff]/>[/color]
[color=#0000ff]<[/color][color=#800000]StaticHoverStyle[/color] [color=#ff0000]CssClass[/color][color=#0000ff]="menuItemHover"[/color] [color=#0000ff]/>[/color]
[color=#0000ff]</[/color][color=#800000]asp[/color][color=#0000ff]:[/color][color=#800000]Menu[/color][color=#0000ff]>
[/color]

some of the stuff might not be necessary…

this is form TimeTracker I think…

3

It’s still canceling the active state out, check it out:

default.css

.menu_option_active, .menu_option_inactive
{
    text-align: center;
    width: 116px;
    height: 24px;
    font-size: 12px;
    font-weight: bold;
}
.menu_option_active
{
    background-image: url(images/menu_active_bg.gif);
}
.menu_option_inactive
{
    background-image: url(images/menu_inactive_bg.gif);
}
.menu_option_active a, .menu_option_inactive a
{
    background-image: none;
}

template.master

<asp:sitemapdatasource id="sitemap_navigation" showstartingnode="false" runat="server" />
<asp:menu datasourceid="sitemap_navigation" orientation="Horizontal" runat="server">
    <StaticMenuStyle CssClass="menu_option_inactive" />
    <StaticMenuItemStyle CssClass="menu_option_inactive" />
    <StaticSelectedStyle CssClass="menu_option_active" />
    <StaticHoverStyle CssClass="menu_option_inactive" />
</asp:menu>

Try it out, they will all look inactive. Let me know, thanks.

4

/*begin creating the tabs */

.menu {

margin-left: 5px;

background: url(…/images/tab_bg.gif) repeat-x;

font-size: 10px;

font-weight: bold;

}

[color=#008000]/* set tab1 as top level container table, then target TDs inside*/

[/color].menuItem td {

color: #FFFFFF;

height: 24px;

background: url(…/images/tab_dim.gif) no-repeat;

width: 100px;

text-align: center;

}

[color=#008000]/* make current tab gray,set the background-color also in case images are not on*/

[/color].menuSelectedItem td {

background: url(…/images/tab.gif) no-repeat #919191;

}

[color=#008000]/* make link and visited the same look,set the background-color also in case images are not on*/

[/color].menuItem a:link, .menuItem a:visited, .menuPopupItem a:link, .menuPopupItem a:visited {

color: #FFFFFF;

text-decoration: none;

}

[color=#008000]/* make hover by changing vertical position of background to -22px (the tab_dim2.gif is 44px high) */

[/color].menuItem a:hover {

text-decoration: underline;

}

Again from TimeTracker starter kit…

I my opinion Menu is a crappy control… The things it renders on the Page :eek: !!

5

Okay, in the meantime, what do you use then?

6

I make my own menus.

A Repeater, some divs, css, and a bit of javascript sometimes(nothing fancy)

The Menu is only good if you need a “dynamic/popup” (don’t know how its called in english) and you don’t have anything better in the toolbox.

I don’t like dynamic/popup menus any away, so I only used them when it’s really needed.

To make a tabs-like, one-level menu you don’t need the Menu Control.

Look at the other posts, you have almost if not everything you need to make one in there. Then you only need a little of imagination and patiance.

Look at the SiteMap and SiteMapNode Class in MSDN or Visual Studio Help.

You can even add custum properties / attributes the SiteMapNodes in the Web.Sitemap and acess the in the Page.
like:

<siteMapNode … menuImage="mHome.en.gif" />

then you can get them in the a Repeater…

<%# ((SiteMapNode)Container.DataItem)[“menuImage”]) %>

or in codebehind
SiteMapNode node;
string image = node[“menuImage”];

7

This whole .Net thing is super hard for me to get my head wrapped around. I’m coming from classic ASP and this is NOTHING like that so migrating is a joke.

Anyway, it worked! Here’s my code:

CSS

.menu_option
{
    width: 116px;
    height: 24px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    background: url(images/menu_inactive_bg.gif) no-repeat;
}
.menu_option a
{
    background: none;
}
.menu_option_selected
{
    background: url(images/menu_active_bg.gif) no-repeat;
}
.menu_option_selected a
{
    background: none;
}
.menu_option_hover
{
    color: #999999;
}

Menu control

<asp:sitemapdatasource id="sitemap_navigation" showstartingnode="false" runat="server" />
<asp:menu orientation="horizontal" datasourceid="sitemap_navigation" runat="server">
    <staticmenuitemstyle itemspacing="1" cssclass="menu_option" />
    <staticselectedstyle cssclass="menu_option_selected" />
    <statichoverstyle cssclass="menu_option_hover" />
</asp:menu>

The only thing is, you’re right, the HTML it outputs looks like CRAP! Gosh I wish I knew more! Maybe I’ll muster up enough energy to try this other ways. Thanks.

8

WHOA, hold up! I’m using FireFox and the above post completely works there but get this, it does NOT work in Internet Explorer. In fact, in IE the background images don’t show up at all!

Looks like I’m going to be forced to try other methods. It’s back to the repeater control. Eff.

9

In conclusion to this post I think we have made some significant discoveries. You cannot use the cssclass attribute on a Menu control that has background images signifying active and inactive states and have it show up correctly in IE (it will in FireFox though).

I’ve gone back to the repeater control and all is well. Here is my code:

web.sitemap

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
  <siteMapNode url="~/" title="Home" description="Home">
    <siteMapNode url="~/default.aspx" title="Home" description="Home" />
    <siteMapNode url="~/services.aspx" title="Services" description="Services" />
    <siteMapNode url="~/contact.aspx" title="Contact" description="Contact" />
    <siteMapNode url="~/admin/users_view.aspx" title="Users" description="Users" />
  </siteMapNode>
</siteMap>

CSS

.menu_option, .menu_option_selected
{
    float: left;
    width: 116px;
    height: 19px;
    padding-top: 5px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
}
.menu_option
{
    background: url(images/menu_inactive_bg.gif) no-repeat;
}
.menu_option_selected
{
    background: url(images/menu_active_bg.gif) no-repeat;
}
.menu_option a, .menu_option_selected a
{
    color: #666666;
    text-decoration: none;
}
.menu_option a:hover
{
    color: #999999;
}

Repeater control

<asp:sitemapdatasource id="sitemap_navigation" showstartingnode="false" runat="server" />
<asp:repeater datasourceid="sitemap_navigation" runat="server">
    <itemtemplate>
        <div class="menu_option<%# ((SiteMap.CurrentNode == (SiteMapNode)Container.DataItem) ? "_selected" : "") %>"><a href="<%# Eval("url") %>"><%# Eval("title") %></a></div>
    </itemtemplate>
    <separatortemplate>
        <div style="float:left; width:2px; height:1px"></div>
    </separatortemplate>
</asp:repeater>

Thank you, Pufa, I’ve learned a lot. Thanks again.

10

Actually you can… You have to apply the background image to a tablecell that contains the link.


 
[color=#800000].menuItem td[/color][color=#000000] {[/color]
 
[color=#ff0000]color[/color]: [color=#0000ff]#FFFFFF[/color];
 
[color=#ff0000]height[/color]: [color=#0000ff]24px[/color];
 
[color=#ff0000]background[/color]: [color=#0000ff]url(../images/tab_dim.gif)[/color] [color=#0000ff]no-repeat[/color];
 
[color=#ff0000]width[/color]: [color=#0000ff]100px[/color];
 
[color=#ff0000]text-align[/color]: [color=#0000ff]center[/color];
 
}
11

For the sake of argument, sure, but now add the other stuff to go with it. Yeah, see, it doesn’t work.

12

Wayward the menu works… you just have to figure out how to… look at what it renders…

I attached two images from the website I copy/pasted the code. It’s from the Time Tracker Starter kit. You can download it at asp.net.

13

Take the code I posted, that I thought worked but only worked in FireFox, and make it work, then post back. Thanks.

14