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

DEMO : /

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

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

DEMO : http://sitehelp..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

• javascript
• css

• 1 Why can't you add a class to the <li> as needed? – mu is too short Commented Jun 10, 2011 at 1:24
• 1 Yeah, just add an active class to the active li element and style that by adding an li.active rule. Why are you stumped? – melhosseiny Commented Jun 10, 2011 at 1:25
• yep tried that , doesnt wanna ply... I have: #top #menu li.active{ text-decoration:underline;} – 422 Commented Jun 10, 2011 at 1:32
• Just call it something else then. What's the other active class for anyway? – melhosseiny Commented Jun 10, 2011 at 1:34
• 1 Can you add the active class so we can see how it doesn't ply? And where is #top #menu li.active {text-decoration:underline;}? It's not there in your main.css. – melhosseiny Commented Jun 10, 2011 at 1:53

6 Answers 6

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!

It looks like your problem is the way you are adding the :active

You wrote

"I have: #top #menu li.active{text-decoration:underline;}"

You need

#top #menu li:active{font-weight:bold;}

Notice the : instead of the .

Also notice you need to make the style font-weight instead of text-decoration as you are already doing text-decoration on the :hover.

You can use a bit of jquery to add an active class to the clicked menu item.

Check out the solution here: http://jsfiddle/K6F8m/

In your click function add a line that add an active class to the item that was clicked, and remove the active class from the other items.

You need both JS and CSS for this.

JS

sections.click(function(){
    ...
    sections.removeClass("active");
    $(this).addClass("active");
    ...
});

CSS

#top #menu li.active { text-decoration:underline; }

Just add a class to the link when a user clicks on it, and remove it from all other links.

$('#menu a').live('click', function(){
   $('#menu a').removeClass('active');
   $(this).addClass('active');
});

Then style the css class.