The simplest form of horizontal navigation linking to sections would be something like:-

<p><a href="http://thebombsite.com/" title="All about Textpattern">: TXP Magic :</a><a href="http://thebombsite.com/about" title="About">: About :</a><a href="http://thebombsite.com/archives" title="Archives">: Archives :</a><a href="http://thebombsite.com/contact" title="Contact">: Contact :</a></p>

You can see that I’ve used the full URLs for the links here. This can be replaced by the “txp:site_url“ tag and makes the code more portable as it can be used on any site:-

<p><a href="<txp:site_url />" title="All about Textpattern">: TXP Magic :</a><a href="<txp:site_url />about" title="About">: About :</a><a href="<txp:site_url />archives" title="Archives">: Archives :</a><a href="<txp:site_url />contact" title="Contact">: Contact :</a></p>

The main problem now is that the “p“ tag doesn’t give us much in the way of styling options. The most common HTML formatting used for horizontal menus is the “unordered list” or “ul“ tag with each item in the list contained within it’s own “li“ tags:-

<ul> <li><a href="<txp:site_url />" title="All about Textpattern">: TXP Magic :</a></li> <li><a href="<txp:site_url />about" title="About">: About :</a></li> <li><a href="<txp:site_url />archives" title="Archives">: Archives :</a></li> <li><a href="<txp:site_url />contact" title="Contact">: Contact :</a></li> </ul>

Now you can style the “ul“ and “li“ tags separately in your CSS. The next stage would be to add an “active” class to the “li“ tags which would enable you to give a different style to the link when you were actually viewing that section. This can be done with “txp:if_section“ tags and it might be handy to pop the whole thing into it’s own “div“ tags too:-

<div id="topNav"> <ul> <li<txp:if_section name=",default"> class="active"</txp:if_section>><a href="<txp:site_url />" title="All about Textpattern">: TXP Magic :</a></li> <li<txp:if_section name="about"> class="active"</txp:if_section>><a href="<txp:site_url />about" title="About">: About :</a></li> ==<li<txp:if_section name="archives"> class="active"</txp:if_section>><a href="<txp:site_url />archives" title="Archives">: Archives :</a></li> <li<txp:if_section name="contact"> class="active"</txp:if_section>><a href="<txp:site_url />contact" title="Contact">: Contact :</a></li> </ul> </div>

All very nice but we are getting a verticle list with dots instead of a horizontal one. This is where the CSS comes in to play. We can make the list display horizontally, remove the dots and style the links all in the CSS:-

#topNav { border-top: 2px solid #4e749d; background-color: #D0E1F1; } #topNav ul { list-style: none; padding-top: 5px; padding-bottom: 5px; } #topNav li { display: inline; margin-right: 4px; padding: 5px 10px 5px 10px; } #topNav li a { font-weight: bold; text-decoration: none; color: #555555; } #topNav li:hover { background-color: #EEF2F7; padding-top: 5px; padding-bottom: 5px; } #topNav li.active { background-color: #EEF2F7; } #topNav li.active a, #topNav li:hover a { color: #000000; }

Which should give you a nice horizontal menu. Of course you can style in your own way. All you need to do now is pop the code into it’s own form then you can call it to any page you want to. Note that using “disply:inline;” for the “li” will give a horizontal display without the need to resort to using “float”, which means there is no need to think about using “clear” for any code block beneath it.

You can also use this method of highlighting for links to categories using the

<txp:if_category name="categoryName"></txp:if_category>

tags instead.