• SECKLER – Automation, die begeistert.
    SECKLER – Automation, die begeistert.
    TYPO3, responsive, Royal Slider
  • signature design gmbH
    signature design gmbH
    TYPO3, responsive (5 Breakpoints)

TypoScript für Megamenu

Vorbemerkungen

Für das Megamenu nutze ich:

https://codecanyon.net/item/mdf-megamenu-bootstrap-responsive-megamenu/12496534?s_rank=1

Das Menu erzeugt ein 6-Spaltiges Bootstrap-Grid für die 3. Ebene (col-sm-2), ist also ideal für 6 Unterpunkte der zweiten Ebene. Wenn ihr eine andere Anzahl Unterpunkte in der zweiten Ebene habt, müsst ihr diesen Wert entsprechend anpassen.

Wenn Ihr für die zweite Ebene eine unterschiedliche Anzahl an Unterpunkten braucht, könnt ihr das über 

special = directory

lösen. Dann könnt Ihr für jeden Punkt der ersten Ebene ein Menu mit der gewünschten Spaltenanzahl erstellen.

Hier ist der Schwachpunkt des Menus, welchen ich noch nicht gelöst habe, vielleicht hat dazu noch jemand eine Idee:
Ich würde gerne den Wert "col-sm-2" abhängig von der Anzahl der Unterpunkte der zweiten Ebene setzen lassen, damit Seiten der zweiten Ebene nahezu beliebig angelegt werden können.

Megamenu TypoScript

#####################################################

# MEGA-Dropdown-Menu rendern, "item-{field:uid}" ist für die Funktion unerheblich,
# ich habe gerne die Möglichkeit, jeden Menüpunkt bei Bedarf individuell zu gestalten

lib.megaMenu = HMENU
lib.megaMenu {
  1 = TMENU
  1 {
    expAll = 1

    NO = 1
    NO.allWrap = <li class="menu-el item-{field:uid}">|</li>
    NO.allWrap.insertData = 1
    NO.ATagTitle.field = abstract // description // title

    IFSUB = 1
    IFSUB.before = <a class="has-sub">
    IFSUB.after =  </a>
    IFSUB.doNotLinkIt = 1
    IFSUB.wrapItemAndSub = <li class="menu-el item-{field:uid}">|</li>
    IFSUB.wrapItemAndSub.insertData = 1
    IFSUB.ATagTitle.field = abstract // description // title

    ACTIFSUB <.IFSUB
    ACTIFSUB.wrapItemAndSub = <li class="menu-el active item-{field:uid}">|</li>
   }

# 2. Ebene

  2 = TMENU
  2 {
    expAll = 1
# Im Megemanu den NO-Zustand der zweiten Ebene am besten vermeiden...
    NO = 1
    NO.allWrap = <h4>|</h4>
    NO.wrapItemAndSub = <div class="col-sm-2 col-xs-12">|</div>
    NO.ATagTitle.field = abstract // description // title

    IFSUB = 1
    IFSUB.doNotLinkIt = 1
    IFSUB.allWrap = <h4>|</h4>
    IFSUB.wrapItemAndSub = <div class="col-sm-2 col-xs-12"><ul class="mdf_child_menu demo-cat"> | </ul></div>
    IFSUB.wrapItemAndSub.insertData = 1
    IFSUB.ATagTitle.field = abstract // description // title

    ACTIFSUB <.IFSUB
    ACTIFSUB.wrapItemAndSub = <div class="col-sm-2 col-xs-12 active"><ul class="mdf_child_menu demo-cat"> | </ul></div>

    wrap = <div class="mdf_sub_wrap mdf_flip row">|</div>
  }
# 3. Ebene
  3 = TMENU
  3 {
    NO = 1
    NO.allWrap = <li>|</li>
    NO.ATagTitle.field = abstract // description // title

# eine  eventuelle vierte Ebene wird in diesem Projekt einem gesonderten Menü ausgegeben
    IFSUB = 1
    IFSUB.wrapItemAndSub = <li> | </li>
    IFSUB.ATagTitle.field = abstract // description // title

    ACTIFSUB <.IFSUB
    ACTIFSUB.wrapItemAndSub = <li class="active"> | </li>
  }

}

