Including a menu on every page in Django

Question

I'm a bit confounded on how to do this properly. I have a template file called menu.html. I want to include menu.html into every page of my site, so I've done {% include "menu.html" %}, and that works just fine. What I'm stuck on is, if I click on a menu link, then its color should change to red, and should remain red so long as I am on that page.

So lets say the menu has links to A, B, C, and D. If I am on page B, then B should be red, and all others should be black.

What are some ideas on how to accomplish this?

Answer 1

I've found this is one of the cleanest solutions: http://djangosnippets.org/snippets/2421/

Just in case that link dies, here's the code:

CSS

ul.tab-menu li a {
  text-decoration: none;
  color: #000;
}

ul.tab-menu li.active a {
  color: #F00;
}

menu.html

<ul class="tab-menu">
    <li class="{% if active_tab == 'A' %}active{% endif %}"><a href="#">A</a></li>
    <li class="{% if active_tab == 'B' %}active{% endif %}"><a href="#">B</a></li>
    <li class="{% if active_tab == 'C' %}active{% endif %}"><a href="#">C</a></li>
</ul>

page ‘A’

{% include "menu.html" with active_tab='A' %}

page ‘B’

{% include "menu.html" with active_tab='B' %}

page ‘C’

{% include "menu.html" with active_tab='C' %}