在 ASP.NET 2.0 中的 MenuItems 上创建相同宽度的命中区域 包含在运行时添加的 MenuItems 的菜单
在 ASP.NET 2.0 应用程序中,我希望允许用户选择 MenuItem,即使用户没有单击 MenuItem 的实际文本,而只是单击 ASP.NET 在当前选定的 MenuItem 周围放置的突出显示区域(由 DynamicHoverStyle.BackColor 属性表示)。由于子菜单中每个 MenuItem 的 BackColor 显示相同的宽度,基于具有最长文本的 MenuItem,我想使每个子 MenuItem 的点击区域(可点击区域)具有相同的宽度(在 BackColor 区域相同) ),无论每个单独的子菜单项中显示多少文本。
这是设置。我正在使用 MasterPage 上的菜单在每个页面上显示类似的菜单。有些页面抑制此菜单,有些页面添加附加菜单项,有时添加到顶层,有时添加子菜单项到现有的顶级菜单项,有时两者都添加(添加一个菜单项到顶层,然后添加附加菜单项)作为新添加的顶层的子菜单。
该菜单具有水平方向,并且是动态的,因为最初仅公开顶层,并且在选择时显示子菜单,
我们注意到用户会选择一个。顶级菜单项显示子菜单,然后选择一个子菜单项,但不一定要单击子菜单项文本,而是单击子菜单项的背景颜色区域,因为某些菜单项的文本比其他菜单项长。具有短文本的菜单项具有相当大的背景色区域,当用户单击背景色区域但不是直接单击菜单项文本时,不会发生任何事情,因为用户实际上并未单击子菜单项点击区域。
尽管有关于显示的 MenuItem 的哪一部分可单击的视觉提示(当鼠标位于 MenuItem 文本上时,鼠标指针变为链接光标,但当鼠标仅悬停在 BackColor 上时则不会),但这种行为使用户。他们突出显示一个菜单项,然后单击它,但什么也没发生。
我想让单击 MenuItem 成功,即使用户没有单击 MenuItem 的实际文本,而只是单击 BackColor 区域。
似乎应该有一个属性来控制显示的菜单项的活动区域的宽度,但我没有看到它。鉴于我在运行时创建其中一些菜单项,有什么建议吗?
In an ASP.NET 2.0 application, I want to permit a user to select a MenuItem, even if the user does not click the actual text of the MenuItem, but instead only clicks the highlight area that ASP.NET places around the currently selected MenuItem (represented by the DynamicHoverStyle.BackColor property). Since the BackColor is displayed the same width for each MenuItem in a submenu, based on MenuItem with the longest text, I would like to make the hit-zone (clickable area) of each sub-MenuItem the same width (same at the BackColor area), regardless of how much text is displayed in the in each individual sub-MenuItem.
Here's the setup. I am using a Menu on a MasterPage to display a similar menu on each of my pages. Some of the pages suppress this menu, and some of them add addition MenuItems, sometimes to the top level, sometimes adding sub-MenuItems to an existing top-level MenuItem, and sometimes both (adding a MenuItem to the top level and then additional MenuItems as submenuitems to that newly added top level.
This menu has a horizontal orientation, and it is dynamic, in that only the top level is initially exposed, and the submenus are displayed when selected.
During usability testing, we noticed that users would select a top-level menu item to expose the submenu, and then select a submenu item, but not by necessarily clicking on the submenu item text, but instead clicking on the BackColor area of the submenu item. Since the text of some MenuItems are longer than others, MenuItems with short Text have a rather large BackColor area. When the user clicks on the BackColor area, but not directly on the MenuItem Text, nothing happens, since the user didn't actually click on the submenu item hit zone.
Although there are visual cues as to what part of the displayed MenuItem is clickable (the mouse pointer changes to a link cursor when the mouse is positioned on the MenuItem Text, but not when it is only hovering over the BackColor), this behavior confused the users. They highlighted a MenuItem, and clicked it, but nothing happened.
I would like to make clicking a MenuItem successful, even if the user did not click on the actual Text of the MenuItem, but simply click on the BackColor area.
It seems like there should be a property somewhere to control the width of the active area of the displayed MenuItems, but I do not see it. Any suggestions, given that I am creating some of these MenuItems at runtime?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
添加了CSS类:
.MenuClickArea {宽度:100%;显示:块;}
并将该类分配给母版页 aspx 中相关菜单的 DynamicMenuItemStyle 和 StaticMenuItemStyle
似乎可以解决问题。
Added css class:
.MenuClickArea {width: 100%; display: block;}
and assigned that class to the DynamicMenuItemStyle and StaticMenuItemStyle of the menu in question in the master page aspx
seems to do the trick.