jQuery show content using horizontal slide/animate

Question

Hi,

I have a small menu that looks like this:

---

                                            Item1  |  Item2  |  Item3

---

The menu sits inside a div and floats to the right in the div. When I hover "Item1" I would like a "sub menu" to slide out to the left of the "Item1" item.

---

                      Item 1.1 : Item 1.2 - Item1  |  Item2  |  Item3

---

It's only on "Item1" I'd like to have that function. I've searched and searched. I've found a few examples1 that probably could be configured to work the way I want. But I obviously lack those skills. My first problem is to make it slide/animate out to the left instead of to the right, and then I also don't want to slide it to a specific size as the "sub menu" will contain content with various width.

All tips/help is appreciated!

Thanks!

1 - http://www.ilovecolors.com.ar/jquery-sliding-menu/

2 - http://sandbox.ronggur.com/2009/01/25/jquery-tutorial-horizontal-animated-menu/

Answer 1

i guess your menu is in list

$('li:last').hover(function(){$('li').append(<li></li>);
$('li:last').addClass('submenu');
$('.submenu').show();
},function(){
$('.submenu').hide();
$('.submenu').removeClass('submenu');
});

now with .html(); put your content inside the popping menu

$('.submenu').html(" . . . . . . ");