Drop Down Menu Navigation in Graffiti CMS

There have been several requests for a drop down menu navigation implemented in Graffiti CMS.

Thankfully the developers at Telligent created a very nice theme that included code for a drop down menu navigation.  The navigation code included in the Training theme (a free download) is the focus of this tip.

To get started, download the training theme by going to your control panel -> presentation -> themes -> search online themes -> training.  This will prompt you to download a the training theme as a .zip file. We need to first download the theme because we will be utilizing the css and javascript provided in the theme to implement the drop down menu.

Now, create a new theme and use the following code as your layout.view (please note, this code is for demonstration purposes and only generates navigation code, it does not display any other content):

<html>
<head>
$macros.Head()
$macros.Style(“screen.css”,”screen”)
$macros.JavaScript(“utils/navigation.js”);
</head>
<body>
<div id=”navigation”>
<ol>
#foreach($link in $macros.NavigationLinks())
#set($cat = $data.GetCategory($link.CategoryId))
#if ($count == 1)
<li class=”first”>
<a href=”$link.Url”>
<span>$link.Text</span>
</a>
#else
<li>
<a href=”$link.Url”>
<span>$link.Text</span>
</a>
#end
#if ($cat.HasChildren)
<div>
<ul>
#foreach ($child in $cat.Children)
<li>
<a href=”$child.Url”>
<span>$child.Name</span>
</a>
#end
</ul>
</div>
#end
#end
</ol>
</div>
<!– / navigation –>
</body>
</html>

You’ll notice the code uses two files, screen.css and utils/navigation.js.  Copy those files into your theme via ftp and you will have a fully functional drop down navigation / sub-navigation menu system.

Leave a Reply

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