This TXP tip continues the theme from previous TXP Tips – Simple navigation menu and Navigation menu using only TXP Tags.

In this example, we create a TXP powered drop down menu which may be styled with CSS.

Create a new form called menu

Enter the following code and save the form as type misc.

<div id="navigation">
<ul id="menubar">
<!-- Main menu items -->
<li><a <txp:if_section name="">class="active" </txp:if_section>href="<txp:site_url />">Home</a></li>
<li><a <txp:if_section name="news">class="active" </txp:if_section>href="<txp:site_url />news">News</a>
<!-- Sub menu item -->
<ul class="category_list">
<li><a href="<txp:site_url />archive">Archive</a></li>
</ul>
</li>
<!-- Main menu item -->
<li><a <txp:if_section name="portfolio">class="active" </txp:if_section>href="<txp:site_url />portfolio">Portfolio</a>
<!-- Sub menu items using article_custom to display articles from the portfolio section -->
<ul class="category_list"><txp:article_custom section="portfolio" form="menu_list" sort="Posted DESC" /></ul></li>
<!-- Main menu item -->
<li><a <txp:if_section name="design">class="active" </txp:if_section>href="<txp:site_url />design">Design</a>
<!-- Sub menu items using category_list to display article categories -->
<txp:category_list break="li" type="article" wraptag="ul" class="category_list" /></li>
<!-- Close ul id="menubar" -->
</ul>
<!-- Clear the floats -->
<br class="clearit" />
</div>

Create a form called menu_list

<li><txp:permlink><txp:title /></txp:permlink></li>

Place the form in your page template

<txp:output_form form="menu" />

Save the form as type article and save.

How it works

The code is heavily commented to make it easy to follow, but to explain the most important elements:

1. The first sub menu is hard coded as it will never change
2. The second sub menu uses <txp:article_custom section="portfolio" form="menu_list" sort="Posted DESC" /> the TXP tag article_custom to retrieve articles from the portfolio section. The article titles will become the sub menu items
3. The third sub menu uses <txp:category_list break="li" type="article" wraptag="ul" class="category_list" /> to retrieve article categories for the sub menu items

The benefit of the second and third sub menu systems is that they are self-updating – if you add a new article to the portfolio section or a new category, they will automatically update.

Take it a step further

This tip does not cover the CSS styling that will be necessary to make this drop down menu work. If you need some help with markup and styling, consider this Project Seven menu tutorial, which may be used for this drop down menu system.