jquery lavalamp focus

Question

Possible Duplicate:
Trouble with jquery lavalamp

For some reason my background color shoots back to the leftmost link no matter what link I click on. Anyone know how to get it to stay on the clicked link?

css

#lamp {
float:left;
margin:25px 0px 0px 90px;
clear: both;
}

.lavaLamp {
position: relative;
height: 29px; width: 400px;
background: #000000 no-repeat top;
background-image:url('http://wildfire-restaurant.com/images/lampback.png');
padding: 15px; margin: 10px 0;
overflow: hidden;
float:left;
}
    /* Force the list to flow horizontally */
    .lavaLamp li {
        float: left;
        list-style: none;
    }
        /* Represents the background of the highlighted menu-item. */
        .lavaLamp li.back {
            background:  no-repeat right -30px;
            width: 9px; height: 30px;
            z-index: 8;
            position: absolute;
        }
            .lavaLamp li.back .left {
                background: #BD5108 no-repeat top left;
                height: 30px;
                margin-right: 9px;
            }
        /* Styles for each menu-item. */
        .lavaLamp li a {
            position: relative; overflow: hidden;
            text-decoration: none;
            text-transform: uppercase;
            font: bold 14px arial;
            color: #fff; outline: none;
            text-align: center;
            height: 30px; top: 7px;
            z-index: 10; letter-spacing: 0;
            float: left; display: block;
            margin: auto 10px;
        }

jquery

<script type="text/javascript">
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>

site http://wildfire-restaurant.com/

Answer 1

You'll need some way to tell the lavalamp what link to set the currently selected item to.

The example code has href="#" so it's probably keeping it's state in some javascript object when clicked. When you click one of your links the previous pages state is gone.

Answer 2

Each of your pages has the home page link set as class='current' If you want to have each page have it's menu entry highlighted then you need to either:

A) Update your WordPress code so different pages generate different navigation links (in other words, so that each page has its menu entry <li> set to class='current')

An example: On your home page you have:

<ul>
<li class='current'><a href='#'>Home</a></li>
<li><a href='#'>Menu</a></li> ... etc.

Your menu page code needs to look like this:

<ul>
<li><a href='#'>Home</a></li>
<li class='current'><a href='#'>Menu</a></li> ... etc.

Looking at the Wordpress Documentation it looks like your best be to make use of WordPress' built-in Conditional Tag functionality.

This is what Doug Neiner was trying to suggest you do.

B) Use javascript to check the url of the page and then update your navigation links based on the URL.

A is far more robust than B, and is therefore the option that I would recommend.