应用于 YUI 菜单栏的正确 CSS 是什么？

Question

我试图找出使用 CSS sprites 作为 YUI 菜单控件。

我有一个带有以下 CSS 的 CSS 精灵：

.navImg0{width:61px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-0px -0px;}
.navImg0:hover{width:61px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-0px -23px;}
.navImg1{width:75px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-65px -0px;}
.navImg1:hover{width:75px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-65px -23px;}
.navImg2{width:96px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-144px -0px;}
.navImg2:hover{width:96px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-144px -23px;}
.navImg3{width:65px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-244px -0px;}
.navImg3:hover{width:65px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-244px -23px;}
.navImg4{width:98px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-313px -0px;}
.navImg4:hover{width:98px;height:23px;background-repeat:no-repeat;background-position:top left;background-image:url('/dynamicimage/navigation');background-position:-313px -23px;}

如何将其应用到 YUI 菜单？

到目前为止，我已经将 navImg0、navImg1 等样式应用于按钮。

它们出现在正确的位置，但有一些问题：

• 项目之间有线条，
• 当我滚动按钮时，我需要理想的方式来删除它们，正确的滚动可以工作，但是如果我从菜单滚动到主菜单上屏幕的一部分按钮消失，
• 每个顶级项目的
• 下的 标签不起作用（里面不再有文本）。

他们有很多关于应用 CSS 的文档，但我找不到任何关于如何使用 CSS Sprites 作为图像的示例。

Answer 1

您能提供一个您所遇到的问题的实例吗？ 仅根据 CSS 片段很难进行调试。

与你的问题无关，但你可以让你的CSS更小& 通过组合每次重复的规则，更容易维护。 就像是

.navImg0, 
.navImg0:hover, 
.navImg1, 
.navImg1:hover, 
.navImg2, 
.navImg2:hover, 
.navImg3, 
.navImg3:hover, 
.navImg4, 
.navImg4:hover { background: url('/dynamicimage/navigation') no-repeat top left; }


.navImg0{width:61px;height:23px;background-position:-0px -0px;}
.navImg0:hover{width:61px;height:23px;background-position:-0px -23px;}
.navImg1{width:75px;height:23px;background-position:-65px -0px;}
.navImg1:hover{width:75px;height:23px;background-position:-65px -23px;}
.navImg2{width:96px;height:23px;background-position:-144px -0px;}
.navImg2:hover{width:96px;height:23px;background-position:-144px -23px;}
.navImg3{width:65px;height:23px;background-position:-244px -0px;}
.navImg3:hover{width:65px;height:23px;background-position:-244px -23px;}
.navImg4{width:98px;height:23px;background-position:-313px -0px;}
.navImg4:hover{width:98px;height:23px;background-position:-313px -23px;}

Answer 2

1：听起来像是边距/填充问题。 检查 a 和 li 标签上的边距和填充。

2：我从来没有听说过回滚时会发生这种情况。 您使用的图像是动态的吗？ 在 CSS 中，看起来您正在使用一些服务器端代码动态创建它。 这可能是问题所在，也可能是某种缓存问题。 没有把握。

3：您的精灵表中显示的内容是否已有文本？ 通常这就是它在精灵表中的工作方式，因此您通常会隐藏文本。 如果您仍然需要此文本，请检查某些将 a 标记设置为 display: none 的 css。 它也可能在 YUI javascript 中，我对 YUI 不是很熟悉。 ;)

Answer 3

我有几个使用精灵的 YUI 菜单，但这有点棘手。

如果您从标记构建，则很简单 - 只需在锚标记中添加 css 类名称即可。 如果您从 JavaScript 构建菜单，则必须在渲染菜单后添加该类。

YAHOO.util.Dom.addClass(theAnchorElemnt, 'the-sprite-css-class');

尽管 YUI 提供了类名配置属性，但它不是您想要的。 您需要在锚点处应用精灵。

希望有帮助。