JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/ui-lightness/jquery-ui.css">
<div id="main">  
    <div id="menu-wrapper">
        <ul id="menu">
            <li id="project"><a href="#">project</a></li>
            <li id="code"><a href="#">code</a></li> 
            <li id="skill"><a href="#">skill</a></li>
            <li id="about"><a href="#">about</a></li>
            <li id="contact"><a href="#">contact</a></li>
        </ul>
        <div id='breakline'> </div>
    </div> <!-- menu wrapper -->

CSS

#breakline
{
    width:580px;
    height:100px;
    background-image:url('breakline.png');
    background-repeat:no-repeat;
    float:left;
    border:1px solid black;
}

JavaScript

function breakline(position) {
    $('#breakline').animate({  
        top:position},'slow'); 
};


$('#project a').click(function(){
    breakline(256);
});

$('#code a').click(function(){
    breakline(200);
});

$('#skill a').click(function(){
    breakline(236);
});

$('#about a').click(function(){
    breakline(190);
});

$('#contact a').click(function(){
    breakline(200);
});