Detect current page

#1 / May 06, 2009 5:14pm
purpleparasol
15 posts
This is my first EE attempt so I may be barking up the wrong tree. It’s very simple, and consists of 5 page templates, each representing a different page. I’ve included the menu bar at the top of each page and would like to have it display an active button (different colour to other buttons), when that button’s page is the current page. So I need to get class=“current_page” to change position, depending on the the current page.

How do I do that? Currently my navigation template looks like this :
```
<div id="my_nav_bar">
<ul id="tabs">
<li class="current_page"><a href="#" rel="nofollow" title="Home">Home</a></li>
<li class=""><a href="#">About</a></li>
<li class=""><a href="#" title="Services">Services</a></li>
<li class=""><a href="#" title="FAQ">FAQ</a></li>
<li class=""><a href="http://{path=site/blog}" title="Blog">Blog</a></li>
</ul>
</div> 
```
Liz

#2 / May 06, 2009 5:32pm

purpleparasol

15 posts

I think I’ve figured out how to do it. Maybe it isn’t the right way - but it is OK for now.

<div id="my_nav_bar">
<ul id="tabs">
<li {if segment_2 == "" } class="current_page" {/if}><a href="#" title="Home">Home</a></li>
<li {if segment_2 == "about" } class="current_page" {/if}><a href="#">About</a></li>
<li {if segment_2 == "services" } class="current_page" {/if}><a href="#" title="Services">Services</a></li>
<li {if segment_2 == "faq" } class="current_page" {/if}><a href="#" title="FAQ">FAQ</a></li>
<li><a href="http://{path=site/blog}" title="Blog">Blog</a></li>
</ul>
</div> <!-- my_nav_bar -->

#3 / May 06, 2009 7:03pm

e-man
1816 posts

Definitely a good way, I do this all the time on smaller sites 😊
Also have a look at this method:
http://ellislab.com/blog/entry/behind_the_curtain_part_one/

#4 / May 10, 2009 1:06pm

pushloop

422 posts

F.y.i. You could do it like this, using either the pages module or the categories tag.

Using categories

In index template:

{exp:weblog:category_heading}
 {embed="loop/.menu" id="{category_id}"}
{/exp:weblog:category_heading}

In .menu template:

<ul id="menu">               
{exp:weblog:categories weblog="content" show_empty="yes"}
 <li><h2 title="{category_name}"><a href="http://{path=%27loop/index%27}" title="{category_name}">{category_name}</a></h2></li>
{/exp:weblog:categories}
</ul>

Using pages module

In index template:

{exp:weblog:entries limit="1"}
 {embed="loop/.menu" uri="{page_uri}"}
{/exp:weblog:entries}

In .menu template:

<ul id="menu">               
{exp:weblog:entries weblog="content" dynamic="off" sort="asc"}
 <li><h2 title="{category_name}"><a href="http://{path=%27loop/index%27}" title="{category_name}">{title}</a></h2></li>
{/exp:weblog:entries}
</ul>

Just add either “if embed:id == category_id” or “if embed:uri == page_uri” to create a current indicator, like class=“current”.

#5 / May 17, 2009 5:00am

purpleparasol
15 posts

e-man, pushloop - thanks for your help. I’ve used both methods now and am finding my way, slowly around EE. Still finding EE a little weird - no numerics in webblogs(why?) and a little cumbersome in the editing windows - you lose your place when you save something and there is no search. Hoping new version will address some of this.

Thread

purpleparasol

purpleparasol

e-man

pushloop

Using categories

Using pages module

purpleparasol

Username

Password

Thread

Detect current page

purpleparasol

purpleparasol

e-man

pushloop

Using categories

Using pages module

purpleparasol

ExpressionEngine News!

Username

Password

Email Address

Display Name

Password