Flashing menu items with HoverMenuExtender

Question

Hi - I have a panel that has a HoverMenuExtender added so as to produce a sort of dropdown menu and my problem is that for a second when the page is loading you can get a glimps of the links in the menu. Any tips out there on overcoming this flashing of the menu items when the page is loading...

<!--Hover-menu-1 -->
<div id ="hoverMenu1">


   <div id="Trigger1" class="Trigger" runat="server" >
   <asp:Hyperlink id="btnproduct" runat="server" NavigateUrl="~/Default.aspx" title="Home" onfocus="this.blur();">Home...</asp:Hyperlink>&nbsp;&nbsp;


<asp:Image ID="Image1" runat="server" 
        ImageUrl="~/ExpandingPanel/expand2.jpg" 
        ToolTip="Menu..." 
           style="position: relative; top: 2px; left: 0px" /></div>

  <asp:Panel ID="Panelpopup" runat="server" CssClass="invis_panel">

  <div id="Menu_items">
  <asp:Hyperlink id="to_Speach" class="Format4_menu_items" runat="server" NavigateUrl="~/Speach.aspx" title="Speach" onfocus="this.blur();">Speach</asp:Hyperlink>

   <asp:Hyperlink id="to_AutoGallery" class="Format4_menu_items" runat="server" NavigateUrl="Auto_Gallery.aspx" title="Auto Gallery" onfocus="this.blur();">Gallery</asp:Hyperlink>

  <asp:Hyperlink id="to_FileListings" class="Format4_menu_items" runat="server" NavigateUrl="File_listings.aspx" title="Search" onfocus="this.blur();">Search</asp:Hyperlink>

  <asp:Hyperlink id="to_ContactUs" class="Format4_menu_items" runat="server" NavigateUrl="Contact_Us.aspx" title="Contact Us" onfocus="this.blur();">Contact Us</asp:Hyperlink>

  <asp:Hyperlink id="to_Links" class="Format4_menu_items" runat="server" NavigateUrl="Links_Resources.aspx" title="Links & Resources" onfocus="this.blur();">Links & Resources</asp:Hyperlink>


     </div>

    <div><asp:Image ID="Bottom_of_Menu"  runat="server" ImageUrl="~/new_dropdowns/bottom.png" /></div>   
</asp:Panel>


  <cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server" 
TargetControlID="Trigger1"
PopupControlID="Panelpopup"
PopupPosition="Bottom" OffsetX="11" PopDelay="35"
>
  </cc1:HoverMenuExtender>


  </div> <!-- end of Hover-menu-1 -->

================================= css ========================

#hoverMenu1 { z-index: 10; left: 693px; top: 11px; position: absolute; height: 100px; width: 175px; }

     #hoverMenu1 a
    {
       font-weight:lighter;
       text-decoration: none;
    }

    .Trigger
    { 
   background-image: url('./new_dropdowns/top_3.png');
   background-repeat:no-repeat;
   padding: 7px 0 7px 0;
   width: 145px;
   text-align: center;
    }

 #Menu_items{
 background-image: url('./new_dropdowns/filler.png');
 background-repeat: repeat-y;
 }

 #Menu_items a {
 font-weight:lighter;
 text-decoration: none;
 }

 #Menu_items a:hover {
 background: url(./new_dropdowns/hover_filler.png) 0 -32px;
 }

     .invis_panel{
 height: 0px;
 overflow: hidden;
     } 

     .show_panel{
 height: 150px;
 overflow: visible;
     }

 .Format4_menu_items {
 display: block;
 padding: 0 10px 4px 10px;
 }

So again, how would/should I go about showing the menu with it hidden (invis_panel) by default..... I know something like Panelpopup.CssClass = "show_panel" can be used from the codebehind... but I would like to trigger this after the page has loaded (so the flash doen't happen) - javascript/a timer might help there - but I would like to know of other methods and am trying to keep things simple...

Looking for an on hovering over the trigger - bit of css/js maybe - to show the panel or switch the cssclass...

I do not have an open id so thanks in advanced - as you need one to comment and accept an anwser here....

Answer 1

Merge both button states into one image and move it up and down by changing the background position. I think this might solve your problem.

Answer 2

Adding the below to the Trigger1 div seems to have done the trick for me...

onmouseover="ctl00_ContentPlaceHolder1_Panelpopup.className='show_panel'"

Thanks matpol

Answer 3

Usually setting display:none; in the CSS for the popup div (.invis_panel in this case) does the trick.