CODEWITHSUNDEEP
pythonhtmlcssdjango
ProX
ProX

Reputation: 297

Adding CSS item to Django menu

I need to add css classes to my menu items. I can not figure out how to do that...

I am using Django CMS, but do not want the client to alter the menu. This is what i have so far:

from menus.base import Menu, NavigationNode
from menus.menu_pool import menu_pool
from django.utils.translation import ugettext_lazy as _

class MyMenu(Menu):

    def get_nodes(self, request):
        nodes = []
        n1 = NavigationNode(_('Start'), "/", 1)
        n2 = NavigationNode(_('Item 1'), "item1/", 2)
        n3 = NavigationNode(_('Item 2'), "item2/", 3)
        nodes.append(n1)
        nodes.append(n2)
        nodes.append(n3)
        return nodes

menu_pool.register_menu(MyMenu)

My menu then looks like this:

<ul>
<li class="child selected"><a href="/">Start</a></li>
<li class="child sibling"><a href="item1/">Item 1</a></li>
<li class="child sibling"><a href="item2/">Item 2</a></li>              
</ul>

But i want it to be like this:

<ul>
<li class="start child selected"><a href="/">Start</a></li>
<li class="item1 child sibling"><a href="item1/">Item 1</a></li>
<li class="item2 child sibling"><a href="item2/">Item 2</a></li>            
</ul>

So i think i need a modifier, but i can not find the proper documentation.

I am very new to Django, so i am sure i miss a lot, but step by step i hope to get it done :) Thanks in advance!

Upvotes: 0

Views: 206

Answers (2)

ProX
ProX

Reputation: 297

Thanks to doniyor i managed to get things solved.

I added per menu item:

n2 = NavigationNode(_('Item 1'), "item1/", 2, attr={'class': 'item1-class'})

And then in the menu template:

<a class="{{ child.attr.class }}" ...

Upvotes: 1

doniyor
doniyor

Reputation: 37904

The show_menu tag renders the navigation of the current page. You can overwrite the appearance and the HTML if you add a menu/menu.html template to your project. from the docs

so in your menu.html you will something like: 

{% for child in children %}
  here you can adjust the apperance
{% endfor %}

this is my menu.html i used for my projects: http://pastebin.com/jMzz1GqE

Upvotes: 1

Related Questions