Geek Answers Handbook

Including a menu on every page in Django

I am a little confused on how to do this correctly. I have a template file called menu.html. I want to include menu.html in every page of my site, so I did {% include "menu.html" %} and it works fine. What I'm stuck with is if I click on the menu link, then its color should change to red, and it will remain red until I'm on this page.

So, let's say the menu has links to A, B, C, and D. If I'm on page B, then B should be red, and all the rest should be black.

What are some ideas on how to do this?

+4
source share
2 answers

I found this to be one of the cleanest solutions: http://djangosnippets.org/snippets/2421/

Just in case, when this link fades, here is 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' %}
+7
source

This question has been asked several times before on SO. I recently ran into the same question and found my preferred answer here: Navigating in django

0
source

More articles:


All Articles