Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

ASP.NET 3.5 Menu Control CSS Help

Posted on 2008-11-16
9
Medium Priority
?
5,586 Views
Last Modified: 2012-05-05
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
0
Comment
Question by:jn148
  • 5
  • 4
9 Comments
 
LVL 20

Expert Comment

by:Juan_Barrera
ID: 22973831
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
 

Author Comment

by:jn148
ID: 22974992
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
 
LVL 20

Expert Comment

by:Juan_Barrera
ID: 22979088
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:jn148
ID: 22980461
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
 
LVL 20

Expert Comment

by:Juan_Barrera
ID: 22980490
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
 

Author Comment

by:jn148
ID: 22981577
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
 
LVL 20

Accepted Solution

by:
Juan_Barrera earned 800 total points
ID: 22981635
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
 

Author Comment

by:jn148
ID: 22984123
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
 

Author Closing Comment

by:jn148
ID: 31517330
Thanks!!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Lots of people ask this question on how to extend the “MembershipProvider” to make use of custom authentication like using existing database or make use of some other way of authentication. Many blogs show you how to extend the membership provider c…
I have developed many web applications with asp & asp.net and to add and use a dropdownlist was always a very simple task, but with the new asp.net, setting the value is a bit tricky and its not similar to the old traditional method. So in this a…
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an anti-spam), the admin…
How can you see what you are working on when you want to see it while you to save a copy? Add a "Save As" icon to the Quick Access Toolbar, or QAT. That way, when you save a copy of a query, form, report, or other object you are modifying, you…
Suggested Courses

564 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question