asked on

ASP.NET 3.5 Menu Control CSS Help

We have successfully mimic'd the navigation structure at ContinentalSki.com at our test site, MNOutdoor.com (we are currently working on design for this client) using the .NET3.5 menu control.

The one feature of their navigation that we cannot replicate using the menu control is when you click on the Events and Info link, you get the sub pages, Bike Events, Alpine Events, Nordic Events below the Events and Info link.

Is this do-able using the Menu control in ASP.NET 3.5?

Our Menu Control: 
<asp:Menu ID="Menu1" runat="server" Width="180" DataSourceID="SiteMapDataSource1">
                  <StaticItemTemplate>
                  <ul class="menu">
                  <li>
                  <asp:Label ID="Label1" Runat="server"><%# Eval("Text") %></asp:Label>
                  </li></ul>
                  </StaticItemTemplate>
                  <DynamicItemTemplate>
                  <ul class="menu">
                  <li>
                  <asp:Label ID="Label1" Runat="server"><%# Eval("Text") %></asp:Label>
                  </li></ul>
                  </DynamicItemTemplate>
                  <StaticSelectedStyle CssClass="xMenuActive" />
                  <DynamicSelectedStyle CssClass="xMenuActive" />
              </asp:Menu>
 
 
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Open in new window

MasterPage.master.txt
csb-styles.css.txt

Juan_Barrera

Hi there,
I've had a look at the ContinentalSki.com site. The ASP.NET menu is not suitable to replicate that functionality. You can try something similar by setting the menu's "orientation" property to "Vetical, but, in any case, the menu won't "stay down".
The best solution to achieve this, I think, would be to use a table and populate it on demand, when the users click on a "menu" item.

jn148

ASKER

Thanks Juan - a bit of a disappointment that we cannot accomplish it, but oh well...

I am pretty sure we can do some onclick methods that write to a label control to change the look of the 'menu' to re-create the active page look (different background color, indent, etc...) but any advice you could offer on how to make the mouse-over actions work? (each menu item changes background color as you mouse over each item?)

Thoughts?
Thanks!

Juan_Barrera

Sure, you can always add attributes to your controls, be them Labels, TableCells, et.
It works basically like this:

Label1.Attributes.Add("onmouseover","this.style.background='yellow'")
Label1.Attributes.Add("onblur",'this.style.background='red')

And so on...

As you can see, any Javascript attribute can be added to the control.

I hope this helps,

jn148

ASKER

Thanks - Juan!

Sounds totally perfect, but alas, I am still a newbie at this, and am not quite sure what you mean here?

I did a little research here, and came up with http://forums.asp.net/t/1260078.aspx
But their suggestions do not work at all.

Would you be willing to discuss in a litte more detail?
Thanks!
JN

Juan_Barrera

No problem att all JN,
Just let me know exactly what's not working, and what would you like to explore in more detail.

jn148

ASKER

Thanks a ton Juan!

I guess just the uber-basics of it really...

Where/how do I put the code snippet you provided:
Label1.Attributes.Add("onmouseover","this.style.background='yellow'")
Label1.Attributes.Add("onblur",'this.style.background='red')

To make the Label1 control I have on the page have the 'hover' characteristics.

ASKER CERTIFIED SOLUTION

Juan_Barrera

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jn148

ASKER

PERFECT!!

Thanks for taking the time to work with a newbie Juan - MUCH appreciated!

All of the books I have been reading are so into the onClick method for all of the controls they are teaching that I always forget about that beautiful Page_Load option.

...and for those reading this post in the future: if you want to change the CSS Class, not just a style attribute, use this code:
--- --- ---
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Label2.Attributes.Add("onmouseover", "this.className='xLabelRollover'")
Label2.Attributes.Add("onmouseout", "this.className='xMenuActive'")
End Sub
--- --- ---
WARNING: the capitalization of the "N" in this.className= is REQUIRED.
(reference: http://www.velocityreviews.com/forums/t237983-change-class-with-onmouseover.html)

Thanks again Juan!
JN

jn148

ASKER

Thanks!!