dropdown menu with django-mptt in template

87 Views Asked by At

I want to make django mptt model dropdown menu. But I'm having trouble applying it to templates. I wrote the code at a certain level, but sometimes it works, sometimes it doesn't.

<div class="u-custom-menu u-nav-container">
            <ul class="u-custom-font u-nav u-spacing-30 u-text-font u-unstyled u-nav-1"><li class="u-nav-item"><a class="u-border-3 u-border-active-palette-1-base u-border-hover-palette-1-light-1 u-border-no-left u-border-no-right u-border-no-top u-button-style u-nav-link u-radius-25 u-text-active-grey-90 u-text-grey-90 u-text-hover-grey-90" href="" style="padding: 10px 0px;">Ana Sayfa</a>
</li><li class="u-nav-item"><a class="u-border-3 u-border-active-palette-1-base u-border-hover-palette-1-light-1 u-border-no-left u-border-no-right u-border-no-top u-button-style u-nav-link u-radius-25 u-text-active-grey-90 u-text-grey-90 u-text-hover-grey-90" href="Hakkında.html" style="padding: 10px 0px;">Hakkında</a>
</li><li class="u-nav-item"><a class="u-border-3 u-border-active-palette-1-base u-border-hover-palette-1-light-1 u-border-no-left u-border-no-right u-border-no-top u-button-style u-nav-link u-radius-25 u-text-active-grey-90 u-text-grey-90 u-text-hover-grey-90" href="İletişim.html" style="padding: 10px 0px;">İletişim</a>
</li><li class="u-nav-item"><a class="u-border-3 u-border-active-palette-1-base u-border-hover-palette-1-light-1 u-border-no-left u-border-no-right u-border-no-top u-button-style u-nav-link u-radius-25 u-text-active-grey-90 u-text-grey-90 u-text-hover-grey-90" href="Hesap-Sayfaları/Hesap-örnek-sayfa.html" style="padding: 10px 0px;">matematik</a>

<div class="u-nav-popup"><ul class="u-h-spacing-15 u-nav u-unstyled u-v-spacing-5 u-nav-2">
  <li class="u-nav-item"><a class="u-button-style u-nav-link u-palette-1-base">Alan Hesaplama</a>
    <div class="u-nav-popup"><ul class="u-h-spacing-15 u-nav u-unstyled u-v-spacing-5 u-nav-3">
<li class="u-nav-item"><a class="u-button-style u-nav-link u-palette-1-base">KARE hesaplama</a></li>
<li class="u-nav-item"><a class="u-button-style u-nav-link u-palette-1-base">DAİRE HESAPLA</a></li>
</ul></div></li>
<li class="u-nav-item"><a class="u-button-style u-nav-link u-palette-1-base">çevre hesaplama</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-palette-1-base">dair</a>
</li><li class="u-nav-item"><a class="u-button-style u-nav-link u-palette-1-base">kare</a>
</li></ul>
</div>
</li><li class="u-nav-item"><a class="u-border-3 u-border-active-palette-1-base u-border-hover-palette-1-light-1 u-border-no-left u-border-no-right u-border-no-top u-button-style u-nav-link u-radius-25 u-text-active-grey-90 u-text-grey-90 u-text-hover-grey-90" href="Hesap-Sayfaları/Hesap-örnek-sayfa.html" style="padding: 10px 0px;">Finans</a>
  <div class="u-nav-popup"><ul class="u-h-spacing-15 u-nav u-unstyled u-v-spacing-5 u-nav-2">
    <li class="u-nav-item"><a class="u-button-style u-nav-link u-palette-1-base">bileşik getiri hesapla</a></li>
    <li class="u-nav-item"><a class="u-button-style u-nav-link u-palette-1-base">getiri hesapla</a></li>
    <li class="u-nav-item"><a class="u-button-style u-nav-link u-palette-1-base">faiz hesapla</a></li>
  </ul>
