Nicht klickbare Menüelemente in Wagtail

Question

Ich möchte einige Hauptmenüpunkte haben, die nicht anklickbar sind, aber ihre Kinder sind im Dropdown-Menü und anklickbar.

Ich stelle mir einen Ansatz als eine besondere Art von Modell sein, das ist:

• Eltern auf ein paar Seiten
• unzugänglich selbst

Oder kann eleganteren Weg, es zu tun Ich vermute nicht?

Answer 1

Wie Sie erwähnt haben, verwenden Sie den Beispielcode von here, dies ist eher eine Bootstrap-Frage, aber hier ist eine mögliche Lösung.

Gegen Ende des <nav> Elements haben Sie Ihren Container, der die Hauptmenüpunkte enthält.

<div class="container"> 
    <div class="collapse navbar-collapse" id="navbar-collapse-3"> 
    <ul class="nav navbar-nav navbar-left"> 
     {% for menuitem in menuitems %} 
     <li class="{% if menuitem.active %}active{% endif %}"> 
      {% if menuitem.show_dropdown %} 
      <a href="{{ menuitem.url }}">{{ menuitem.title }} 
       <span class="hidden-lg hidden-md hidden-sm visible-xs-inline"> 
       <span class="glyphicon glyphicon-chevron-right"></span> 
       </span> 
      </a> 
      {% top_menu_children parent=menuitem %} 
      {% else %} 
      <a href="{% pageurl menuitem %}">{{ menuitem.title }}</a> 
      {% endif %} 
     </li> 
     {% endfor %} 
    </ul> 
    </div> 
</div> 

Um die Menüelemente nicht anklickbar zu machen, passen Sie das href-Attribut für den Menüeintrag an. Anstatt {{ menuitem.url }} zu sein, machen Sie es #. Dadurch wird sichergestellt, dass das Menü-Dropdown immer noch funktioniert, aber es gibt keine URL, um Personen auf die "Eltern" -Seite zu bringen.

 <a href="#">{{ menuitem.title }} 
      <span class="hidden-lg hidden-md hidden-sm visible-xs-inline"> 
      <span class="glyphicon glyphicon-chevron-right"></span> 
      </span> 
     </a> 

Siehe auch: Boostrap 3 Navbar Docs