In the last post in this series, I showed how to create a custom context and include the navigation template. These two, taken together, would allow you to include a navigation menu on every page in your website with minimal effort.
In this post, I’ll extend what we have completed thus far to create a navigation menu that can turn into a CSS-driven navigation menu with pop-outs similar to what you can find on the left hand side of this page.
One design principle I have read is to keep your navigation menu to a depth of two or less. Following this principle, the code I will discuss below will produce a navigation menu that will have a maximum of one pop-out for each primary link.
The key to getting the navigation menu to work is to have the output be in the form of an HTML unordered list so that CSS can be applied to the &
and &
tags. Django has a filter, entitled unordered_list, that can parse an array of strings (or nested arrays of strings) into an unordered list. I copied the “defaultfilters.py” from the Django source code and removed everything except the unordered_list function (and any necessary import lines) and then rewrote the unordered_list function to work on a list of MenuItems objects.
The modifications to the unordered_list function were few and basically involved changing the output method from a string to a call to the yet-to-be-written MenuItem.render() function. A copy of that file can be found in my navigation_filters.py file. Place this fine in the “navigation/templatetags” directory along with blank file called “__init__.py” so the directory will be treated as a Python class. Just like the unordered_list function, navigation_list takes an array (or a nested array), but unlike unordered_list, navigation_list will only output from MenuItems objects.
Now we write a template that uses the new navigation_list filter:
<div id="navmenu">
<ul>
<li class="top">Navigation</li>
{% load navigation_filters %}
{% if nav_menu %}
{{ nav_menu|navigation_list }}
{% else %}
<li>No Navigation Menu</li>
{% endif %}
<li class="bottom">nbsp;</li>
</ul>
</div>
With the template and filter written, now all that needs to be done is to create the navigation module. The ideal method of storing the navigation menu would be in a hierarchical list (see django snippets, and the django-mptt project), but the status of the django-mptt project seemed unnecessarily complicated for this task. Additionally, a full hierarchical list would encourage the creation of navigation lists more than two deep, something against design principles.
I therefore created a very simple semi-hierarchical model to store the navigation menu that also contains the MenuItem.render() function I mentioned above:
from django.db import models
# Create your models here.
class MenuItem(models.Model):
ParentID = models.ForeignKey('self')
text = models.CharField(max_length=20)
url = models.CharField(max_length=200)
""" Returns the title of the news item. """
def __unicode__(self):
return self.text
def render(self):
return '<a href = "' + self.url + '">' + self.text + '</a>'
I enabled the administrative interface for this class and inserted some junk data. I then wrote a context processor to pull the necessary information from the database:
from django.template import Context
from finiteline.navigation.models import MenuItem
def navigation_context(request):
# Define a variable in which we store the output list
output_list = []
# Run a query to get the top-level objects
nav_menu = MenuItem.objects.filter(ParentID=1).order_by('text').exclude(pk=1)
# For each top level object, run a query to get the subitems.
for item in nav_menu:
sub_menu = MenuItem.objects.filter(ParentID=item.id).order_by('text')
output_list.append(item)
if sub_menu.count > 0:
sub_list = []
for subitem in sub_menu:
sub_list.append(subitem)
output_list.append(sub_list)
c = Context({'nav_menu': output_list})
return c
Output of navigation_list.
After including the navigation template mentioned above, I included “navigation/base.html” in another page and opened it up in a web browser. The output looks like the image shown to the right. After applying CSS to the &
and &
tags, the navigation menu changes considerably and even supports pop-out navigation.
The unformatted menu with CSS formatting applied.