創建彈出菜單/側邊欄菜單的問題

Question

我需要一些css和語法幫助。您的幫助受到熱烈歡迎。

我要插入含有部分skypelinks和行爲像一個工具欄菜單列表，當我將鼠標移動到圖片。 這是HTML代碼我試圖操縱：

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

通過在圖像上移動鼠標和圖像標題是Skypename，敲擊兩個鏈路應該淡出向右（浮動：右;？）

    $("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> 

我創建了一個小提琴http://jsfiddle.net/erhDJ/2/，我試着做某事。像飛出菜單一樣工作。 在我的情況下，我上面提到的第一個代碼將取代Klick我！ 通過將鼠標移到它上面，兩個鏈接應該淡出到右側。

我的問題： 我怎麼能圍繞第一代碼與第二，這樣它看起來像第三代碼段？ 您是否看到更簡單的選項來創建此類彈出式菜單？

謝謝。

Answer 1

我不太清楚你真正想要的，但我可以給你動畫菜單的一些CSS和jQuery的例子。

Sliding, animated menu when hovering link

這是有用的？