I've been tackling a challenge with designing a navigation bar that consists of 3 items. The goal is to have the clicked item move to the center position on the horizontal navbar while re-arranging the order. Here's the code snippet I've come up with so far:
$('li').mousedown(function(e){
$('li').addClass('flanking');
$(this).removeClass('flanking');
$('ul li:eq(0)').after($(this));
if( $(this) == '(ul li:eq(0)' ){
$('ul li:eq(2)').prependTo('ul');
};
});
Although this code successfully handles rearranging the second and last list items when clicked, it fails to do so for the first item. In an attempt to address this issue, I tweaked the if statement as follows:
if( $(this) == $('ul li:eq(0)') ){
$('ul li:eq(2)').prependTo('ul');
};
Unfortunately, this adjustment didn't yield the desired result either. Could someone offer insights on how to identify if the clicked 'li' corresponds to the first in the 'ul', thus enabling its relocation to the middle? Your assistance is greatly appreciated.
Update: Check out Jaak Kütt's answer for a scalable solution along with a functional demo, Gokhan Arik's use of eq method and correct syntax for the if statement, and Birrel's impressive animation effects.