ASP菜单消失

鼠标悬停在电脑上时弹出默认ASP菜单。在现代触摸系统中，这可能是个问题。在移动端app中，鼠标悬停不存在，如果用户点击ASP菜单，菜单会弹出，但在用户选择菜单子项之前就消失了。

如何让触摸屏用户与ASP菜单工作?

<body>
    <form id="form1" runat="server">
        <div>
            <asp:Menu ID="cmbMyAccount" runat="server" Orientation="Horizontal" DisappearAfter="5000">
                <Items>
                    <asp:MenuItem Text="My Account" Value="My Account" Selectable="False">
                        <asp:MenuItem Text="My Orders" Value="My Orders" NavigateUrl="~/MyOrders/index.aspx" />
                        <asp:MenuItem Text="Wish List" Value="Wish List" NavigateUrl="~/MyOrders/WishList.aspx" />
                        <asp:MenuItem Text="My Profile" Value="My Profile" NavigateUrl="~/MyProfile/index.aspx" />
                    </asp:MenuItem>
                </Items>
            </asp:Menu>
        </div>
    </form>
</body>

实时演示:http://www.fscan.com/temp/ButtonTest.aspx

我发现最简单的方法是将菜单项设置为可选择的:

 Selectable="True" NavigateUrl="../Contact/index.aspx"

整个菜单是这样的:

<asp:Menu ID="cmbContact" runat="server" CssClass="NoUnderLine" Orientation="Horizontal" DisappearAfter="5000">
                        <StaticMenuItemStyle ForeColor="#FDFDFD" CssClass="LightText" />
                        <DynamicMenuStyle BackColor="#DFDFDF" />
                        <DynamicMenuItemStyle ForeColor="#202020" CssClass="SelectionItem " />
                        <DynamicHoverStyle BackColor="#ADD8E7" />
                        <Items>
                            <asp:MenuItem Text="Contact" Value="Contact" Selectable="True" NavigateUrl="../Contact/index.aspx">
                                <asp:MenuItem Text="Ticket Service" Value="Ticket Service" NavigateUrl="../ContactTicket/index.aspx"></asp:MenuItem>
                                <asp:MenuItem Text="Phone Service" Value="Phone Service" NavigateUrl="../Contact/index.aspx#phone"></asp:MenuItem>
                                <asp:MenuItem Text="Email" Value="Email" NavigateUrl="../Contact/index.aspx#email"></asp:MenuItem>
                            </asp:MenuItem>
                        </Items>
                    </asp:Menu>

您可以尝试Modernizr来检测触摸屏设备。http://modernizr.com/然后你可以重写下拉菜单样式来停止隐藏它。

.touch #cmbMyAccount:hover ul.dynamic { display:block !important; }

你也可以在js中使用触摸检测:

if (Modernizr.touch) { 
    // Sys.WebForms.Menu function override
}

菜单可能因为页面的post back而消失

只需将主菜单项的navigateURL属性设置为"javascript:return false;"，这样页面就不会post back，您的下拉菜单也不会消失。

相关内容

最新更新

热门标签：