Solved

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

Posted on 2006-06-22
3
2,018 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to create an MVC5, Razor Widget 2 50
Query in AngularJS 8 82
Access-Control-Allow-Origin 4 44
ASP.NET sqlds databinding error cascading dropdownlists ? 1 15
A quick way to get a menu to work on our website, is using the Menu control and assign it to a web.sitemap using SiteMapDataSource. Example of web.sitemap file: (CODE) Sample code to add to the page menu: (CODE) Running the application, we wi…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
In an interesting question (https://www.experts-exchange.com/questions/29008360/) here at Experts Exchange, a member asked how to split a single image into multiple images. The primary usage for this is to place many photographs on a flatbed scanner…
This video shows how to use Hyena, from SystemTools Software, to update 100 user accounts from an external text file. View in 1080p for best video quality.

732 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