How to use simple-menu in django? - django

Question

I have below html code for submenu. Now i have to integrate with my django application.
HTML Code :
<nav class="main-navigation" data-height="auto" data-size="6px" data-distance="0" data-rail-visible="true" data-wheel-step="10">
<p class="nav-title">MENU</p>
<ul class="nav">
<!-- dashboard -->
<li>
<a href="a.html">
<i class="ti-home"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="javascript:;">
<i class="toggle-accordion"></i>
<i class="ti-support"></i>
<span>Category1</span>
</a>
<ul class="sub-menu">
<li>
<a href="SubCategory1.html">
<span>Sub Category1</span>
</a>
</li>
<li>
<a href="SubCategory2.html">
<span>Sub Category2</span>
</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="toggle-accordion"></i>
<i class="fa fa-file-text-o"></i>
<span>Category2</span>
</a>
<ul class="sub-menu">
<li>
<a href="SubCategory7.html">
<span>SubCategory7</span>
</a>
</li>
</ul>
</li>
</nav>
I have used simple-menu module for that.
but i don't understand how to apply bootstarp class in simple menu which are in below code.
For this submenu i have to use simple-submenu ?
i have try simple-menu Code is below.
<nav class="main-navigation" data-height="auto" data-size="6px" data-distance="0" data-rail-visible="true" data-wheel-step="10">
<p class="nav-title">MENU</p>
<ul class="nav">
{% for item in menu%}
<li>
<a href="{{ item.url }}">
<i class="ti-home"></i>
<span>{{ item.title }}</span>
</a>
</li>
<li>
<ul class="sub-menu">
{% for child in item.children%}
<li>
<a href="{{ item.url }}">
<span>{{ child.title }}</span>
</a>
</li>
</ul>
</li>
<!-- /ui -->
</nav>
On above code how to apply different classes in for loop for particular html tag ?

Answer 1

You can use randomly generated classes or use Django's cycle tag.
Using randomly generated classes:
{% for item in menu%}
<li>
<a href="{{ item.url }}">
<i class="ti-home-{{forloop.counter}}"></i>
<span>{{ item.title }}</span>
</a>
</li>
...
Using cycle tag:
{% for item in menu%}
<li>
<a href="{{ item.url }}">
<i class="{% cycle "ti-home-1" "ti-home-2" "ti-home-3" "ti-home-end"%}"></i>
<span>{{ item.title }}</span>
</a>
</li>
...