Problèmes lors de la création d'un menu déroulant/barre latérale

Question

J'ai besoin d'aide CSS et de syntaxe, s'il vous plaît. Votre aide est la bienvenue.

Je souhaite insérer une liste contenant des liens de type skype et se comporter comme un menu de barre latérale lorsque je déplace la souris sur l'image. C'est le code html j'ai essayé de manipuler:

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

En déplaçant la souris sur l'image et le titre des images est SKYPENAME les deux liens devraient disparaître à droite (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>"); 
    });

Mon but est de laisser le look code html comme:

<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> 

J'ai créé un violon http://jsfiddle.net/erhDJ/2/ où j'ai essayé STH. pour travailler comme un menu flyout. Dans mon cas, le premier code que j'ai mentionné ci-dessus remplacerait Klick moi !. En déplaçant la souris dessus, les deux liens devraient disparaître vers la droite. Mes questions: Comment puis-je entourer le premier code avec le second pour qu'il ressemble au troisième extrait de code? Voyez-vous une option plus facile de créer un tel menu déroulant?

Merci.

Answer 1

Je ne suis pas sûr de ce que vous voulez vraiment, mais je peux vous donner un exemple d'animation de menus avec des CSS et jQuery.

Sliding, animated menu when hovering link

Est-ce utile?