ASP.Net Menu Control renders incorrectly when used on a Master Page

Question

I'm struggling to find a solution for a weird issue with ASP.Net Menu control, when used in conjunction with Master Pages.

When the user navigates to a page - via. the menu - which inherits from the Master Page, the entire menu just expands and flashes across the screen. Collapses immediately and the page is rendered.... Causes some flickering on the screen, annoying for the users.

Now, there are a few work-arounds suggested for this: - Commenting out the tag from the web.config. - giving IDs to the Master Pages in their Page_Load events. Tried'em all, dosen't seem to sort out my issue :(. I'd take any ideas.

-HK

Hue

The solution to the same problem which has been posted here... #3241373 ...worked for me. – Adrianeadrianna

Answer 1

I remember seeing that at one point in a site of mine. Since then I ripped the menu out, but putting it back into my master page I don't see the flicker any more. Here's the code for a simple menu that works without flicker in a master page;

<asp:Menu ID="menu" 
    DataSourceID="sitemap" 
    runat="server" />
<asp:SiteMapDataSource 
    ID="sitemap" 
    ShowStartingNode="false" 
    runat="server" />

Not tried it myself, but how about setting the default class for the menu children to invisible (say, a class of invisibleMenu), which means it initially loads invisibly, and then using a bit of javascript to remove the invisibility? In jQuery, something like

$('.invisibleMenu').removeClass('invisibleMenu');

Carrizales

Answer 2

If I remember, I had the same problem and solve it in putting the menu in content place holder in the amster page:

<asp:ContentPlaceHolder ID="MenuZone" Runat="server">
   <asp:TreeView ID="TreeView1" Runat="server" DataSourceID="dsSiteMap" ImageSet="Simple"
                    NodeIndent="10" MaxDataBindDepth="3" ExpandDepth="0" OnTreeNodePopulate="TreeView1_TreeNodePopulate">
       <SelectedNodeStyle Font-Underline="True" ForeColor="#DD5555" HorizontalPadding="0px" VerticalPadding="0px"></SelectedNodeStyle>
       <NodeStyle Font-Names="Verdana" Font-Size="8pt" HorizontalPadding="0px" ForeColor="Black" NodeSpacing="0px" VerticalPadding="0px"></NodeStyle>
       <HoverNodeStyle Font-Underline="True" ForeColor="#DD5555"></HoverNodeStyle>
       <ParentNodeStyle Font-Bold="False" />
   </asp:TreeView>
   <asp:SiteMapDataSource ID="dsSiteMap" Runat="server" ShowStartingNode="False" />

And in not overwritting this placeholder in nested page.

Burgeon

This solution worked for me! Although I don't understand why, since the empty (not overwritten) ContentPlaceHolder doesn't seem to have any effect on the rendered HTML. – Adrianeadrianna

I must correct myself: Actually it doesn't work. I've tested it on a live server now (with realistic latency) and the issue is still there. It might be a bit better than before but it didn't disappear. – Adrianeadrianna

Answer 3

if know your problem that ASP.Net Menu Control renders incorrectly when used on a Master Page if the asp.net menu is not worked then use usercontrol not master page because we can use user control by easy wasy.

Ludivinaludlew

Answer 4

Add the menu to an ASCX page or its own masterpage and include it into the main masterpage. I myself have never run into this issue but something similar has happened.

Infinity

Answer 5

In case anyone else runs into this problem again, I had my issue resolved over here on another Stack Overflow thread:

How to get rid of ugly asp:Menu flickering?

Nimocks

Answer 6

Same issue was with me too. But solved by removing jquery calls. :) or you can download and keep the .js script file inside the script folder instead of referencing it from online.

Astrosphere