Строка заголовка Foundation 6 не прокручивается, когда меню становится длинным - PullRequest
Новая
       52

Строка заголовка Foundation 6 не прокручивается, когда меню становится длинным

0 голосов
/ 16 июня 2020

Проблема в нескольких словах: строка заголовка Foundation 6 не прокручивается, когда она превышает длину экрана и установлена ​​в режим аккордеона.

Я установил стандарт Меню верхней панели и разместил строку заголовка сверху, как описано здесь .

Таким образом, строка заголовка выглядит так: 

<div class="cell" data-sticky-container>
    <div class="sticky" data-sticky data-options="marginTop:0;stickyOn:small">
        <div class="title-bar" data-responsive-toggle="top-bar" data-hide-for="medium" data-animate="hinge-in-from-top hinge-out-from-top">
            <div class="grid-x" style="width:100%">
                <div class="cell shrink">
                    <button class="menu-icon" type="button" data-toggle></button>
                </div>
            </div>
        </div>
    </diV>
</div>

Верхняя панель имеет следующую структуру: 

<div class="top-bar" id="top-bar" data-disable-hover="false">
    <div class="top-bar-left">
        <ul class="menu" data-responsive-menu="small-accordion medium-dropdown" data-multi-open="false">
           <li>Menu One</li>
               <a>Submenu One</a>
               <ul>
                   <li>
                       <a>Subpoint One</a>
                       <a>Subpoint Two</a>
                       <a>Subpoint Three</a>
                   </li>
               </ul>
           </li>
        </ul>
    </div>
</div>

В моем случае там просто довольно много больше пунктов меню и подменю, что приводит к тому, что меню превышает длину экрана на некоторых устройствах, особенно когда раскрывающиеся списки (= гармошки на маленьких экранах) открываются и добавляют еще несколько строк недвижимого меню.

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

Для полноты картины. Все два вышеуказанных блока заключены в два контейнера: 

<div class="cell" data-sticky-container>
    <div data-sticky data-options="marginTop:0;stickyOn:small">

Они служат для закрепления строки заголовка в верхней части экрана также на маленьких экранах.

Таким образом, вопрос: есть ли способ заставить меню аккордеона на маленьких экранах прокручиваться?

Любая помощь приветствуется. : -)

Редактировать

Проблема в том, что меню было закреплено. Есть ли способ сделать так, чтобы само меню верхнего уровня было закреплено, а открывающееся подменю можно было прокручивать?

...