带有JQuery的菜单中的CSS Sprites问题

我已经获得了一个由其他人拥有的代码库。我有一个紧迫的期限，我一直在这个问题上旋转我的轮子。此代码正在页面顶部使用一个表格。该表有一个下拉菜单。由于品牌需求，菜单由CSS精灵组成。每个根项目（“家”，“约”，“服务”）都是不同的大小。每个菜单的子项目大小一致。带有JQuery的菜单中的CSS Sprites问题

菜单呈现精致有两个例外：

在IE 9，菜单看起来很好。在Chrome中（我怀疑其他浏览器），根项目（“home”，“about”，“services”）在鼠标移动时更改大小。大小的这种改变会导致主图像文件中的下一个图像的一部分出现。我只想要我需要出现的根项目图像。
菜单似乎从单元格的垂直中间下拉。我只想要菜单出现。目前，它是动画。我如何让它出现？

来源

2011-04-01 user687554

一个观察：你应该决定以一种方式做你的事件处理程序绑定。既然你使用jQuery，那将是一个不错的选择。 – Pointy 2011-04-01 13:30:38

另外，您还有两次定义的“itemOver”功能;其中一个应该是“itemOut”，对吧？这真的是你所有的CSS？没有任何地方提到带有“h”或“d”后缀的类。 – Pointy 2011-04-01 13:34:04

对不起。我现在将修复代码。这个问题可以在你的浏览器中看到：http://68.71.136.106/problem.htm谢谢你看这个问题。 – user687554 2011-04-01 13:42:06

看起来好像从另一个角度看待这个问题要容易得多。而不是使用精灵来达到预期的效果，那么从javascript的角度来看待它呢......你已经到了一半了！

从您良好，干净的UL列表开始。这是在非常良好的状态，但它将需要一点点格式扭捏：

<ul id='menu'> <li><a href="#aa">Home</a></li> <ul> <li class="current"><a href="/About/News.aspx">News</a></li> <li><a href="/About/Mission.aspx">Mission Statement</a></li> </ul> </li> ... </ul>

概括地说，每次你需要另一个嵌套元素的时候，把你的李内的列表。放弃onclicks和其他“额外”Superfish将为您做到这一点。

添加Superfish到您的网页，并使用在<li>元素的CSS调用它的UL名单上
```
$(document).ready(function(){ 
    $("ul.menu").superfish(); 
}); 
```
设置背景。
使用JqueryUI设置圆角到所需的元素。添加类 “UI角-BL” 的左下方， “UI角-BR” 的右下角，等
调整通过CSS悬停

我去了这个解决方案，同时返回来替换一个很差的菜单，类似于你正在处理的内容。菜单有很多行为 - 特别是当它们很大并且嵌套在我的网站中时 - 所以它们需要耐心。然而，这种解决方案会为您提供更轻松的维护，就像其中一个菜单项发生更改一样，您只需在代码中更改它，而不是使用图形。单靠这一点就可以获得数小另外，由于下载量较少，您将获得一些速度。

来源

2011-04-01 14:32:42 bpeterson76

哇。问题是一个缺失的分号！

来源

2011-04-01 16:54:46 user687554

这就是为什么你应该发布代码示例。 – 2011-04-01 18:49:20

带有JQuery的菜单中的CSS Sprites问题

回答

相关问题