Assigning class="active" to Current Page

#1 / Feb 14, 2010 11:21pm
B-n-H
11 posts
I’m working on embeds currently and i have {embed="global/header"} in my main template. In the header template I have my logo/menu and I was wondering how do I have the menu list item display as active for the current page?

Like if I have the pages Home, Work, About Contact and I’m currently on the “About” page it would look like this:
```
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/work">Work</a></li>
<li class="active"><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
```
I ask because the only way I can do this while keeping {embed="global/header"} is if its done dynamically somehow.. if not I would think I would have to add the menu to every page and add the class=“active” to the right pages

#2 / Feb 14, 2010 11:52pm

Gareth Davies

491 posts

Specify a parameter in your embed so something like:

{embed=“global/header” loc="home"}

Just change the loc parameter to whichever section you are on then add some conditionals to the template:

<ul>
<li {if embed:loc == "home"}class="active"{/if}><a href="/home">Home</a></li>
<li {if embed:loc == "work"}class="active"{/if}><a href="/work">Work</a></li>
<li {if embed:loc == "about"}class="active"{/if}><a href="/about">About</a></li>
<li {if embed:loc == "contact"}class="active"{/if}><a href="/contact">Contact</a></li>
</ul>

Then on your About page use:

{embed=“global/header” loc="about"}

and so on…

#3 / Feb 15, 2010 1:01am
B-n-H
11 posts
Specify a parameter in your embed so something like:
{embed=“global/header” loc="home"}
Just change the loc parameter to whichever section you are on then add some conditionals to the template:
<ul> <li {if embed:loc == "home"}class="active"{/if}><a href="/home">Home</a></li> <li {if embed:loc == "work"}class="active"{/if}><a href="/work">Work</a></li> <li {if embed:loc == "about"}class="active"{/if}><a href="/about">About</a></li> <li {if embed:loc == "contact"}class="active"{/if}><a href="/contact">Contact</a></li> </ul>
Then on your About page use:
{embed=“global/header” loc="about"}
and so on…
is there a way for this to work if a new page is created? it seems what i would have to do is add
```
{embed=“global/header” loc="newpage"}
```
if a new page is created right?

im still learning, but if this were for a clients site they wouldnt know about adding the template so just curious if theres another way

thanks!
#4 / Feb 15, 2010 6:04am
Mark Bowen
12637 posts
If all your top level menus are set like this :

http://www.example.com/home
http://www.example.com/work
http://www.example.com/about
http://www.example.com/contact

then you should just be able to do something like this :
```
<li {if segment_1 == "home"}class="active"{/if}><a href="/home">Home</a></li>
and so on and so forth.
```
Hope that helps a bit.

Best wishes,

Mark

#5 / Feb 15, 2010 7:06am

Chris Jennings

87 posts

All of the above + some other ideas that I use:

If this is a single entry page then you can add the style into the page:

<style type="text/css" media="screen">
body.{weblog_short_name} .submenu li#{url_title} a 
{
background: #dee2e5;
color: #002145;
}
</style>
</head>
<body class="{weblog_short_name}">

and then on the menu or tabs:

{embed="includes/.submenu" section="{weblog_short_name}" myid="{entry_id}"}

then in the submenu template something along these lines:

{if entry_id!=="{embed:myid}"}
<li id="{url_title}"><a href="http://{url_title_path={embed:section}}%22class=%22{status}" title="read about {title}" class="{status}">{title}</a></li>
{if:else}
<li id="{url_title}"><a href="#%22class=%22{status}" title="you are here" class="{status}">{title}</a></li>
{/if}

The last conditional prevents the link from self reference if you are already on that page..

Also note the use of status in the class name for the link. This can then display the menu item in a different colour depending on its status (open,reviewed,pending or whatever).
Hope this helps…

#6 / Feb 15, 2010 4:20pm

marcamos

57 posts

You can also do this with CSS alone.

In the navigation:

<ul>
<li id="navLinkHome"><a href="http://">Home</a></li>
<li id="navLinkAbout"><a href="http://">About</a></li>
<li id="navLinkThing"><a href="http://">Thing</a></li>
<li id="navLinkAlso"><a href="http://">Also</a></li>
</ul>

In each page’s opening body tag:

<body class="homePage"> ...

In your CSS:

.homePage #navLinkHome,
.aboutPage #navLinkAbout,
.thingPage #navLinkThing,
.alsoPage #navLinkAlso {
     /* Whatever properties/values your .active class had, for example: */
     color: red;
}

#7 / Feb 16, 2010 1:38pm

PhilBrienesse
187 posts

Mark’s way is the most common I use. You can also extend it to sub-nav with a slight modification. Compare segment_2 to the url_title when you are on a specific page as opposed to a section.
#8 / Mar 05, 2010 6:15pm
Curtis Scott
17 posts
I’m having trouble getting this to work for me.

I have a site template named ‘home’ and this is my code:
```
<li class="home" {if segment_1 == "home"}class="current"{/if}><a href="/home"><span>Home</span></a></li>
```
Is there any other setting I need to adjust or should this be working fine?
#9 / Mar 06, 2010 7:10pm
Adam Dorsey
1439 posts
@PureDezigner - You can’t define 2 classes like that. You would have to do something like this:
```
<li class="home{if segment_1 == "home"} current{/if}"><a href="/home"><span>Home</span></a></li>
```
#10 / Mar 06, 2010 7:13pm

Adam Dorsey
1439 posts

I agree, I use the method Mark mentioned. It is the easiest to implement, and the most scalable, in my opinion.
#11 / Mar 06, 2010 8:02pm

Curtis Scott
17 posts

Works perfectly, thanks!
#12 / Mar 07, 2010 11:24pm

ChiefAlchemist
913 posts

Another vote for Mark’s method. Segment_x is EEssential.
#13 / Mar 08, 2010 7:08am

Mark Bowen
12637 posts

Works perfectly, thanks!

No problem. Glad it helped a bit.

I’d definitely recommend playing around with all of this for a while though as the other methods shown above are really good to use too. It all really depends on your situation as to which is the best though. My method is really simple and will work nearly every time but there are some really neat tricks shown above which are great to use at other times too.

Best wishes,

Mark

Thread

B-n-H

Gareth Davies

B-n-H

Mark Bowen

Chris Jennings

marcamos

PhilBrienesse

Curtis Scott

Adam Dorsey

Adam Dorsey

Curtis Scott

ChiefAlchemist

Mark Bowen

Username

Password

Thread