• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2046
  • Last Modified:

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

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
accmats
Asked:
accmats
  • 2
1 Solution
 
gregg1ep00Commented:
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
 
accmatsAuthor Commented:
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
 
gregg1ep00Commented:
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
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.

Join & Write a Comment

Featured Post

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.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now