Active page menu item in a page list

You will have to set a variable on the page template and then to use an if statement which to test if that variable is equal to the page name from your menu and if it is to display a CSS class for your link.

Then you will have that class defined on your stylesheet with whatever active page formatting you like.

Thanks for quick reply, Mihai. Here is how I list pages:

<mt:Pages folder="how-to-save" sort_by="title" sort_order="ascend">
<li class="page page-<$mt:PageID$>"><a href="<$mt:PagePermalink$>"><$mt:PageTitle$></a></li>
</mt:Pages>

The issue here is that I don't know how to add MT "If condition" to set CSS class for active page.

I wasn't able to see what coding you're using.

You have to strip the angle brackets.

Just replace "<" with "&lt;" and ">" with "&gt;".

Thanks for suggestion. Here is my code that list pages in "how-to-save" folder:

<mt:Pages folder="how-to-save" sort_by="keywords" sort_order="ascend">
<li class="page page-<$mt:PageID$>"><a href="<$mt:PagePermalink$>"><$mt:PageTitle$></a<</li>
</mt:Pages>

I don't know how to add MT "If condition" to set a specific CSS class for the active page.

You have to set a variable, but do it before the mt:Pages loop.

<mt:SetVarBlock name="current_page"><mt:PageID></mt:SetVarBlock>

Then, add the following inside your mt:Pages loop:

<mt:If tag="PageID" eq="$current_page"> class="active"</mt:If>

Like this:

<mt:Pages folder="how-to-save" sort_by="keywords" sort_order="ascend">
<li class="page page-<$mt:PageID$>"><a<mt:If tag="PageID" eq="$current_page"> class="active"</mt:If> href="<$mt:PagePermalink$>"><$mt:PageTitle$></a<</li>
</mt:Pages>

This is going to add class="active" for your page links.

You will have to create this class on your CSS document and give it whatever characteristics you like.

Thanks, Mihai. It works perfectly. One more question: Is there a way to add "first" class to the first item and add "last" class to the last item in the page list? In our design, the top menu and bottom menu have curve. Thus I have to assign a special class to them.

Thanks again for all helps.

You could use the following conditional tags to check if the page is first or last and display something, such as your class.

i.e.

<mt:If name="__first__">this is first</mt:If>

<mt:If name="__last__">this is last</mt:If>

Kind Regards,
Mihai Bocsaru

----------------------------------
Web Development
Movable Type Consulting
Six Apart Partner

http://www.pro-it-service.com/
----------------------------------

Movable Type Demo
http://www.movabletypedemo.org/