</div>
</li></ul>
          </div>

Example dropdown menu template

<div class="u-custom-menu u-nav-container">
  <ul class="u-custom-font u-nav u-spacing-30 u-text-font u-unstyled u-nav-1">
  {% for node,structure in header|tree_info:"ancestors" %}
  {% if node.is_leaf_node and node.level == 0 %} 
  <li class="u-nav-item"><a class="u-border-3 u-border-active-palette-1-base u-border-hover-palette-1-light-1 u-border-no-left u-border-no-right u-border-no-top u-button-style u-nav-link u-radius-25 u-text-active-grey-90 u-text-grey-90 u-text-hover-grey-90" href="Hesap-Sayfaları/Hesap-örnek-sayfa.html" style="padding: 10px 0px;">{{node.menu_name}}</a>
  </li>
   {% elif not node.is_leaf_node and node.level == 0%} 
   <li class="u-nav-item"><a class="u-border-3 u-border-active-palette-1-base u-border-hover-palette-1-light-1 u-border-no-left u-border-no-right u-border-no-top u-button-style u-nav-link u-radius-25 u-text-active-grey-90 u-text-grey-90 u-text-hover-grey-90" href="Hesap-Sayfaları/Hesap-örnek-sayfa.html" style="padding: 10px 0px;">{{node.menu_name}}</a>
    <div class="u-nav-popup"><ul class="u-h-spacing-15 u-nav u-unstyled u-v-spacing-5 u-nav-2">
      {%elif node.is_child_node and node.level == 1 and structure.closed_levels %}
      <li class="u-nav-item"><a class="u-button-style u-nav-link u-palette-1-base">{{node.menu_name}}</a>
      </li>
    </ul>
  </div>
      {%elif node.is_leaf_node and node.level == 1 %}
      <li class="u-nav-item"><a class="u-button-style u-nav-link u-palette-1-base">{{node.menu_name}}</a>
      </li>
        {%elif node.is_child_node and node.level == 1%}
      {{structure.new_level}}
      <li class="u-nav-item"><a class="u-button-style u-nav-link u-palette-1-base">{{node.menu_name}}</a>

          {%elif node.is_child_node and node.level == 2 and structure.closed_levels %}  
        <li class="u-nav-item"><a class="u-button-style u-nav-link u-palette-1-base">{{node.menu_name}}</a></li></ul></div>
        <div class="u-nav-popup"><ul class="u-h-spacing-15 u-nav u-unstyled u-v-spacing-5 u-nav-3">
          
        {%elif node.is_child_node and node.level == 2%}
      <li class="u-nav-item"><a class="u-button-style u-nav-link u-palette-1-base">{{node.menu_name}}</a></li>

  {% endif %}

  {% endfor %}

the code i wrote but it doesn't work

class header(MPTTModel):
    ust_menu=TreeForeignKey("self",related_name="children",on_delete=models.CASCADE,null=True,
    blank=True,verbose_name="üst kategori",db_constraint=False)
    menu_name = models.CharField(("Menü Adı"), max_length=100)
    menu_url=models.SlugField(("MenüUrl"),max_length=300,primary_key=True,unique=True,blank=True)
    menu_status = models.CharField(verbose_name="Menü Statüsü",max_length=100, choices=STATUS)
    def __str__(self):                           # __str__ method elaborated later in
            full_path = [self.menu_name]                  # post.  use __unicode__ in place of
            k = self.ust_menu
            while k is not None:
                full_path.append(k.menu_name)
                k = k.ust_menu
            return ' / '.join(full_path[::-1])
     class Meta:
            verbose_name_plural='Menü'
            verbose_name = "Menü"

Model.py

I want to use Django mptt system to dropdown menu, but I'm having trouble with template. Some levels of the mptt menu model I made work and then do not work or when I change the order of the menus, the system breaks down on the admin page

0

There are 0 best solutions below