Question

Just doing a ajax page, which utilises ul li menu.

DEMO : http://sitehelp.com.au/demos/ajax/

The code is ( css )

#top #menu{
    float: left;
    list-style-type: none;
    margin: 0px 0 0 0px;
} 

#top #menu li{
    position:relative;
    left:300px;
    top:-22px;
    margin-right: 16px;
    text-transform: uppercase;
    color: #3399ff;
    font-size:18px;
    font-weight:bold;
    display:inline;
}

#top #menu li:hover{
    color: #ec008c;
    cursor: pointer;
    text-decoration:underline;
}

The html is:

<ul id="menu">
    <li id="home">Info</li>
    <li id="press">Press</li>
    <li id="trade">Trade</li>
</ul>

The links fire ajax request via jquery, to dynamically load internal and external pages… thats not the issue.

I cannot put li current or li active.

The menu needs to remain as is, so I am thinking surely there must be a css method, for showing the menu like so: ( when we are on that ajax page. )

INFO PRESS TRADE

So say we click the PRESS link, we can control its effect on page. In other words, it is underlines or bold.. or whatever. Sort of a class=”selected” or “active” … I am stumped

Answer 1

In your menu.js file, try adding this to your code:

//Manage click events
sections.click(function(){
    //show the loading bar
    showLoading();

    // ADD THIS?
    sections.removeClass('current');
    $(this).addClass('current');

    //load selected section
    switch(this.id){
        case "home": // etc etc...

Now just add some lovely CSS for this…

#menu li.current {
    font-weight:bold; /* or whatever... */
}

Good luck!