帮助在 Asp.Net 中设置菜单控件的样式答案

【问题标题】：Help styling a menu control in Asp.Net帮助在 Asp.Net 中设置菜单控件的样式
【发布时间】：2010-06-24 01:02:42
【问题描述】：

我正在尝试将包含菜单控件的用户控件放在一起。我所拥有的是一个水平方向的菜单，并使用 4 个 gif 作为单独的菜单项，它们之间的间距约为 10px。到目前为止很容易，但我需要的是在悬停时交换每个 gif。我很确定菜单控件不支持悬停时图像交换功能，所以我试图找到解决方法。我猜它会涉及一些聪明的CSS，但我完全卡住了，根本无法弄清楚。有什么帮助吗？

这里的问题是：我被要求将菜单放在用户控件中，然后在母版页中注册。这有什么好处吗？为什么不将菜单编码到母版页而不是单独的用户控件中？

谢谢...

【问题讨论】：

标签： asp.net css

【解决方案1】：

我建议使用两种 CSS 样式。在您的第一个样式中，您可以为非悬停状态设置背景图像。在第二种样式中，您将使用背景图像作为悬停状态。然后，您可以使用 MenuItemStyles 和 HoverMenuItemStyles。下面是一些快速示例代码：

menuItem { 背景图像： url('menuItemImg.gif');背景位置：左中；背景重复：不重复； } hoverItem { 背景图片： url('hoverItemImg.gif');背景位置：左中；背景重复：不重复； }

...

<asp:Menu ID="menu1" runat="server" StaticMenuItemStyle-CssClass="menuItem" StaticHoverStyle-CssClass="hoverItem">
    <Items>
      ...
    </Items>
</asp:Menu>

如果您使用动态项目，您可能需要切换到 DynamicMenuItemStyle 等。

【讨论】：

嗨，我尝试了您的示例代码，但它对我不起作用。由于静态图像和悬停图像是由 css 设置的，我假设我不需要设置 MenuItem 控件的 ImageUrl 属性，对吗，只需将其留空即可？当我运行我的代码时，我只得到一个应该弹出菜单的空白区域。我猜我的 CSS 是错误的：.staticMenu { background-image: url('nav_home_original.gif');背景位置：左中心；背景重复：不重复； } .hoverMenu { 背景图片： url('images/nav_home_rollover.gif');背景位置：左中心；背景重复：不重复； }
没错，不要设置 ImageUrl。您的 CSS 看起来是正确的，但也许您需要检查 url('') 上的路径。您设置它的方式看起来图像将位于站点的根目录中，对吗？另外，我没有显示的内容，您可能需要在文本中添加一些边距或填充，以将它们直接推过背景图像；由于图像是背景图像，因此允许文本位于其顶部。

【解决方案2】：

您可以做的是将提到的编码大猩猩方法与CSS Sprites结合起来。我之所以这么说是因为如果您只是在用户第一次将鼠标悬停在菜单项上时替换图像，他们将不得不等待第二张图像加载，因此它不会顺利过渡。使用CSS Sprites Technique，您可以加载包含非悬停和悬停状态的图像，并且只需更改图像的位置，从而使体验更加流畅。

【讨论】：