How To Style 'Active' Menu Items using CSS

#1 / Jul 03, 2007 11:46am
sm9
352 posts
Hi there,

I have a navigation menu which is a HTML list. Each list item is a menu option and has its own class:
```
<ul id="topnav">
<li><a href="http://index.php?/home/index/class=home">Home</a></li>
<li><a href="http://index.php?/about/index/class=about">About</a></li>
<li><a href="http://index.php?/explore/indexclass=explore">Explore</a></li>
<li><a href="http://index.php?/help/index/class=help">Help</a></li>
<li><a href="http://index.php?/contact/index/class=contact">Contact</a></li>
</ul>
```
Also, the body tag of the Home Page looks like this:
```
<body id="home">
```
I have read a little about descendent selectors, and is the above method a way for styling a menu item so that it is a different colour to the other menu items?

I need a CSS selector that applies this style only when the Body has id of ‘home’, and when the div class is ‘topnav’, and the link (a) class is ‘home’

I’ve tried various combinations of CSS but none of them seem to work. Can someone help me out with this one piece of code here?

Or is there an even easier way of achieving this in EE that I’m overlooking?

Thanks,

Ste
#2 / Jul 03, 2007 12:12pm

Ingmar
29245 posts

Solspace has a nice little plugin for that purpose, aptly named Selected.
#3 / Jul 03, 2007 12:35pm

sm9
352 posts

I’ll take a look at this, but you don’t know how to do this in CSS do you? Or is it even possible?

Thanks,

Ste
#4 / Jul 03, 2007 1:07pm

Ingmar
29245 posts

Of course it’s possible, you’d simply use a few conditionals with {segment_x}. The plugin makes it more convenient, but does the same thing.

#5 / Jul 03, 2007 1:10pm

Ingmar

29245 posts

Actually, I misunderstood. I’d use a single CSS class for that purpose, like so:

<ul id="topnav">
<li><a{if segment_1 == "home"} class="active"{/if} href="index.php?/home/index/">Home</a></li>
<li><a{if segment_1 == "about"} class="active"{/if} href="index.php?/about/index/">About/a></li>
</ul>

#6 / Jul 03, 2007 2:08pm
DSite
18 posts
The way that Ingmar does it is great, and I’ve used that method on a few sites. If you’re looking for a strictly CSS-driven solution, you could try something like this:
```
#home #topnav a.home,
#about #topnav a.about { 
    color: red;   /* or whatever style you'd want for the active page */
}
```
... and so on for the other pages/links.

And that’s assuming you change the id on the body tag for each page.

Which method you use really comes down to a choice between having EE do the work or the CSS. But using Ingmar’s method makes it a little easier for you to use the same template for multiple pages, since it’s dependent on the segments and not on a specific id on the body tag. For that matter, you could use segments to generate the id on the body tag.
#7 / Jul 04, 2007 1:31pm

sm9
352 posts

Thanks for the help with this. Ingmar’s advice is excellent and gives me pointers for doing this in the future as well as using this technique for other things (so thanks for that), but Design Site’s solution is the pure CSS option I was hoping to use at this moment in time, and I’ve just implemented it and it works great.

Thanks guys,

Ste
#8 / Feb 23, 2009 7:14am
meerestier
17 posts
Actually, I misunderstood. I’d use a single CSS class for that purpose, like so:
<ul id="topnav"> <li><a{if segment_1 == "home"} class="active"{/if} href="index.php?/home/index/">Home</a></li> <li><a{if segment_1 == "about"} class="active"{/if} href="index.php?/about/index/">About/a></li> </ul>
Isnt it possible to make this more dynamic? I imagine, that there are top-navigation topics added regularly.

Maybe passing the categories as a variable… What would the syntax be?

Cheers

Lars

Thread

sm9

Ingmar

sm9

Ingmar

Ingmar

DSite

sm9

meerestier

Username

Password

Thread

How To Style 'Active' Menu Items using CSS

ExpressionEngine News!

Username

Password

Email Address

Display Name

Password