Solved

How to keep static menu item highlighted when dynamic menu appears in ASP.net 2.0?

Posted on 2006-06-22
3
2,006 Views
Last Modified: 2008-09-24
I have a menu control on my web page.  It contains submenus that dynamicly appear when you roll over the static menu items.  Is there a way to make the static menu item remain highlighted when the sub menu displays.  It would help my users to know what sub menu there are on.

Thanks!!!
0
Comment
Question by:accmats
  • 2
3 Comments
 
LVL 4

Expert Comment

by:gregg1ep00
Comment Utility
I don't think this is going to be easy with the stock asp.net menu control.  The problem is that the menu control renders itself using tables, like this:
<div>
      <a href="#Menu1_SkipLink">
            <img alt="Skip Navigation Links" src="/ConnectorWeb/WebResource.axd?d=_G8dUDoNkPNDKRKEuGKUig2&amp;t=632851121711532843" width="0" height="0" style="border-width:0px;" />
      </a>
      <table id="Menu1" class="Menu1_2" cellpadding="0" cellspacing="0" border="0">
            <tr>
                  <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n0">
                        <table class="Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                              <tr>
                                    <td style="white-space:nowrap;">
                                          <a class="Menu1_1 Menu1_3" href="../default.aspx">Home</a>
                                    </td>
                                    <td style="width:0;">
                                          <img src="/ConnectorWeb/WebResource.axd?d=Ir0MkPRdo6QvRbvr9gZQNO_LcBELaFei8T0Fkx_xasg1&amp;t=632851121711532843" alt="Expand Home" style="border-style:none;vertical-align:middle;" />
                                    </td>
                              </tr>
                        </table>
                  </td>
                  <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n1">
                        <table class="Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                              <tr>
                                    <td style="white-space:nowrap;">
                                          <a class="Menu1_1 Menu1_3" href="../page.aspx?PageID=1">About Us</a>
                                    </td>
                              </tr>
                        </table>
                  </td>
            </tr>
      </table>
      <div id="Menu1n0Items" class="Menu1_0 Menu1_7">
            <table border="0" cellpadding="0" cellspacing="0">
                  <tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n2">
                        <td>
                              <table class="Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%">
                                    <tr>
                                          <td style="white-space:nowrap;width:100%;">
                                                <a class="Menu1_1 Menu1_5" href="Default.aspx">Test</a>
                                          </td>
                                          <td style="width:0;">
                                                <img src="/ConnectorWeb/WebResource.axd?d=Ir0MkPRdo6QvRbvr9gZQNO_LcBELaFei8T0Fkx_xasg1&amp;t=632851121711532843" alt="Expand Test" style="border-style:none;vertical-align:middle;" />
                                          </td>
                                    </tr>
                              </table>
                        </td>
                  </tr>
            </table>
      <div class="Menu1_6 Menu1_0" id="Menu1n0ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
            <img src="/ConnectorWeb/WebResource.axd?d=4NE_uP_KZ8uIcYJul_16SkDTNBs3HL0LBAQzmk1s9wU1&amp;t=632851121711532843" alt="Scroll up" />
      </div>
      <div class="Menu1_6 Menu1_0" id="Menu1n0ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
            <img src="/ConnectorWeb/WebResource.axd?d=85WFEPkfzGLEvpMLKJyaOaZ35340r0H7Lq47qdBFakU1&amp;t=632851121711532843" alt="Scroll down" />
      </div>
</div>
<div id="Menu1n2Items" class="Menu1_0 Menu1_7">
      <table border="0" cellpadding="0" cellspacing="0">
            <tr onmouseover="Menu_HoverDynamic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n3">
                  <td>
                        <table class="Menu1_6" cellpadding="0" cellspacing="0" border="0" width="100%">
                              <tr>
                                    <td style="white-space:nowrap;width:100%;">
                                          <a class="Menu1_1 Menu1_5" href="menu.aspx">Test2</a>
                                    </td>
                              </tr>
                        </table>
                  </td>
            </tr>
      </table>
      <div class="Menu1_6 Menu1_0" id="Menu1n2ItemsUp" onmouseover="PopOut_Up(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
            <img src="/ConnectorWeb/WebResource.axd?d=4NE_uP_KZ8uIcYJul_16SkDTNBs3HL0LBAQzmk1s9wU1&amp;t=632851121711532843" alt="Scroll up" />
      </div>
      <div class="Menu1_6 Menu1_0" id="Menu1n2ItemsDn" onmouseover="PopOut_Down(this)" onmouseout="PopOut_Stop(this)" style="text-align:center;">
            <img src="/ConnectorWeb/WebResource.axd?d=85WFEPkfzGLEvpMLKJyaOaZ35340r0H7Lq47qdBFakU1&amp;t=632851121711532843" alt="Scroll down" />
      </div>
