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

我试图将一个包含菜单控件的用户控件放在一起。我拥有的是一个水平导向的菜单，并使用4个GIF作为单独的菜单项，它们之间的距离大约为10px。这很简单，但我需要的是将鼠标悬停在每个gif上。即时通讯很确定菜单控件不支持图像交换悬停功能，所以即时通讯试图找到解决办法。即时猜测它会涉及一些聪明的CSS，但即时通讯完全卡住，根本无法弄清楚这一点。任何帮助？帮助在Asp.Net中设置菜单控件的样式

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

谢谢...

来源

2010-06-24 400_the_cat

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

menuItem {background-image：url（'menuItemImg.gif'）;背景位置：左中心;背景重复：不重复; } hoverItem {background-image：url（'hoverItemImg.gif'）;背景位置：左中心;背景重复：不重复; }

...

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

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

来源

2010-06-24 01:15:44 CodingGorilla

嗨，我试过你的示例代码，它不适合我。因为静态图像和悬停图像是由CSS设置，即时通讯假设我不需要设置MenuItem控件的ImageUrl属性，是对的，只是让它保持空白？当我运行我的代码时，我只是得到一个空白处，菜单应该弹出。即时猜测我的CSS是错误的： .staticMenu {background-image：url（'nav_home_original.gif'）;背景位置：左中心;背景重复：不重复; } \t \t .hoverMenu {background-image：url（'images/nav_home_rollover.gif'）;背景位置：左中心;背景重复：不重复; } – 2010-06-24 02:20:10

这是正确的，保持ImageUrl未设置。你的CSS看起来是正确的，但也许你需要检查你的url（''）的路径。你有它的方式设置它看起来像图片将在网站的根源，是正确的？此外，我没有显示的东西，您可能需要添加一些边距或填充文本，以推动他们正确的背景图像;由于图像是背景图像，因此文本可以位于其上。 – CodingGorilla 2010-06-24 12:31:08

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

来源

2010-06-24 01:40:19

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

回答

相关问题