Creating a Two Level Tab Navigation

Building a two level tab navigation system, like the one that can be found on GraffitiCMS.com (Click Support->Forums) is a common request on the Graffiti support forums.

The tab navigation relies heavily on css styles, but that is not my focus in this tip and I will not be providing any of the style sheet code.   However, there is a bit of custom chalk code needed to build in the second level of navigation and that code is the focus of this tip

<div id=”nav”>
<div class=”top”></div>
<div class=”content”>
<ul>
#foreach($link in $macros.NavigationLinks())
#if($category.HasChildren || $category.Parent.HasChildren)
<li #if($link.text == $category.Name || $link.text == $category.Parent.Name ) class=”selectedli_parent” #end><a href=”$link.Url”>$link.Text</a></li>
#else
<li #if($link.text == $category.Name || $link.text == $category.Parent.Name ) class=”selectedli” #else #if ($link.IsSelected) class=”selectedli” #end #end><a href=”$link.Url”>$link.Text</a></li>
#end
#end
</ul>
</div>
<div class=”bottom”></div>
</div>

#if($category.HasChildren || $category.Parent.HasChildren)
<div id=”subnav”>
<div class=”top”></div>
<div class=”content”>
<ul>
#foreach($cat in $category.Children)
<li>
<a href=”$cat.Url”>$cat.Name</a>
</li>
#end
</ul>
<ul>
#foreach($cat in $category.Parent.Children)
<li #if($category.LinkName == $cat.LinkName) class =”selectedli” #end><a href=”$cat.Url”>$cat.Name</a></li>
#end
</ul>
</div>
<div class=”bottom”></div>
</div>
#end

 

In a future tip, I will be posting the entire GraffitiCMS.com theme which you will be able to download and customize.  The theme file will include the .css file for the two level navigation chalk code posted above.

Leave a Reply

Your email address will not be published. Required fields are marked *