jQuery - change css of links as they move to far left of nav menu on click

Question

This is my first time asking anything but I'm stuck and I hope i explain clearly what I'm trying.

I have a nav menu that if a link is clicked it (that choice) moves to the far left spot of the menu. Whatever menu option is clicked and in the far left spot i just want the font larger and the color Orange. The next option that clicked needs to go in the left spot and have its font larger and color Orange while the other options go back to small and white.

I'd also like the remaining menu options to stay in the same order that they start in if they are not the choice in that far left spot. I want my sub-menu's to eventually look and work the same way.

Here is my code:

HTML:

    <div>
       <ul id="main-top">
          <li id="blank"><a href="#" ></a></li>
          <li><a href="#" id="proj1" class="mainNav">Projects</a></li>
          <li><a href="#" id="serv1" class="mainNav">Services</a></li>
          <li><a href="#" id="cont1" class="mainNav">Contact</a></li>
          <li><a href="#" id="client1">Sign-in</a></li>
       </ul>
    </div>

CSS:

body {
background: black;
color: white;
}

#main-top {
position: absolute;
top: 75px;
border-top: 1px solid #ffffff;
width: 850px;
}

#main-top li{
display: inline;
list-style-type:none;
padding-right: 20px;
padding-bottom: 16px;
border-right: 1px solid #ffffff;
height: 50px;
}

a {
color: white;
font-size: 1em;
padding: 10px 75px 5px 3px;
text-decoration: none;
list-style-type: none;
}

a:hover{
color: #FF4500;
}

jQuery:

$('li').click(function() {
   var $this = $(this);
   $this.insertBefore($this.siblings(':eq(0)'));
   $('#blank').hide();
});

demo: http://jsfiddle.net/CLTZs/

I've tried just adding a function to alter the css of the first-child, but it targets that blank spot and not what goes into it.

Answer 1

Just so i don't leave this question out there not fully answered - I was able to get the desired effect by using your suggestion @Vector and adding a little bit to get the li's back to original look:

$('li').click(function() {
  var $this = $(this);
  $this.insertBefore($this.siblings(':eq(0)'));
  $this.toggleClass('active');
  $this.siblings().removeClass("active");
  $('#blank').hide();
});

and adding the class "active" to my CSS:

.active a{
color: #FF4500;
font-size: 25px;
font-weight: bold;
margin: 0;
}

Since i have other jquery toggles going on with those menu options, I was able to insert that jquery right into my existing function and it work fine. For some reason it throws off my spacing on the rest of the list, but I'll have to figure that out in my css files.

fiddle: http://jsfiddle.net/CLTZs/2/

Answer 2

You could addClass within your function

DEMO http://jsfiddle.net/CLTZs/1/

jQuery

$('li').click(function() {
    var $this = $(this);
    $this.insertBefore($this.siblings(':eq(0)'));
    $this.addClass('firstOpt');
    $('#blank').hide();
});

CSS

#main-top li.firstOpt a {
    color: #FF4500;
    font-size: 25px;
    font-weight: bold;
}