Question

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

http://edgecastcdn.net/00009B//TEMP/NAV/index.html

in return for you help, here is a joke you guys might enjoy (if you haven’t heard of it already)

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!”

A short time later the husband comes back with 6 cartons of milk.

The wife asks him, “Why the hell did you buy 6 cartons of milk?”

He replied, “They had eggs.”

Thanks guys, any help is appreciated! Here is the code. Let me know if you need the css too.

$(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);
    });

});

}

Here is my CSS code (Updated with Douglas “active” code) Thanks!

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 */
}

Answer 1

It looks like your nav doesn’t actually change the page, just loads (or switches out) new content on the page.

The easiest way to make this stay after a user clicks a link would be to add a class with the correct settings. For example:

jQuery

$(link_elements).hover(
  function()
  {
    $(this).animate({ paddingLeft: pad_out }, 150);
  },      
  function()
  {
    $(this).animate({ paddingLeft: pad_in }, 150);
  }
).click(function(){
  $(link_elements).removeClass("active");
  $(this).addClass("active");
});

CSS

.active{
  padding-left:12px;
  /*Add whatever other styles you need */
}

EDIT: Added CSS

---

EDIT:
Okay, I see what I missed before – the jQuery is setting the padding inline which overrides the external CSS. You technically could use !important in the .active CSS, but I personally like this method more.

Basically, I add the active class like before, but I only use it as a reference. When a user clicks a link, the active class is added. If a link has the active class, it does not animate on mouseout. When a not active class is clicked, active is removed from all other nav links, they’re all animated to their start point, and the new link is made active.

This may be better explained with the relevant code:

// creates the hover-slide effect for all link elements         
$(link_elements).each(function(i) {
    $(this)
        .hover(
            function() {
                $(this).animate({ paddingLeft: pad_out }, 150);
            }, function() {
                if(!$(this).hasClass("active"))
                    $(this).animate({ paddingLeft: pad_in }, 150);
            })
        .click(
            function() {
                $(link_elements).not($(this)).removeClass("active").animate({ paddingLeft: pad_in}, 150);
                $(this).addClass("active");
            });
}); // End `each` loop

And the related jsFiddle: http://jsfiddle.net/eAaCn/
(added console.log() and return false in the jsFiddle for testing only)