title: slide left and slide right using jquery
body: <p>Hi friend m trying to make a menu bar which will slide to left or right. This navigation bar is controlled by two arrow if user mouse over on the right arrow then the navigation will move right to left till the end and when it reach its last point so it will be stop. Same thing will happen  when user mouse over on left arrow the navigation will move left to right and when its reach last point then it will stop sliding</p>
  
  <p>I don't know how to assemble all the things together please check fiddle here <strong><a href="http://jsfiddle.net/DdkLS/" rel="nofollow">http://jsfiddle.net/DdkLS/</a></strong></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="nav"&gt;
    &lt;div class="arrowLeft"&gt;&lt;&lt;/div&gt;
    &lt;div class="arrowRight"&gt;&gt;&lt;/div&gt;
    &lt;div&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Customer&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;why us&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Customer&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;why us&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Customer&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;why us&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Customer&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;why us&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Customer&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;why us&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Customer&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;why us&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>* {
      margin: 0;
      padding: 0;
  }
  .nav {
      width: 940px;
      margin: 10px auto 0 auto;
      padding: 15px 25px;
      background: #C00;
      position: relative;
  }
  .nav .arrowLeft {
      position: absolute;
      left: 10px;
      top: 22px;
      cursor: pointer;
  }
  .nav .arrowRight {
      position: absolute;
      right: 10px;
      top: 22px;
      cursor: pointer;
  }
  .nav div {
      overflow: hidden;
      position: relative;
      height: 23px;
  }
  ul {
      position: absolute;
      left: 0;
      width: 100%;
      top: 0;
  }
  li {
      float: left;
      list-style: none;
      float: left;
  }
  li a {
      text-decoration: none;
      color: #fff;
      padding: 8px 12px;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
      font-weight: bold;
  }
  </code></pre>
  
  <p><strong>SCRIPT</strong></p>
  
  <pre><code>var leftMove = 0;   
          var rightMove = 0;  
          var leftValue = $('.nav').find('ul').css('left');           
          var rightValue = $('.nav').find('ul').css('right'); 
          var rightNumeric = parseInt(rightValue);
          var leftNumeric = parseInt(leftValue);
          alert(rightNumeric);
  
      $('.arrowLeft').mouseenter(function(){              
          setInterval(function(){
              if(rightNumeric &lt; 0)
              {
                  leftMove = leftMove+10;
                  $('.nav ul').animate({left : '-'+leftMove+'px'},1);     
  
              }
              if(rightNumeric &gt; 0)
              {
  
                  $('.nav ul').css('left','-'+rightNumeric+'px');     
  
              }
          },1)
  
  
          })
  
          $('.arrowRight').mouseenter(function(){             
          setInterval(function(){
              if(leftNumeric &lt; 0)
              {
                  leftMove = leftMove+10;
                  $('.nav ul').animate({left : ''+leftMove+'px'},1);      
  
              }
              if(rightNumeric &gt; 0)
              {
  
                  $('.nav ul').css('left',''+rightNumeric+'px');      
  
              }
          },1)
  
  
          })
  </code></pre>
  
  <p>Please help me guys .. Thanks in advance..:)</p>