Here is a simple method for creating an easily updatable navigation menu, with an active CSS class applied.
Create a form called “menu”
Add the following to a new form, then enter the name “menu” and type “misc”. Save.
<ul id="main_menu">
<li><a href="<txp:site_url />articles" <txp:if_section name="articles">class="active" </txp:if_section>>Articles</a></li>
<li><a href="<txp:site_url />archive" <txp:if_section name="archive">class="active" </txp:if_section>>Archive</a></li>
<li><a href="<txp:site_url />contact" <txp:if_section name="contact">class="active" </txp:if_section>>Contact</a></li>
</ul>
The above creates a unordered list that uses if_section to check which section the user is in, then apply an active class as a navigational aid.
Add some style
#main_menu li a.active {text-decoration: underline; font-weight: bold;}
An example style for your active class.
Place the menu in your page template
<txp:output_form form="main_menu" />
A very simple and easy method. The only downside is that you have to hard code the menu, but for small sites that require limited updates it is perfect!
Note: See the other menu tips – Drop down menu using only TXP tags, and Navigation menu using TXP tags.
Hi Dave, you are right – its usually better to use section_list instead, but in simple sites this code is fine. Besides, the idea is to demonstrate the various options users have. The next menu tip is coming today – with section_list!
Awesome timesaver… This simple little tutorial worked like a champ
Thanks for making this available.
Craig Valadez
What if I use articles instead of categories? Like:
Hi cosmo,
You can also try this: