Мега Меню TYPO3 Fluid Typoscript

TYPO3 9.5.3 Fluid Bootstrap пакет

Как да направя мега меню в TypoScript с контейнера, който предоставям, например toplevel1 е първото, след това падащо меню toplevel2 и след това падащо меню от най-високо ниво 3? Ако имате нужда от css, ще го кача също и JavaScript.

Благодаря ви за помощта. ИЛИ трябва да създам менюто само с TypoScript?

Thank you 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="content-language" content="de-DE">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>HTL Villach</title>
        <link rel="icon" type="image/png" href="/bgimages/logo_schwarz.png">
        <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
        <link rel="stylesheet" href="/bgcss/style.css">
        <link rel="stylesheet" type="text/css" href="/bg//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
    </head>
    <body>

        <!-- NAVBAR -->

        <header>
            <nav class="navbar navbar-expand-lg navbar-dark">
                <a class="logo-link" href="/bgindex.html">
                    <img class="logo" width="190%" src="fileadmin/images/bannerlogo04.png">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" >
                    <img class="hamburger" src="images/menu.svg">
                </button>

                <!-- DESKTOP-DESIGN-AUSBILDUNG -->

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item dropdown">
                            <a class="desktop nav-link dropdown-toggle drop" href="/bg#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                         {menuPrimary f:format.raw()}<i class="fas fa-caret-down faicon"></i>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <div class="container">
                                    <div class="row"><div class="desktop col-lg-3">
                                            <ul class="nav flex-column">
                                                <li class="nav-item">
                                                    <a class="nav-link-header" href="/bg#">{toplevel2 f:format.raw()}</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" href="/bg#">{toplevel3 f:format.raw()}</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>

                        <!-- MOBILE-DESIGN AUSBILDUNG -->

                        <li class="mobile nav-item dropdown">
                            <a class="nav-link md dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                {toplevel1 f:format.raw()} <i class="fas fa-caret-down faicon"></i>
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle col-lg-3" href="/bg#">{toplevel2 f:format.raw()} <i class="fas fa-caret-down faicon"></i></a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item-sub" href="/bg#">{toplevel3 f:format.raw()}</a></li>
                                    </ul>
                            </ul>
                        </li>

                        <!-- DESKTOP-DESIGN-SCHULE -->

                        <li class="nav-item dropdown">
                            <a class="desktop nav-link dropdown-toggle" href="/bg#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                {toplevel1 f:format.raw()} <i class="fas fa-caret-down faicon"></i>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <div class="container">
                                    <div class="row">
                                        <div class="desktop col-lg-4">
                                            <ul class="nav flex-column">
                                                <li class="nav-item">
                                                    <a class="nav-link-header" href="/bg#">{toplevel2 f:format.raw()}</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" href="/bg#">{toplevel3 f:format.raw()}</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>

                        <!-- MOBILE-DESIGN SCHULE -->

                        <li class="mobile nav-item dropdown">
                            <a class="nav-link md dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                {toplevel1 f:format.raw()} <i class="fas fa-caret-down faicon"></i>
                            </a>
                            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle col-lg-3" href="/bg#">{toplevel2 f:format.raw()} <i class="fas fa-caret-down faicon"></i></a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item-sub" href="/bg#">{toplevel3 f:format.raw()}</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>

                        <!-- DESKTOP-DESIGN-LEHRER -->

                        <li class="nav-item dropdown">
                            <a class="desktop nav-link dropdown-toggle" href="/bg#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                {toplevel1 f:format.raw()} <i class="fas fa-caret-down faicon"></i>
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <div class="container">
                                    <div class="row">
                                        <div class="desktop col-lg-5">
                                            <ul class="nav flex-column">
                                                <li class="nav-item">
                                                    <a class="nav-link-header" href="/bg#">{toplevel2 f:format.raw()}</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" href="/bg#">{toplevel3 f:format.raw()}</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>

                         <!-- MOBILE-DESIGN LEHRER -->

                         <li class="mobile nav-item dropdown">
                             <a class="nav-link md dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                 {toplevel1 f:format.raw()} <i class="fas fa-caret-down faicon"></i>
                             </a>
                             <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                 <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle col-lg-3" href="/bg#">{toplevel2 f:format.raw()} <i class="fas fa-caret-down faicon"></i></a>
                                     <ul class="dropdown-menu">
                                         <li><a class="dropdown-item-sub" href="/bg#">{toplevel3 f:format.raw()}</a></li>
                                     </ul>
                                 </li>
                             </ul>
                         </li>
                    </ul>

                    <!-- SUCHE -->

                    <form class="form-inline my-2 my-lg-0">
                        <input class="form-control" type="search" placeholder="Suche" aria-label="Search">
                        <a id="search" href="/bgindex.html"><i class="fas fa-search"></i></a>
                    </form>
                </div>
            </nav>
        </header>

        <!-- FOOTER -->

        <div class="footer">
            <span class="copyright">&copy;</span>
            <span class="mr-2">Höhere technische Bundeslehr- und Versuchsanstalt Villach, Tschinowitscher Weg 5, 9500 Villach</span>
            <span class="vertical-line">&#x007C;</span>
                &nbsp;
            <span>Tel: +43 4242 37061-0</span>
                &nbsp;
            <span class="vertical-line">&#x007C;</span>
                &nbsp;
            <a href="/bg#" class="footer-link">Kontakt</a>
                &nbsp;
            <span class="vertical-line">&#x007C;</span>
                &nbsp;
            <a href="/bg#" class="footer-link">Impressum</a>
        </div>

        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <script src="js/nav.js"></script>
    </body>
</html>


fluid typo3 typo3-9.x typoscript
person Leon Greiner    schedule 09.01.2019    source източник
comment
menuPrimary може да се замени с {toplevel1 f:format.raw()}   -  person Leon Greiner    schedule 09.01.2019
comment
знаете ли, че правилният синтаксис е {toplevel1->f:format.raw()} със стрелка? или алтернатива <f:format.raw>{toplevel1}</f:format.raw>   -  person Bernd Wilke πφ    schedule 09.01.2019
comment
Променливата toplevel1 съдържа ли само заглавието или съдържа HTML? Ако не съдържа HTML, бих предложил да премахнете f:format.raw помощника за изглед, за да забраните (възможно) скриптиране между сайтове...   -  person Oliver Hader    schedule 09.01.2019
comment
Да не използвате TypoScript е много добра идея, тъй като TypoScript раздува всичко и вашата дефиниция ще бъде много сложна за четене, разбиране и поддържане. Препоръчвам да го направите по вашия начин с Fluid.   -  person Björn von TRITUM    schedule 10.01.2019

Отговори (1)


arrow_upward
0
arrow_downward

@Björn: Специално за мегаменюта, използването на TS ще ви предложи много възможности за индивидуално, частично кеширане. Така че това е избор между производителност и поддръжка.

person Julian Hofmann    schedule 11.01.2019