Dieses TypoScript erzeugt folgende HTML-Struktur:

HTML

<li class="menu-el active item-2"><a class="has-sub">Headline, Ebene 1</a>
  <div class="mdf_sub_wrap mdf_flip row">
    <div class="col-sm-2 col-xs-12">
      <h4>Headline, Ebene 2</h4>
      <ul class="mdf_child_menu demo-cat">
        <li><a href="link-1" title="link-1">link 1</a></li>
        <li>...</li>
      </ul>
    </div>
    <div class="col-sm-2 col-xs-12">
      <h4>Headline, Ebene 2</h4>
      <ul class="mdf_child_menu demo-cat">
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
    <div class="col-sm-2 col-xs-12">
      <h4>Headline, Ebene 2</h4>
      <ul class="mdf_child_menu demo-cat">
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
    <div class="col-sm-2 col-xs-12">
      <h4>Headline, Ebene 2</h4>
      <ul class="mdf_child_menu demo-cat">
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
    <div class="col-sm-2 col-xs-12">
      <h4>Headline, Ebene 2</h4>
      <ul class="mdf_child_menu demo-cat">
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
    <div class="col-sm-2 col-xs-12">
      <h4>Headline, Ebene 2</h4>
      <ul class="mdf_child_menu demo-cat">
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </div>
</li>
<li class="menu-el item-4"><a class="has-sub">Heasdline, Ebene 1</a>
  <div class="mdf_sub_wrap mdf_flip row">
    <div class="col-sm-2 col-xs-12">
      <h4>Headline, Ebene 2</h4>
      <ul class="mdf_child_menu demo-cat">
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
    <div class="col-sm-2 col-xs-12">
      <h4>Headline, Ebene 2</h4>
      <ul class="mdf_child_menu demo-cat">
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
    <div class="col-sm-2 col-xs-12">
      <h4>Headline, Ebene 2</h4>
      <ul class="mdf_child_menu demo-cat">
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
    <div class="col-sm-2 col-xs-12">
      <h4>Headline, Ebene 2</h4>
      <ul class="mdf_child_menu demo-cat">
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
    <div class="col-sm-2 col-xs-12">
      <h4>Headline, Ebene 2</h4>
      <ul class="mdf_child_menu demo-cat">
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
    <div class="col-sm-2 col-xs-12">
      <h4>Headline, Ebene 2</h4>
      <ul class="mdf_child_menu demo-cat">
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </div>
</li>

In mein FLUIDTEMPLATE kann ich dann mein Menu einbauen, natürlich könnte man auch die umgebenden HTML-Tags noch in TypoScript schreiben, ich habe aber gerne noch die Möglichkeit, mein Menü um statische Listenpunkte zu ergänzen (z.B. für ein Suchfeld):

FLUIDTEMPLATE

<nav id="mdf_menu" class="navbar navbar-default traditional">
  <div class="collapse navbar-collapse mega-menu navbar-responsive-collapse">
    <div class="container">
      <ul class="nav navbar-nav">
        <f:cObject typoscriptObjectPath="lib.megaMenu"/>
      </ul>
    </div>
  </div>
</nav>

Schlussbemerkung

Dieses Menu ist so noch nicht live zu sehen, die Seite, für die es benutzt wird, befindet sich noch im Aufbau. Dort werde ich eine Variante einsetzen, diese bietet noch zusätzlich ein Bild aus den Seiteneigenschaften der ersten Ebene in der ersten Spalte des Dropdown-Menus. Außerdem werde ich dort die Spalten mit Hilfe von Flexbox erstellen, das macht die Redakteure etwas flexibler.

Ich freue mich über Feedback und Verbesserungsvorschläge, es ist mein erstes kleines TypoScript-Tutorial, ich nehme eure Anregungen gerne per Mail entgegen.

Update vom 10.05.2017

Mittlerweile konnte ich das Menü mal in einem kleinen Projekt verwenden, hier kann man es also live erleben:

http://www.stadtlauf-camberg.de/