Mega Menu TYPO3 Fluid Typoscript - PullRequest
Новая
       66

Mega Menu TYPO3 Fluid Typoscript

0 голосов
/ 09 января 2019

TYPO3 9.5.3 Пакет начальной загрузки жидкости

Как создать мегаменю в TypoScript с заполнителем, который я предоставляю, например, toplevel1 - это сначала выпадающий список toplevel2, а затем выпадающий верхний уровень 3? Если вам нужна CSS, я также загрузю ее и JavaScript.

Спасибо за помощь. ИЛИ я должен строить меню только с TypoScript?

Спасибо 

<!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 Ответ

0 голосов
/ 11 января 2019

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

...