title: javascript side menu uncluttering
body: <p>I've been fixing a website of one of my friends and I need some help.
  he has a side bar that has some submenus that are ordered like this:</p>
  
  <pre><code>&lt;ul id="nav"&gt;
  &lt;div id="nav-scroll"&gt;
    &lt;li id="hasnav1"&gt;&lt;a href="#"&gt;item 1&lt;/a&gt;
      &lt;ul id="nav1"&gt;
          &lt;li&gt;&lt;a href="#"&gt;item 1-1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;item 1-2&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;item 2&lt;/a&gt;&lt;/li&gt;
    &lt;li id="hasnav2"&gt;&lt;a href="#"&gt;item 3&lt;/a&gt;
      &lt;ul id="nav2"&gt;
          &lt;li&gt;&lt;a href="#"&gt;item 3-1&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&lt;/li&gt;
    &lt;/div&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>in total there are currently 3 different hasnav id-tags and the javascript in the index is the following:</p>
  
  <pre><code>&lt;script&gt;
  $(document).ready(function(){
  $("#hasnav1").hover(function(){
  $("#nav1").stop();
  $("#nav1").show();
  $("#nav1").animate({opacity:1, left:250},500);
  },
  function(){
  $("#nav1").stop();
  $("#nav1").animate({left:"0px", opacity:0},400) }); });
  
  &lt;/script&gt;&lt;script&gt;
  
  $(document).ready(function(){
  $("#hasnav2").hover(function(){
  $("#nav2").stop();
  $("#nav2").show();
  $("#nav2").animate({opacity:1, left:250},500);
  },
  function(){
  $("#nav2").stop();
  $("#nav2").animate({left:"0px", opacity:0},400)}); });
  
  &lt;/script&gt;&lt;script&gt;
  
  $(document).ready(function(){
  $("#hasnav3").hover(function(){
  $("#nav3").stop();
  $("#nav3").show();
  $("#nav3").animate({opacity:1, left:250},500);
  },
  function(){
  $("#nav3").stop();
  $("#nav3").animate({left:"0px", opacity:0},400)}); }); &lt;/script&gt;
  </code></pre>
  
  <p>I have to find a way to merge this code into one simple script instead of in 3 different because I have to add 4 more submenus in there...</p>
  
  <p>thanks in advance.</p>