Drupal 8 Bootstrap Multilevel Menü Oluşturmak - Dallanmış Menü

Enes Yılmaz • 28 Mart 2017

Drupal 8 de Bootsrap temasına yeni gelen güncelleme ile çoklu menü sistemini (multilevel menü ) iptal ettiğini gördük. Bu gerçekten oldukça can sıkıcı bir durum. Örnekle 1. seviyeden menüler görüntülenebilirken, 2. ve sonraki menüler görüntülenemiyor. Bu konuda epey bir araştırma yapmama rağmen doğru düzgün birşey bulamamışken sonunda kodlara müdahale etmek gerektiği kaçınılmaz oldu ve sonuç olarak sorunu çözmüş olduk. Sizde belki de saatlerdir sorunun çözümünü arıyor olabilirsiniz ve sonunda bu yazıyı bulduğunuza şükrettiğinizi de duyar gibiyim :)

Bu kadar giriş yazısı yeterli ,konuyu fazla uzatmadan işe koyulalım. Öncelikle subthema halinde kullandığınız bootstrap menüsünde templates adındaki klasör içine menu adında bir klasör oluşturunuz. (Varsa zaten sıkıntı yok :) )

Ardından menu klasörü içerisine menu--main.html.twig adında bir dosya oluşturun. Dikkat edin dosya adını aynen kopyalayın.

Daha sonra menu--main.html.twig dosyasının içerisine aşağıdaki kodları girin.

{# All menu and submenu items #}
<div class="navbar">
<div class="navbar-header"> 
  <div class="navbar-header pull-right">  

    <div id="collapse navbar-collapse">
      {% import _self as menus %}
      {#
        We call a macro which calls itself to render the full tree.
        @see http://twig.sensiolabs.org/doc/tags/macro.html
      #}
      {{ menus.menu_links(items, attributes, 0) }}

      {% macro menu_links(items, attributes, menu_level) %}
        {% import _self as menus %}
        {% if items %}
          {% if menu_level == 0 %}
            <ul class="nav navbar-nav" role="menu" aria-labelledby="dropdownMenu">
          {% else %}
            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
          {% endif %}
          {% for item in items %}
            {% if item.below %}
              {% if menu_level == 0 %}
                <li class="dropdown">
                  <a href="{{ item.url }}" class="dropdown-toggle" data-toggle="dropdown">{{ item.title }} <span class="caret"></span></a>
                  {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
                </li>
              {% else %}
                <li class="dropdown-submenu">
                  <a href="{{ item.url }}">{{ item.title }}</a>
                  {{ menus.menu_links(item.below, attributes, menu_level + 1) }}
                </li>
              {% endif %}
            {% else %}
              <li {{ item.attributes }}>{{ link(item.title, item.url) }}</li>
            {% endif %}
          {% endfor %}
          </ul>
        {% endif %}
      {% endmacro %}

    </div>
  </div>
</div>

Son işlem olarak temanızın css dosyasına aşağıdaki css kodlarını girmeniz işlemi neticelendirmenizi sağlayacak.

.dropdown-submenu{position:relative}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px;border-radius:0 6px 6px 6px}
.dropdown-submenu:hover>.dropdown-menu{display:block}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#ccc;margin-top:5px;margin-right:-10px}
.dropdown-submenu:hover>a:after{border-left-color:#fff}
.dropdown-submenu.pull-left{float:none}
.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px} 

Artık sonsuz sayıda dallanabilen menünüz oluşmuştur. Hemde dallanmış menüler hover şeklinde menü üzerine gelince direk açılır vaziyette.

Sizde bu tarz sorunlar ile karşılaşıyorsanız sitemizin drupal grubunda sorularınızı sorabilir,ayrıca karşılaştığınız ve çözdüğünüz problemleri benim yaptığım gibi bu site üzerinden makale veya ders şeklinde paylaşabilirsiniz.