Question

在计算机上使用鼠标悬停时会弹出默认ASP菜单。在现代触摸系统上可能会出现问题。在移动应用程序上，鼠标悬停不存在，如果用户点击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

Answer 1

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

 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>

Answer 2

您可以尝试使用Modernizr来检测触摸屏设备。 http://modernizr.com/ 您可以覆盖下拉菜单样式以停止隐藏它。

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

您也可以在js中使用触摸检测：

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

Answer 3

由于页面的post back，菜单可能会消失

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

ASP菜单消失

3 个答案: