Мегаменю TYPO3 Fluid Typoscript

Пакет жидкой начальной загрузки 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>

menuPrimary можно заменить на {toplevel1 f: format.raw ()}

— 09.01.2019 09:34

вы знаете, что правильный синтаксис - {toplevel1->f:format.raw()} со стрелкой? или альтернативный <f:format.raw>{toplevel1}</f:format.raw>

— 09.01.2019 09:43

Переменная toplevel1 содержит только заголовок или HTML? Если он не содержит HTML, я бы предложил удалить помощник просмотра f:format.raw, чтобы запретить (возможное) межсайтовое выполнение сценариев ...

— 09.01.2019 19:36

Отказ от использования TypoScript - очень хорошая идея, поскольку TypoScript все раздувает, и ваше определение будет очень сложным для чтения, понимания и поддержки. Я рекомендовал делать это по-вашему с Fluid.

— 10.01.2019 08:48

typo3 typoscript fluid typo3-9.x

09.01.2019 09:33

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

783

Ответы 1

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

11.01.2019 08:59

Другие вопросы по теме

TypoScript выбрать, где dataWrap динамически заполняется переменной жидкостью?

Typo3 OnePager загружает контент с помощью Fluidtemplate

Как отобразить многомерный массив с помощью * ngFor?

Показать названия категорий текущей страницы в TYPO3 8

Как я могу определить объект javascript в typoscript

Получить метаданные файла в FILES-Object

TYPO3 9.5.2 Slug: Multilanguage: Страница не найдена, исключение 404, если не существует перевода страницы

TYPO3 9.5.2 / Typoscript: sys_language_mode = content_fallback не работает

TYPO3 8.7 Redirect TypoScript не работает после обновления

TYPO3 9.5.x / TypoScript / Fluid: получить переменную типа FILES без рендеринга

Мегаменю TYPO3 Fluid Typoscript

Ответы 1

Другие вопросы по теме

Похожие вопросы