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
jn148Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Juan_BarreraCommented:
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.
0
jn148Author Commented:
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!
0
Juan_BarreraCommented:
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,


0
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

jn148Author Commented:
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
0
Juan_BarreraCommented:
No problem att all JN,
Just let me know exactly what's not working, and what would you like to explore in more detail.
0
jn148Author Commented:
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.
0
Juan_BarreraCommented:
I was giving you an example of how you can add css attributes to a control.
Label1 is just an example, but it could be any WebControl.

Have a look at this snippet to see what I mean:




'Markup
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>
    </form>
</body>
</html>
 
'Code Behind:
 
   Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Label1.Attributes.Add("onmouseover", "this.style.background='yellow'")
        Label1.Attributes.Add("onmouseout", "this.style.background='red',this.style.color='white'")
    End Sub

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jn148Author Commented:
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
0
jn148Author Commented:
Thanks!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.