problems in creating a flyout/sidebar menu

Question

Hello all,

I need some css and syntax help,please. Your help is warmly welcome.

I want to insert a list containing some skypelinks and behaving like a sidebar menu when I move the mouse over the image. This is the html-code I tried to manipulate:

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

By moving the mouse over the image and the images title is skypename the two links should fade out to the right(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>");
    });

My aim is to let the html-code look like:

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

I created a fiddle http://jsfiddle.net/erhDJ/2/ where I tried sth. to work like a flyout menu. In my case the first code I mentioned above would be replacing Klick me!. By moving the mouse over it the two links should fade out to the right.

My questions: How can I surround the first code with the second so that it looks like the third code snippet? Do you see an easier option to create such a flyout menu?

Thank you.

Answer 1

I'm not too sure about what you actually want, but I can give you an example of animating menu's with some CSS and jQuery.

Sliding, animated menu when hovering link

Is this useful?