javascript - 创建弹出菜单/侧边栏菜单时出现问题

Question

我需要一些 CSS 和语法方面的帮助。热烈欢迎您的帮助。

我想插入一个包含一些 skype 链接的列表，当我将鼠标移到图像上时，它的行为类似于侧边栏菜单。 这是我试图操作的 html 代码:

<a href="?USER=name">
    <img src="../../name.jpg?format=raw" title="full name - skypename">
</a>

将鼠标移到图片上，图片标题是 skypename，这两个链接应该向右淡出(float:right;?)

    $("img[title$=\"skypename\"]").mouseover(function(){
      $("<ul><li><a href=\"callto://skypename\">Call</a></li><li><a href=\"mailto://skypename\">Chat</a></li></ul></li></ul>");
    });

我的目标是让 html 代码看起来像:

<ul>
  <li>
    <a href="?USER=name">
      <img src="../../name.jpg?format=raw" title="full name - skypename" alt="Klick me!">
    </a>
    <ul>
      <li><a href="callto://skypename">Call</a></li>
      <li><a href="mailto://skypename">Chat</a></li>
    </ul>
   </li>
</ul>

我创建了一个 fiddle http://jsfiddle.net/erhDJ/2/我在哪里试过某事像弹出菜单一样工作。 在我的例子中，我上面提到的第一个代码将替换 Klick me!。 通过将鼠标移到它上面，两个链接应该向右淡出。

我的问题: 我怎样才能用第二个代码包围第一个代码，使其看起来像第三个代码片段？ 您是否看到创建此类弹出菜单的更简单选项？

谢谢。

Answer 1

我不太确定你到底想要什么，但我可以给你一个使用一些 CSS 和 jQuery 动画菜单的例子。

Sliding, animated menu when hovering link

这有用吗？