Expression Engine Pages Menu Selected State

23/03/09

I’ve been working with Mark Huot’s plugin ‘Pages — Nested Menu’. It’s a great way to create simple menu structure based on the pages module.
Next I wanted the menus to highlight the page you are viewing. On Marks example he suggests using:

{if "{segment_2}" == "{pnm_url_title}"}

This would work a treat, however in our case we have several custom “Pages” or weblogs that fall into this navigation structure. We also have some pages also have several children so checking the segment against the pnm_url_title wasn’t enough… So I stopped work on this this and moved onto other parts of the job. This was then put to onwside for another day or until inspiration hit me!

… Then it did indeed hit, What’s the one unique item we have with every entry?* {entry_id}* So taking this into mind I can style the menus as it as follows:

Fists we have {exp:weblog:entries….. } wrapping our whole page or body at least. Then we add a class to the body:

<body class="s{entry_id}">

Next we do the same on our links, using marks plugin:

{exp:pages_nested_menu root="/{segment_1}/"  include_ul="no"  nclude_root="yes" depth="1"}
<a href="{pnm_page_url}" title="{title}" class="c{entry_id}">{title}</a>
{/exp:pages_nested_menu}

Then we have an include in the head that has the links to all stylesheets, in this include we have the following custom styles:

{exp:weblog:entries weblog="pages_static"}
<style type="text/css">
<!--
    .s{entry_id} #menu li a.c{entry_id} {/*the highlight styling*/}
-->
</style>    
{/exp:weblog:entries}

This works a treat, So if we take and entry with the ID of 5. We know the body class is going to be s5 and the a class c5.

Simple yet effective.