</div>
<a id="Menu1_SkipLink"></a>

Ugly, huh?!?  :)

The reason what you're asking is hard is because each "row" of submenus is a different table.  You can see this with the rendered code above.  So when you hover over a static node, it highlights, but then when you go into a dynamic node, you're actually hovering over a different table altogether, so the static node's "onmouseout" handler fires and the hover appearance goes away.

Having said that, however, Microsoft has released some "css-friendly" adapters that are freely available from the asp.net website:
http://www.asp.net/CSSAdapters/Default.aspx

Included is a menu control adapter that uses <li> and <ul> tags, so then the menu control would render itself like this:
<div class="AspNet-Menu-Horizontal">
      <ul class="AspNet-Menu">
            <li class="AspNet-Menu-WithChildren">
                  <a href="/ConnectorWeb/default.aspx" class="AspNet-Menu-Link">
                        Home
                  </a>
                  <ul>
                        <li class="AspNet-Menu-WithChildren">
                              <a href="/ConnectorWeb/temp/Default.aspx" class="AspNet-Menu-Link">
                                    Test
                              </a>
                              <ul>
                                    <li class="AspNet-Menu-Leaf">
                                          <a href="/ConnectorWeb/temp/menu.aspx" class="AspNet-Menu-Link">
                                                Test2
                                          </a>
                                    </li>
                              </ul>
                        </li>
                  </ul>
            </li>
            <li class="AspNet-Menu-Leaf">
                  <a href="/ConnectorWeb/page.aspx?PageID=1" class="AspNet-Menu-Link">
                        About Us
                  </a>
            </li>
      </ul>
</div>

Much cleaner layout!  The great thing about this is that submenus are actually nested.  So when you hover over a static node (let's say the "HOME" node), and the dynamic menu appears, then you move your mouse over one of the dynamic elements (let's say the "Test" node), your mouse is actually hovering over BOTH <li> elements (the static AND the dynamic), so both of them show up as hovered.

The CSS used is a little hard to understand at first, but once you get it, you'll be able to do what you're talking about.  I can send you an example if you'd like.

If you'd like to go this route, I'd suggest starting with the example menu that's included with the CSS adapters and customizing it to suit your needs.  I tried to do mine from scratch, and didn't get very far!  I just took their example and modified it to suit my needs, and it works great!

Hope that helps!  :)
0
 

Author Comment

by:accmats
Comment Utility
I had look at the CSS friendly adapter for the menu control.  But I beleive I read in the documation that the CSS was only for IE, not the other browsers out there.  So I gave up on that approach.  I may now need to go look at it again.

So if its pretty difficult to keep the static menu item highlighted, then would it be possible to place an image at the top of the dynamic menu where I could have an image that titled the submenu?  That would also give a way to know what sub menu I was on.

Thanks!
0
 
LVL 4

Accepted Solution

by:
gregg1ep00 earned 250 total points
Comment Utility
The CSS friendly adapters work across most browser platforms.  I'm using them in my biggest web project, and they work flawlessly with IE and Firefox.

As far as an image at the top of the dynamic menu, yes you could do that.  I think you'd just do something like this in your sitemap file:
<siteMapNode title="StaticMenuItem" url="~/default.aspx">
        <siteMapNode ImageUrl="~/images/whatever.gif" />
        <siteMapNode title="DynamicMenuItem" url="~/page.aspx" />
</siteMapNode>
0

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

In an ASP.NET application, I faced some technical problems. In this article, I list them out and show the solutions that I found.  I hope it will be useful. Problem: After closing a pop-up window, the parent page should be refreshed automaticall…
In .NET 2.0, Microsoft introduced the Web Site.  This was the default way to create a web Project in Visual Studio 2005.  In Visual Studio 2008, the Web Application has been restored as the default web Project in Visual Studio/.NET 3.x The Web Si…
This video discusses moving either the default database or any database to a new volume.
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…

763 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now