Textpattern CMS

#1 2008-05-02 02:29:47

dlbullock

New Member

Registered: 2007-12-02

Posts: 6

Drop Down Horizontal Navigation

I am wanting to implement a bit of drop down navigation on my horizontal navigation bar. I would like to use one for Links, Categories and Archives. Here is a link to my site http://dennisbullock.net and here is what my navigation code looks like currently.

<div id=“nav”>
<ul id=“nav”>
<li<txp:if_section name=”,”> id=“on”</txp:if_section>><a href=”<txp:link_to_home />” title=“Home”>Home</a></li>
<li<txp:if_section name=“archive”> id=“on”</txp:if_section>><a href=”<txp:link_to_home />archive” title=“Archive”>Archives</a></l>
<li<txp:if_section name=“faq”> id=“on”</txp:if_section>><a href=”<txp:link_to_home />faq” title=“FAQ”>FAQ</a></li>
<li<txp:if_section name=“portraits”> id=“on”</txp:if_section>><a href=”<txp:link_to_home />portraits” title=“Portraits”>Portraits</a></li>
<li<txp:if_section name=“weddings”> id=“on”</txp:if_section>><a href=”<txp:link_to_home />weddings” title=“Weddings”>Weddings</a></li>
<li<txp:if_section name=“products”> id=“on”</txp:if_section>><a href=”<txp:link_to_home />products” title=“Products”>Products</a></li> <li<txp:if_section name=“contact”> id=“on”</txp:if_section>><a href=”<txp:link_to_home />contact” title=“Contact”>Contact</a></li>
<li <txp:if_section name=”“> id=“on”</txp:if_section>><a href=“http://www.facebook.com/pages/Dennis-Bullock-Photography/10669531734” />Facebook!</a> </li>
<li<txp:if_section name=“ioh”> id=“on”</txp:if_section>><a href=”<txp:link_to_home />ioh” title=“Images of Hope”>Images of Hope</a></li>
</ul>
</div><!— end #nav —>

Last edited by dlbullock (2008-05-02 02:30:02)

#2 2008-05-02 02:47:15

Gocom

Developer Emeritus

From: Helsinki, Finland

Registered: 2006-07-14

Posts: 4,533

Website

Re: Drop Down Horizontal Navigation

In example:

<ul id="nav">
	<li<txp:if_section name="archive"> id="on"</txp:if_section>>
		<a href="<txp:site_url />">Category</a>
		<txp:category_list wraptag="ul" break="li" />
	</li>
</ul>

And then something like this on your CSS:

ul#nav li ul {
	display: none;
}
ul#nav li:hover ul {
	display: block;
}

More TXP tags to use:

• txp:category_list
• txp:article_custom
• txp:linklist

And then for drop downs with CSS:

• Alistapart
• Google

PS. Validate your current navigation:

• </l> => </li>
• ID can be used only once

Last edited by Gocom (2008-05-02 02:48:27)

---

Rah | GitHub