Rotate li items with jquery...

Question

Hi all,

I have a UL list like:

<ul>
  <li>menu1</li>
  <li>menu2</li>
  <li>menu3</li>
  <li>menu4</li>
  <li>menu5</li>
</ul>

I want to use this list as a animated JQuery menu. Setup in such a way that if a user clicks menu3 it becomes the first item in the list as menu1 and menu2 get appended to the end.

So after clicking on menu3 the ul would look like this:

<ul>
  <li>menu3</li>
  <li>menu4</li>
  <li>menu5</li>
  <li>menu1</li>
  <li>menu2</li>
</ul>

Any guidance or suggestions would be greatly appreciated.

Answer 1

You may want to check out the solution by No Surprises found in this SO question. Looks like the OP was looking to do exactly what you want to do.

Answer 2

You could do something like this:

$("li").click(function() {
    var prev = $(this).prevAll();
    $.unique(prev).slideUp(function() {
        $(this).appendTo(this.parentNode).slideDown();
    });
});​​​

Give it a try here, the $.unique() call is because the elements from .prevAll() are in reverse order...and for appending to the end, we want them in document order.