Tip: creating Stacey generated "active" class for menu item and multiple sub levels (non javascript)

[o-l-e]

Hi, i just figured out a way of adding an active class to menu items even when at a lower children level using the is_current in Stacey 3, and thought i would share it for others.

Note that i am not rendering the sub levels as lists, only adding an "active" class to the top level menu link (Projects), even if in a deeper level within "Projects".

To explain: If you are inside "/projects", it will add active class to Projects. If you are in "/projects/project-1/" or at a lower level, it will add active class to Projects.

To see a similar example of what this achieves, see the following website, and notice the menu items that are active set in italic: (This site uses javascript to do the same, and was developed by @kolber with us, using Stacey) Level 2: http://architecturenorway.no/projects/ Level 3: http://architecturenorway.no/projects/learning Level 4: http://architecturenorway.no/projects/learning/transformer-2012/

Now there may be other ways of achieving this, but i found this to work in the same way. The positive thing about using Stacey to add the active class, is that it does not flicker when changing pages.

The markup for the menu looks like this:

<div id="menu">
    {% for child in page.root %}
    <ol>
        <li><a{% include "partials/navigation/active-class.html" %} href="{{child.url}}">{{child.title}}</a></li>
    </ol>
    {% endfor %}
</div>

Then i create a partial as referenced in the link tag above ) 'partials/navigation/active-class.html' (this partial works similar to the children.html looped partial:

{% if child.is_current %} class="active"{% endif %}{% for child in child.children %}{% include 'partials/navigation/active-class.html' with { 'page' : child } %}{% endfor %}

Obviously style the active class in your css:

#menu .active { font-style: italic; }

I am sure there are other methods of achieving the same, and i would love to hear other methods or tips on using Stacey to control "menu active class" that do not require javascript :)

[pbatts]

Nice! Thanks @o-l-e

PB

[o-l-e]

Closing this, as it is not really an issue. But it works great!