Question

I want a JQuery menu can any one tell me the code.

I want to make an animated menu placed on right, using jQuery

how it will work:
if i click on a menu (example: ABOUT US) the menu/ the ABOUT US text will moving to HOME and HOME is moving to CONTACT US

so basicly the menu is rotated to left and the selected menu is placed on the center with bigger font.

It should looks like this

===============================================================================

Code Goes here

<link href="style.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>


<div id="navigation" align="right">
    <ul>
        <li><a href="#">About us</a></li>
        <li><a href="#">Project</a></li>
        <li id="red"><a href="#">Home</a></li>
        <li><a href="#">Our Team</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</div>

And the CSS goes here style.css

body{
font-family: arial;
font-size: 13px;
background: #c9c9c9;}
.clear{
display: block;
clear: both;}
 #wrap{
background: white;
width: 960px;
height:400px;
margin: auto;
padding:10px;}
.text{
padding: 10px;
border: 1px solid #E6E1C8;
background: #F3DDA6;}
 #red{
    background:#069;}
 #navigation{
width: 200px;
float: right;}
 #navigation ul{
list-style: none;}
 #navigation ul li{
height: 30px;
border-bottom: 1px dotted #ccc;}
 #navigation ul li a{
text-indent: 20px;
padding: 5px 0;
display: block;
height: 20px;
text-decoration: none;
color: #434343;
/*background-image: url(bull.png);*/
background-repeat: no-repeat;
background-position: 5px 6px ;
font-weight:bold;}
 #navigation ul li a:hover{
/*background-color: #8E8963;
background-image: url(bull.png);*/
background-repeat: no-repeat;
background-position: 15px 6px ;
/*color: white;*/}
 #footer{
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
text-align: center;}
 #footer img{
border: none;}

And the JQUERY goes here menu.js

   $(document).ready(function(){
   var Duration = 150; 

   $('#navigation ul li a').hover(function()
   {
     $(this).animate({ paddingRight: '20px' }, Duration);
      }, 
     function() {
      $(this).animate({ paddingRight: '0px' }, Duration);           
      });
    });
    

Answer 1

Here is some suggestion for this problem.
I hope you can have the solution from this.

Please make the following changes to your list.

<li><a href="#">About us</a></li>
<li><a href="#">Project</a></li>
<li id="red"><a href="#" id="middle">Home</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#" id="last">Contact Us</a></li>

and add the following js to your page:

$('#navigation ul li a').click(function () {

    var currentId = $(this).attr('id');

    if (currentId == 'middle') { 
        return false; 
    } else {
        var Ltext = $('#middle').text(); 
        $('#middle').text($(this).text()); 
        $(this).text($('#last').text()); 
        $('#last').text(Ltext);
    }
});