Zum Inhalt springen

Wie Menü umsetzen

Erstellt am 8. Oktober 2016 · 2 Antworten · letzte Antwort am 17. Oktober 2016

Tags: Templates & Layouts, Frage

Carlo69 ·

Hallo,

ich bin noch relativ neu im Bereich Typoscript.

Ich habe nun folgedes Problem, ich habe in einem Html Template ein Menü, dieses möchte ich nun über TypoScript in mein Typo3 umsetzen. Jetzt weiß ich aber nicht wie ich das am besten angehe.

Setze ich einfach einen Marker in meinen HTML Template, oder lasse ich den HTML Code so im Template, und ersetze für jede Menüebene einen einzelnen Marker?

Hier mal wie das Menü im Template aussieht:

<div class="col-xs-12 col-sm-8 col-md-10">
                        <ul class="nav navbar-nav pull-right ">
                        <li class="nav-item mega-dropdown">
                            <a href="#" class="nav-link" aria-expanded="false">Aktuelles<i class="fa fa-caret-down" aria-hidden="true"></i></a>
                            <div class="mega-dropdown-menu">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-xs-12 col-sm-3">
                                            <ul>
                                                <li class="dropdown-header">
                                                    <a href="html/aktuelles/aktuelles.html">Neuigkeiten</a>
                                                </li>
                                                <li class="divider"></li>
                                                <li>
                                                    <a href="html/aktuelles/aktuelles.html">News 1</a>
                                                </li>
                                                <li>
                                                    <a href="html/aktuelles/aktuelles.html">News 2</a>
                                                </li>
                                                <li>
                                                    <a href="html/aktuelles/aktuelles.html">News 3</a>
                                                </li>
                                                <li>
                                                    <a href="html/aktuelles/aktuelles.html">News 4</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-xs-12 col-sm-3">
                                            <ul>
                                                <li class="dropdown-header">
                                                    <a href="#">Termine</a>
                                                </li>
                                                <li class="divider"></li>
                                                <li>
                                                    <a href="#">Termin 1</a>
                                                </li>
                                                <li>
                                                    <a href="#">Termin 2</a>
                                                </li>
                                                <li>
                                                    <a href="#">Termin 3</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="col-xs-12 col-sm-3">
                                            <ul>
                                                <li class="dropdown-header">
                                                    <a href="#">Veranstaltungen</a>
                                                </li>
                                                <li class="divider"></li>
                                                <li>
                                                    <a href="#">Veranstaltung 1</a>
                                                </li>
                                                <li>
                                                    <a href="#">Veranstaltung 2</a>
                                                </li>
                                                <li>
                                                    <a href="#">Veranstaltung 3</a>
                                                </li>
                                            </ul>
                                        </div>
                                    
                                    </div>
                                </div>
                            </div>
                        </li>

                    </ul>
                    </div>

Danke für jede Hilfe

Julian.​Hofmann ·

Hallo.

Antwort: es kommt drauf an 😉

Beide wege sind möglich.
Wenn du das gesamte Menü in TypoScript auslagerst hast Du den Vorteil, dass er sehr einfach erweiterbar wird um neue Hauptmenüpunkte (passiert dann automatisch). Nachteil ist, dass Du evtl. etwas stärker Rumbasteln musst, um die Verschachtelungen hinzubekommen.
Wenn Du die einzelnen Menüblöcke ins Template packst, dann sparst Du Dir etwas größeres Rumbasteln mit den Verschachtelungen. Dafür ist das Konstrukt schlechter wartbar hinsichtlich Erweiterbarkeit.

Viele Grüße
Julian

Carlo69 ·

Danke

Jetzt habe ich folgendes Problem, ich würde gern die 3. Menü ebene in meine 2. Integrieren.

Hier gebe ich meine 2te Menü Ebene aus.

2 = TMENU
    2{
    stdWrap.dataWrap = <div class="mega-dropdown-menu"> 
    <div class="container"> <div class="row"> | </div></div> </div>

    expAll = 1
    NO{
            allWrap =<div class="col-xs-12 col-sm-3"> <ul><li class="dropdown-header">
            |</li><li class="divider"></li></ul>XXX</div>
      
      }
    }

Und da wo ich die XXX habe, würde ich gern meine 3te Menüebene ausgeben, ist das irgendwie umsetzebar?

    3= TMENU
    3{
        stdWrap.dataWrap =  <ul>|</ul>
        expAll = 1
        NO{
            allWrap =<li>|</li>           
        }
    }