13 replies [Last post]
gwh
Offline
Regular
Last seen: 12 years 8 weeks ago
Timezone: GMT+10
Joined: 2005-05-14
Posts: 46
Points: 11

Hi everyone,

I'm using the code at this address:

http://css.maxdesign.com.au/listamatic/horizontal09.htm

to build a horizontal nav menu. The problem is that I'm not sure how to make the current page marker work. They've given the following xhtml code:

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

... and then the css that relates to the id="active" is:

#navcontainer a:active
{
background: #c60;
color: #fff;
}

#navcontainer li#active a
{
background: #c60;
border: 1px solid #c60;
color: #fff;
}

...this works on the Item one page but how do I get the links to change when I'm on the other pages? I mean where does the id="current" come in?

Would appreciate some advice if anyone's interested.

Thanks.

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 30 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Current page marker on horizontal menu

You need to set it on each page. Or if you're using an include, make a calculation as to which link to set the current id on. Or another popular way is to use an id on the body as well as a similiar id on the link. Then in your css do something like:

#home li#homelink, #about li#aboutlink, etc {
    different chararcteristics
    }

gwh
Offline
Regular
Last seen: 12 years 8 weeks ago
Timezone: GMT+10
Joined: 2005-05-14
Posts: 46
Points: 11

Current page marker on horizontal menu

Thanks for the reply. When you say I need to set it on each page, do you mean setting a unique id in the code below for each li and a tag, and if so what will the related css code be? I know you suggested another way but I think I'd better stick with the code I'm following in case I get even more confused than I am now!

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>

Thanks for any further suggestions.

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 14 years 22 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Current page marker on horizontal menu

Hi GWH

I use the listmatic menus a lot and until fairly recently I used to set the current menu item on each page which works fine but is a pain if you want to stick your nav in an include.

What Wolfcry is suggesting is a brilliant method which I learnt on here - either from him or TPH I forget which.

Basically you give each page a unique id like this:

<body id="home"> or <body id="about">

Then you assign an id to the menu items like this:

<div id="navcontainer">
<ul id="navlist">
<li><a href="#" id="nav-home">Home</a></li>
<li><a href="#" id="nav-about">Aout</a></li>
<li><a href="#" id="nav-faq">FAQs</a></li>
<li><a href="#" id="nav-contact">Contact</a></li>
<li><a href="#" id="nav-links">Links</a></li>
</ul>
</div> 

You can now copy and paste this onto all your pages without changing a thing on it - or put it in an include.

Then in your CSS you do this:

#home #nav-home, #about #nav-about, #faqs #nav-faqs, #contact #nav-contact, #links #nav-links {color: red;}

That single (long) line will then change the menu item called nav-home on the homepage to red, the menu item called nav-about on the about page to red etc etc.

It's a great labour-saving device and good for people like me who do a lot of copying and pasting and forget which is the active link!!

Edit: noticed a typo really late in the day - sorry!

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

gwh
Offline
Regular
Last seen: 12 years 8 weeks ago
Timezone: GMT+10
Joined: 2005-05-14
Posts: 46
Points: 11

Current page marker on horizontal menu

Thanks so much for that - I'll give it a try now.

scottmason
Offline
newbie
Last seen: 17 years 6 weeks ago
Joined: 2005-08-17
Posts: 7
Points: 0

Current page marker on horizontal menu

HellsBells wrote:
Hi GWH

I use the listmatic menus a lot and until fairly recently I used to set the current menu item on each page which works fine but is a pain if you want to stick your nav in an include.

What Wolfcry is suggesting is a brilliant method which I learnt on here - either from him or TPH I forget which.

Basically you give each page a unique id like this:

<body id="home"> or <body id="about">

Then you assign an id to the menu items like this:

<div id="navcontainer">
<ul id="navlist">
<li "><a href="#" id="nav-home">Home</a></li>
<li><a href="#" id="nav-about">Aout</a></li>
<li><a href="#" id="nav-faq">FAQs</a></li>
<li><a href="#" id="nav-contact">Contact</a></li>
<li><a href="#" id="nav-links">Links</a></li>
</ul>
</div> 

You can now copy and paste this onto all your pages without changing a thing on it - or put it in an include.

Then in your CSS you do this:

#home #nav-home, #about #nav-about, #faqs #nav-faqs, #contact #nav-contact, #links #nav-links {color: red;}

