Custom Search

Monday, June 7, 2010

how to django current page higlighting

current page higlighting
========================method-1
URLconfs have a hook that lets you pass extra arguments to your view functions, as a Python dictionary.

Any URLconf tuple can have an optional third element, which should be a dictionary of extra keyword arguments to pass to the view function.

For example:

urlpatterns = patterns('blog.views',
(r'^blog/(?P<year>\d{4})/$', 'year_archive', {'section ': 'ajouter'}),
)

In this example, for a request to /blog/2005/, Django will call the blog.views.year_archive() view, passing it these keyword arguments:

year='2005', section ='ajouter'


Then pass this keyword to template via response.

Then in your menu template you can do:

{% ifequal section "ajouter" %}
<strong>Ajouter une recette</strong>
{% else %}
<a href="/ajouter">Ajouter</a> une recette
{% endifequal %}

========================method-2

You can also do this with CSS and not change your navigation HTML at
all. Just give each of your navigation items an id (#nav-about,
#nav-contact, etc.) and in each section of the site, assign a class to
the body tag based on the section you're in.

Then you can create CSS rules for the "current" section something like this:

.about #nav-about, .contact #nav-contact { font-weight:bold; }


<body class="{{section}}">
...
<p id="nav-ajouter"><a href="/ajouter">Ajouter</a> une recette</p>
<p id="nav-conquer"><a href="/conquer">Conquer</a> the world</p>

-----------

base.html
---------------
<html>
[...]
<body class="{{section}}">
<div id="container">
{% include "header" %}
{% include "menu" %}
{% block content %}{% endblock %}
{% include "footer" %}
</div>
</body>
</html>

menu.html
---------------
<div id="menu">
<ul id="arrow">
<li><a id="nav-ajouter" href="/cefinban/ajouter_recette">Ajouter</a>
une recette.</li>
<li><a id="nav-recherche" href="/search">Recherche</a>, trouvez une
recette.</li>
[...]
</ul>
</div>

css
------
.faq #nav-faq, .contacts #nav-contacts,
.detail #nav-detail, .ajouter #nav-ajouter
{
color: green;

}


***************************

No comments:

Post a Comment