Question

我有一个添加了HoverMenuExtender的面板，以便生成一种下拉菜单，我的问题是，当页面加载时，您可以一瞥菜单中的链接。

在页面加载时克服菜单项闪烁的任何提示？

<!--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">
  <!-- css invis_panel by default - to stop it flashing/showing on page load -->

  <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;
 }

再说一遍，默认情况下，如何显示隐藏的菜单（invis_panel）？

我知道Panelpopup.CssClass = "show_panel"之类的东西可以在代码隐藏中使用，但是我希望在页面加载后触发这个（因此闪存不会发生） - javascript或计时器可能有帮助 - 但是我想知道其他方法，并试图保持简单。

寻找悬停在触发器上的位 - 可能是css / js的位 - 显示面板或切换cssclass。

Answer 1

将两个按钮状态合并为一个图像，并通过更改背景位置来上下移动它。我认为这可以解决你的问题。

Answer 2

将以下内容添加到Trigger1 div似乎已经为我做了诀窍......

onmouseover="ctl00_ContentPlaceHolder1_Panelpopup.className='show_panel'"

Answer 3

通常在CSS中为弹出div设置display:none;（在本例中为.invis_panel）就可以了。

使用HoverMenuExtender闪烁菜单项

3 个答案: