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

Question

<分区>

Answer 1

从不同的 Angular 来看这个问题似乎会容易得多。与其使用 sprite 来达到预期的结果，不如从 javascript 的 Angular 来看待它……你已经成功了一半!

1. 从您良好、干净的 UL 列表开始。身材还不错，不过 需要一些格式调整:

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

简而言之，每次您需要另一个嵌套元素时，在您的 li 中放入一个列表。放弃点击和其他“额外”，Superfish 会为您做到这一点。

1. 添加Superfish到您的页面并在 UL 列表中调用它

   $(document).ready(function(){
       $("ul.menu").superfish();
   });
   

2. 在 <li> 上使用 CSS 设置背景元素。

3. 使用 JqueryUI 为所需元素设置圆 Angular 。为左下角添加类“ui-corner-bl”，为右下角添加类“ui-corner-br”等。

4. 通过 CSS 调整悬停

我前段时间使用了这个解决方案来替换一个与您正在处理的菜单类似的非常糟糕的菜单。菜单有很多行为——尤其是当它们像我的网站那样巨大且嵌套时——所以它们需要耐心。但是，此解决方案将使您更容易维护，就像其中一个菜单项发生变化一样，您只需在代码中更改它，而不是使用图形。仅此一项就可以增加时间。此外，由于要下载的内容更少，您的速度会有所提高。