title: Javascript Menu Selection
body: <p>New to coding, please help me out. I have a sliding code for a vertical nav. When the user hovers over the nav, it slides out to the right. I want it to stay active once the user clicks on the nav. How do I go about doing that? Here is a link to a visiual</p>
  
  <p><a href="http://edgecastcdn.net/00009B//TEMP/NAV/index.html" rel="nofollow">http://edgecastcdn.net/00009B//TEMP/NAV/index.html</a></p>
  
  <p>in return for you help, here is a joke you guys might enjoy (if you haven't heard of it already)</p>
  
  <blockquote>
    <p>A wife asks her husband, a computer programmer; "Could you please go
    to the store for me and buy one carton of milk, and if they have eggs,
    get 6!"</p>
    
    <p>A short time later the husband comes back with 6 cartons of milk.</p>
    
    <p>The wife asks him, "Why the hell did you buy 6 cartons of milk?"</p>
    
    <p>He replied, "They had eggs."</p>
  </blockquote>
  
  <p>Thanks guys, any help is appreciated! Here is the code. Let me know if you need the css too.</p>
  
  <pre><code>$(document).ready(function(){
      slide("#sliding-navigation", 30, 15, 150, .8);
  });
  
  function slide(navigation_id, pad_out, pad_in, time, multiplier){
  // creates the target paths
  var list_elements = navigation_id + " li.sliding-element";
  var link_elements = list_elements + " a";
  
  // initiates the timer used for the sliding animation
  var timer = 0;
  
  // creates the slide animation for all list elements 
  $(list_elements).each(function(i)
  {
      // margin left = - ([width of element] + [total vertical padding of element])
      $(this).css("margin-left","-180px");
      // updates timer
      timer = (timer*multiplier + time);
      $(this).animate({ marginLeft: "0" }, timer);
      $(this).animate({ marginLeft: "12px" }, timer);
      $(this).animate({ marginLeft: "0" }, timer);
  });
  
  // creates the hover-slide effect for all link elements         
  $(link_elements).each(function(i)
  {
      $(this).hover(
      function()
      {
          $(this).animate({ paddingLeft: pad_out }, 150);
      },      
      function()
      {
          $(this).animate({ paddingLeft: pad_in }, 150);
      });
  
  });
  
  }
  </code></pre>
  
  <p>Here is my CSS code (Updated with Douglas "active" code) Thanks!</p>
  
  <pre><code>body 
  {
  margin: 0;
  padding: 0;
  background: #1d1d1d;
  font-family: "Lucida Grande", Verdana, sans-serif;
  font-size: 100%;
  }
  
  h2  
  { 
  color: #999;
  margin-bottom: 0; 
  margin-left:13px;
  background:url(navigation.jpg) no-repeat;
  height:40px;
  }
  
  h2 span
  {
  display: none;
  }
  
  p   navigation-block
  { 
  color: #00b7e6; 
  margin-top: .5em;
  font-size: .75em;
  padding-left:15px;  
  }
  
  #navigation-block {
  position:relative;
  }
  
  #hide {
  position:absolute;
  top:30px;
  left:-190px;
  }
  
  ul#sliding-navigation
  {
  list-style: none;
  font-size: 0.75em;
  margin: 30px 0;
  padding: 0;
  }
  
  ul#sliding-navigation li.sliding-element h3,
  ul#sliding-navigation li.sliding-element a
  {
  display: block;
  width: 150px;
  padding: 2px 18px;
  margin: 0;
  margin-bottom: 0px;
  }
  
  ul#sliding-navigation li.sliding-element h3
  {
  color: #fff;
  background:#333333 url(heading_bg.jpg) repeat-y;
  padding-top: 7px;
  padding-bottom: 7px;
  }
  
  ul#sliding-navigation li.sliding-element a
  {
  color: #999;
  background:#222 url(tab_bg.jpg) repeat-y;
  border: 1px solid #1a1a1a;
  text-decoration: none;
  }
  
  ul#sliding-navigation li.sliding-element a.selected { color: #cc0000; }
  {
  color: #FFF;
  margin-top: 0.5em;
  font-size: 10pt;
  padding-left:15px;
  font-weight: bolder;
  }
  
  ul#sliding-navigation li.sliding-element a:hover { color: #00b7e6; background:#2a2a2a; }
  #navigation-block p {
  color: #FFF;
  margin-top: 0.5em;
  font-size: 10pt;
  padding-left:15px;
  font-weight: bolder;
  }
  
  
  .active{
    padding-left:12px;
    /*Add whatever other styles you need */
  }
  </code></pre>