Easy menu tabs with Kipper

A tabbed menu that indicates the page you're on is easy with Kipper. We've just gussied up the Kipper site's vertical menu with this technique, and we may eventually do the same with Book Elves's main horizontal menu.

It's simply a matter of using a combination of the include and exclude tags. Like so:

<!-- ifnot:index:start -->
    <li><a href="index.php">Kipper home</a></li>
<!-- ifnot:index:end -->
<!-- if:index:start -->
    <li class="here">Kipper home</li>
<!-- if:index:end -->

When making the index page, Kipper excludes the first list item, and includes the second. This repeats for every menu item, and the behavior of the list is controlled by CSS. CSS class "here" simply changes the color scheme for that one list item.

With imagination, you could do much more than just change the colors. When you arrive at the destination page, the "if" field can include a submenu. Or a colorful graphic.

The entire Kipper menu is enclosed in a set of inclusive tags:

<!-- ifdir:kipper:start -->
    [...]
<!-- ifdir:kipper:end -->

That keeps the menu from leaking into the rest of the site, even when there are other pages with the same name.

Copyright © 2009 Carson Fire • Privacy policy