Создать TYPO3 VHS Bootstrap-Navbar - PullRequest
Новая
       43

Создать TYPO3 VHS Bootstrap-Navbar

1 голос
/ 20 марта 2019

У меня проблема с TYPO3 VHS.Я хочу объявить навигационную панель в моем собственном расширении, которое я создал с помощью builder-extension.Это прекрасно работает, когда я смотрю на исходный код моей страницы, все похоже на мой собственный HTML-код.Но когда я нажимаю на главную страницу своих подстраниц, ничего не происходит.Как: Мой Навбар .Я думаю, что у меня неправильные настройки TYPO3, потому что на главной странице также есть ссылка.В моем примере HTML-кода, который я создал в начале, все страницы имели href = "#".

My HTML Code for The Navbar: 

<div class="container-fluid farbflussgrau">
    <div class="row justify-content-md-center">
        <div class="col-lg-8 text-center">
            <nav class="navbar navbar-expand-md navbar-dark bg-dark">
                <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse"
                       data-target="#navbarTogglerEU" aria-controls="navbarTogglerEU" aria-expanded="false"
                       aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse justify-content-center" id="navbarTogglerEU">
                    <v:page.menu>
                        <ul class="navbar-nav">
                            <f:for each="{menu}" as="item">
                                <li class="nav-item px-2 {f:if(condition: item.hasSubPages, then: 'dropdown')}">
                                    <f:link.page
                                           pageUid="{item.uid }"
                                           title="{item.title}"
                                           class="nav-link{f:if(condition: item.hasSubPages, then: ' dropdown-toggle')}"
                                           additionalAttributes="{f:if(condition: item.hasSubPages, then:
                                                '{data-toggle:\'dropdown\',aria-haspopup:\'true\',aria-expanded:\'false\',href:\'\'}')}">
                                        {item.title}
                                    </f:link.page>
                                    <f:if condition="{item.hasSubPages}">
                                        <v:menu pageUid="{item.uid}">
                                            <div class="dropdown-menu">
                                                <f:for each="{menu}" as="subItem">
                                                    <f:link.page pageUid="{subItem.uid}"
                                                                title="{subItem.title}"
                                                                class="dropdown-item">
                                                        {subItem.title}
                                                    </f:link.page>
                                                </f:for>
                                            </div>
                                        </v:menu>
                                    </f:if>
                                </li>
                            </f:for>
                        </ul>
                    </v:page.menu>
                </div>
            </nav>
        </div>
    </div>
</div>

This is how the sourcecode from my Page looks: https://pastebin.com/NgG0T0m9?fbclid=IwAR2f6TMuI6Q4tOPHPHw8FFv2Zs827vt9HN2_UI4V1KhHbfLYMQ1DD6zmBjM

И эти два изображения показывают, как выглядит PHPStorm и Pagetree: Pagetree и код PHPStorm

Ответы [ 3 ]

0 голосов
/ 21 марта 2019

Ваша проблема в том, что сенсорный экран встроен в загрузчик.
В чисто настольной версии вы можете сделать всплывающее меню при наведении мыши, но на сенсорном экране у вас нет мыши. Таким образом, пользователь сенсорного экрана, у которого нет мыши и который хочет, чтобы меню вылетало, должен «щелкнуть» по пункту меню. Эта обработка событий добавляется загрузочным javascript в ваше меню.
Это приведет к проблеме: обычная ссылка на вашу страницу заблокирована.

возможные решения:

  • всплывающее окно выполняется с помощью специальной иконки.
    недостаток:

    • убедитесь, что ссылки (обработчик событий) не сложены друг в друга
    • область касания иконки может быть очень маленькой, и пользователи могут ее пропустить

  • избегать содержимого на страницах с подстраницами.
    таким образом, полный элемент меню может использоваться для управления выпадающим меню.
    недостаток:

    • у вас есть пустые страницы, так как страницы можно вызывать другими способами (например, меню хлебных крошек, прямой вызов с идентификатором в URL). Избегайте этого, используя ярлыки для каждой страницы с подстраницами. Если вы хотите контент на такой странице, создайте специальную первую подстраницу с этим контентом.
0 голосов
/ 21 марта 2019

Возможным решением является замена 

<f:link.page
pageUid="{item.uid }"
title="{item.title}"
class="nav-link{f:if(condition: item.hasSubPages, then: ' dropdown-toggle')}"
additionalAttributes="{f:if(condition: item.hasSubPages, then:'{data-toggle: \'dropdown\', aria-haspopup:\'true\', aria-expanded:\'false\',href:\'\'}')}">
{item.title}
</f:link.page>

с: 

<a
class="nav-link{f:if(condition: item.hasSubPages, then: ' dropdown-toggle')}"
href="{f:if(condition: item.hasSubPages, then:'#', else: '{item.link}')}"
{f:if(condition: item.hasSubPages, then:' data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"', else: '')}
pageUid="{item.uid}"
title="{item.title}">
{item.title}
</a>
0 голосов
/ 21 марта 2019

Я не уверен, правильно ли я понимаю вашу проблему.В случае подстраниц вы хотели бы иметь что-то вроде кнопки переключения вместо ссылки, верно?Чтобы переключить видимость подменю, верно?

Подумайте о решении так: 

<v:page.menu>
<ul class="navbar-nav">
    <f:for each="{menu}" as="item">
        <li class="nav-item px-2 {f:if(condition: item.hasSubPages, then: 'dropdown')}">
            <f:if condition="{item.hasSubPages}">
                <f:then>
                    <button class="togglesubmenu">{item.title}</button>
                    <v:menu pageUid="{item.uid}">
                        <div class="dropdown-menu">
                            <f:for each="{menu}" as="subItem">
                                <f:link.page pageUid="{subItem.uid}"
                                             title="{subItem.title}"
                                             class="dropdown-item">
                                    {subItem.title}
                                </f:link.page>
                            </f:for>
                        </div>
                    </v:menu>
                </f:then>
                <f:else>
                    <f:link.page
                            pageUid="{item.uid}"
                            title="{item.title}"
                            class="nav-link{f:if(condition: item.hasSubPages, then: ' dropdown-toggle')}"
                            additionalAttributes="{f:if(condition: item.hasSubPages, then:
                        '{data-toggle:\'dropdown\',aria-haspopup:\'true\',aria-expanded:\'false\',href:\'\'}')}">
                        {item.title}
                    </f:link.page>
                </f:else>
            </f:if>
        </li>
    </f:for>
</ul>

...