menu question

[Victor]

Hi Guys.
I am currently having a problem with my menu control. The requirement for
menu is. All root menuitems will be displayed as images. The image for each
root menuitem will be different. All the child menuitems are normal text.
Previously, I just a customized ajax menu control, which works fine. But my
boss think the menu should be a non-javascript menu(some users might disable
the javascript). So I have to switch the menu to css base. I'd like to use
the stardard menu control plus CSS Control Adapter Toolkit for asp.net 2.0.
But I haven't found a way to display all my root menu items as images (not
as background).

Is there a way for me to achieve what I want? Can anyone give me some clue
how to do this?

Cheers
Victor

 

[Walter Wang [MSFT]]

Hi Victor,

Are you using a Sitemap DataSource for your Menu control? If this is the
case, then you can use following article as a reference:

http://aspnet.4guysfromrolla.com/articles/030806-1.aspx

Basically it adds imageUrl in the data source and use it to set each node's
imageUrl in the DataBound event.

In your specific case, since you're only setting imageUrl for root nodes
and no text is needed for them:

protected void Menu1_MenuItemDataBound(object sender, MenuEventArgs e)
{
SiteMapNode node = (SiteMapNode)e.Item.DataItem;
if (e.Item.Parent == null)
{
if (node["imageUrl"] != null)
{
e.Item.ImageUrl = System.IO.Path.Combine("~/images/",
node["imageUrl"]);
}
e.Item.Text = "";
}
}


The above event will first get the SiteMapNode that is being bound to the
MenuItem and check if it's a root node (Parent == null), then read from the
datasource to set the imageUrl and remove Text.

If you're using other data sources, the code will need some change but the
idea is the same.

Please feel free to let me know if this helps or not.


Regards,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

 

[Walter Wang [MSFT]]

Hi Victor,

I'm writing to check the status of this post. Please feel free to let me
know if there's anything else I can help. Thanks.



Regards,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

 

[Victor]

Hi Walter:
have you finished the code I sent you yesterday? Can you tell me where I did
wrong so that my menu does not work in the IE6?

Cheers
Victor

 

[Walter Wang [MSFT]]

Hi Victor,

Yes I've just debugged the code.

Based on my understanding, you once mentioned that you need to make the CSS
based menu work when browser disabled javascript, therefore I can see you
removed the javascript related code from the MenuAdapter.cs in your code.

Unfortunately, if you take a look at the original code of MenuAdapter.js
from the CSS adapter template:

if (isPreIE7)
{
window.onload = SetHover__AspNetMenu;
}


Due to IE6 doesn't fully support some CSS standards, we have to use some
javascript to make the CSS rules work in pre-IE7 version. Since you removed
this javascript, that's why it now only works in IE7.

I'm afraid there's no other workaround for this issue, after all, it's
already a workaround to make the CSS adapters fully work in IE6. Sorry for
the inconvience caused.

Can you tell me more about your requirement, design, etc.? Maybe we can
fallback to other workarounds when there's no javascript support.


Regards,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

 

[Victor]

Hi Walter:
Yes you are right. The problem is caused by IE6 doesnt support the full css.
So I added the javascript into my code then it works.
Thanks a lot.

Victor