Issue with a menu system in wordpress using jQuery

Question

Hi there I have an issue that I hope someone can help me with. I have a sliding menu system set up in wordpress that works for all of the main pages. My issues is that when I click on the more button from the Blog page to go to the full post my menu stops working.

Here is the image with the working menu and address on the top and the broken menu and address on the bottom

http://dl.dropbox.com/u/10311145/screen.png

I know it is to do with the coding and I have tried everything that I can think of. I need it to set a class of "selected" on the Blog li when it goes to the full post page.

Code for function:

jQuery(document).ready(function () {

//transitions
//for more transition, goto http://gsgd.co.uk/sandbox/jquery/easing/
var style = 'easeOutExpo';

//Retrieve the selected item position and width
var default_left = Math.round(jQuery('#lava li.selected').offset().left - jQuery('#lava').offset().left);
var default_width = jQuery('#lava li.selected').width();

//Set the floating bar position and width
jQuery('#box').css({left: default_left});
jQuery('#box .head').css({width: default_width});

//if mouseover the menu item
jQuery('#lava li').hover(function () {

    //Get the position and width of the menu item
    left = Math.round(jQuery(this).offset().left - jQuery('#lava').offset().left);
    width = jQuery(this).width(); 
    jQuery('#debug').html(left);
    //Set the floating bar position, width and transition
    jQuery('#box').stop(false, true).animate({left: left},{duration:1000, easing: style});  
    jQuery('#box .head').stop(false, true).animate({width:width},{duration:1000, easing: style});   

    //if user click on the menu
}).click(function () {

    //reset the selected item
    jQuery('#lava li').removeClass('selected'); 

    //select the current item
    jQuery(this).addClass('selected');

});

//If the mouse leave the menu, reset the floating bar to the selected item
jQuery('#lava').mouseleave(function () {

    //Retrieve the selected item position and width
    default_left = Math.round(jQuery('#lava li.selected').offset().left - jQuery('#lava').offset().left);
    default_width = jQuery('#lava li.selected').width();

    //Set the floating bar position, width and transition
    jQuery('#box').stop(false, true).animate({left: default_left},{duration:1500, easing: style});  
    jQuery('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing: style});       

});

});

Code for the li list

<div id="lava">
                    <ul>
                        <!-- To show "selected" on the home page -->
                            <li<?php 
                                    if (is_page('Home')) 
                                    {
                                    echo " class=\"selected\"";
                                    }?>>
                                    <a href="<?php bloginfo('url') ?>">Home</a>
                            </li>

                            <!-- To show "selected" on the About Us Page  -->
                            <li<?php 
                                    if (is_page('about'))  
                                    { 
                                    echo " class=\"selected\"";
                                    }?>>
                                    <a href="<?php bloginfo('url') ?>/about/">About Us</a>
                            </li>

                            <!-- To show "selected" on the Portfolio Page -->
                            <li<?php
                                    if (is_page('portfolio'))
                                    {
                                    echo " class=\"selected\""; 
                                    }?>>
                                    <a href="<?php bloginfo('url') ?>/portfolio/">Portfolio</a>
                            </li>

                            <!-- To show "selected" on the Blog Page -->
                            <li<?php 
                                    if (is_home()) 
                                    { 
                                    echo " class=\"selected\"";
                                    }
                                    ?>>
                                    <a href="<?php bloginfo('url') ?>/blog/">Blog</a>
                            </li> 
                            </ul>

                    <div id="box"><div class="head"></div></div>

I was thinking along these lines to get it, but it didn't work.

<li<?php 
                                    if (is_home()) 
                                    { 
                                    echo " class=\"selected\"";
                                    }
                                    else if(is_page('<?php the_title(); ?>/%postname%/')){
                                        echo " class=\"selected\"";
                                    }
                                    ?>>
                                    <a href="<?php bloginfo('url') ?>/blog/">Blog</a>
                            </li> 

Answer 1

Problem was solved by author:

I had to use is_single() in my li if statement. All ok now