That single (long) line will then change the menu item called nav-home on the homepage to red, the menu item called nav-about on the about page to red etc etc.

It's a great labour-saving device and good for people like me who do a lot of copying and pasting and forget which is the active link!!

hi,

i think i'm trying to do a similar thing but i'm using templates so can't actually change the body tag on each page.

is there a way around this

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 14 years 22 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Current page marker on horizontal menu

For this trick to work you need to be able to specify something "above" the navigation itself - easiest thing is usually the body tag. You really can't edit the templates? That's a pain!

Thinking about it, I suppose you could rename a div that the navigation sits in like this:

<div id="navigation-homepage">
<ul id="navlist">
<li><a href="#" id="nav-home">Home</a></li>
<li><a href="#" id="nav-about">About</a></li>
<li><a href="#" id="nav-faq">FAQs</a></li>
<li><a href="#" id="nav-contact">Contact</a></li>
<li><a href="#" id="nav-links">Links</a></li>
</ul> 
</div>

and then just have in the CSS:

#navigation-homepage #nav-home, #navigation-contact #nav-contact, etc etc {whatever}

Can't think of a reason why that won't work. I'm sure someone else will point one out if it's there!

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Current page marker on horizontal menu

If you're coding PHP or ASP pages, you could use a case statement to add #active to whichever link based on the URL of the page you're on.
In ASP, it would look something like this:

Select case request.servervariables("URL")
Case "/index.htm"
response.write "<li><a href=""#"" id=""active"">Home</a></li>"
Case "/about.htm"
response.write "<li><a href=""#"" id=""active"">About</a></li>"
End select

That's not exactly how I'd print out the lines, but it's the general idea.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

scottmason
Offline
newbie
Last seen: 17 years 6 weeks ago
Joined: 2005-08-17
Posts: 7
Points: 0

Current page marker on horizontal menu

I found a solution,

I made the body attribute in the template an editable region, then named the "value" of each page the same as the individual link id's.

have a look at the site, you can download the css to see too

http://www.scottmason.co.uk/rnrf

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 14 years 22 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Current page marker on horizontal menu

Teeny tiny problem Scott - you've used the id="index" twice on the page you can only use it once.

I generally call the page by the shorter title e.g. index in your case and the nav item by the longer version e.g. nav-index. That way they're still obviously related by different enough to validate and not cause you any problems.

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

scottmason
Offline
newbie
Last seen: 17 years 6 weeks ago
Joined: 2005-08-17
Posts: 7
Points: 0

Current page marker on horizontal menu

do you mean, change the id's on each link to say,

... id="nav_index"
... id="nav_about"
... id='nav_members"

etc for each item

then change the relevent css to

body#index a#nav_index,
body#about a#nav_about,
body#members a#nav_members,

sorry if i'm being a bit thick, i appreciate you taking the time to have a look anyway

cheers

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 14 years 22 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Current page marker on horizontal menu

Don't worry about it Scott!

A particular id can only appear once on a page so you need to ensure that the body id isn't the same as the relevant nav item id (although it's easier to make sure they're similar).

So HTML would look like this:

<body id="index">

<ul id="navlist">
<li><a href="#" id="nav-index">Home</a></li>
<li><a href="#" id="nav-about">About</a></li>
<li><a href="#" id="nav-faqs">FAQs</a></li> 
</ul>

Then your CSS would look like this (making guesses about titles of other page's body tags):

#index #nav-index, #about #nav-about, #faqs #nav-faqs {whatever}

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH

scottmason
Offline
newbie
Last seen: 17 years 6 weeks ago
Joined: 2005-08-17
Posts: 7
Points: 0

Current page marker on horizontal menu

thanks hellsbells

i've made the changes and it all seems to be working fine.

however even though you were right about the repeating id, it was working fine before too. why is that?

i've posted the page back up if you fancy taking another look.

http://www.scottmason.co.uk/rnrf

HellsBells
HellsBells's picture
Offline
Leader
Bedford, UK
Last seen: 14 years 22 weeks ago
Bedford, UK
Joined: 2004-04-07
Posts: 851
Points: 0

Current page marker on horizontal menu

I think that it's a case of if you started applying CSS formatting to the div id="index" then presumably the browser would try to appy those to both the nav item and the page itself.

Could confuse the browser - and god knows they're confused enough!

My strategy is so simple an idiot could have devised it!

"Also, your CSS (no offence) makes me want to gouge my eyes out with a rusty spoon" - TPH