Question

我最近继承了一个带有Web应用程序的代码库。这个应用程序有一个使用TABLE元素和一些JQuery构建的菜单。该代码不能像它应该的那样工作。菜单表现得很奇怪。无论如何，现有代码如下所示：

<table border='0' cellpadding='0' cellspacing='0' style="width:500px;">
  <tr>
    <td id="home" class="homeA" onclick="return navto('/home.html');">&nbsp;</td>
    <td id="about" class="aboutA">
      <div class="menu">
        <ul class="aboutMenu">
          <li class="usA" onmouseover="hoverOver(this);" onmouseout="hoverOut(this);" onclick="return navto('/AboutUs.html');">&nbsp;</li>
          <li class="teamA" onmouseover="hoverOver(this);" onmouseout="hoverOut(this);" onclick="return navto('/team.html');">&nbsp;</li>
          <li class="contactA" onmouseover="hoverOver(this);" onmouseout="hoverOut(this);" onclick="return navto('/contact.php');">&nbsp;</li>
        </ul>
      </div>
    </td>
    <td id="teams" class="teamsA">
     <div class="menu">
       <ul class="teamsMenu">
         <li class="team1A" onmouseover="hoverOver(this);" onmouseout="hoverOut(this);" onclick="return navto('/Teams/Team1.html');">&nbsp;</li>
         <li class="team2A" onmouseover="hoverOver(this);" onmouseout="hoverOut(this);" onclick="return navto('/Teams/Team2.html');">&nbsp;</li>
       </ul>
     </div>
   </td>
</table>

我想用DIV替换这个表。虽然我喜欢它，但我想使用更好的JQuery菜单控件。我的挑战是，我需要使用精灵。每个菜单标题以及菜单中的每个项目都表示为图像。当用户将鼠标悬停在某个项目上时，图像会发生变化。这引出了以下问题：

在使用精灵的同时，我可以使用哪种菜单控件？或者，任何人都可以解释如何使用JQuery和sprites创建菜单吗？

谢谢！

Answer 1

如果你想使用精灵，你不需要依赖jQuery。 CSS事件悬停/活动应该可以解决问题。

但如果你真的想使用jQuery，这个链接将帮助你： http://net.tutsplus.com/tutorials/html-css-techniques/use-sprites-to-create-an-awesomeness-filled-navigation-menu/

精灵的JQuery菜单

1 个答案: