Mega Menu TYPO3 Fluid Typoscript

0
votes

TYPO3 9.5.3 Fluid Bootstrap Package

How to make a mega menu in TypoScript with the placeholder I provide for example toplevel1 is the first then a dropdown toplevel2 and then a dropdown top-level 3? If you need the css I will upload it also and the JavaScript.

Thank you for you help. OR should I build the menu only with 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="images/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="css/style.css">
        <link rel="stylesheet" type="text/css" href="//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="index.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="#" 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="#">{toplevel2 f:format.raw()}</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" href="#">{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="#">{toplevel2 f:format.raw()} <i class="fas fa-caret-down faicon"></i></a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item-sub" href="#">{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="#" 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="#">{toplevel2 f:format.raw()}</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" href="#">{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="#">{toplevel2 f:format.raw()} <i class="fas fa-caret-down faicon"></i></a>
                                    <ul class="dropdown-menu">
                                        <li><a class="dropdown-item-sub" href="#">{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="#" 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="#">{toplevel2 f:format.raw()}</a>
                                                </li>
                                                <li class="nav-item">
                                                    <a class="nav-link" href="#">{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="#">{toplevel2 f:format.raw()} <i class="fas fa-caret-down faicon"></i></a>
                                     <ul class="dropdown-menu">
                                         <li><a class="dropdown-item-sub" href="#">{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="index.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="#" class="footer-link">Kontakt</a>
                &nbsp;
            <span class="vertical-line">&#x007C;</span>
                &nbsp;
            <a href="#" 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>
1
typo3typoscriptfluidtypo3-9.x
menuPrimary can be replaced with {toplevel1 f:format.raw()} – Leon Greiner
you know that the correct syntax is {toplevel1->f:format.raw()} with an arrow? or alternative <f:format.raw>{toplevel1}</f:format.raw> – Bernd Wilke πφ
Does the variable toplevel1 contain the title only or does it contain HTML? If is does not contain HTML, I'd suggest to remove the f:format.raw view-helper in order to disallow (possible) cross-site scripting... – Oliver Hader
Not using TypoScript is a very good idea since TypoScript bloats everything up and your definition will be very complex to read, understand and maintain. I recommened doing it your way with Fluid. – Björn von TRITUM

1 Answers

0
votes

@Björn: Especially for megamenus, use of TS will offer you many possibilities of individual, partial caching. So it's a choice between performance and maintainability.