Solved

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

Posted on 2006-06-22
3
2,010 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
ID: 16961001
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
ID: 16961433
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
ID: 16961489
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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Just a quick little trick I learned recently.  Now that I'm using jQuery with abandon in my asp.net applications, I have grown tired of the following syntax:      (CODE) I suppose it just offends my sense of decency to put inline VBScript on a…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit https://www.mail-signatures.com/articles/signature-templates/?sts=6651 If you want to manage em…

831 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