jQuery, плагин slicknav, длинное меню переполнено

Question

Я использую плагин slicknav для моего мобильного меню, но сталкиваюсь со следующей проблемой: меню должно быть зафиксировано сверху, но мое меню довольно длинное, и для маленьких экранов невозможно перемещаться по всем пунктам. Я попытался отделить мобильный триггер (позиционирование фиксировано) и само меню относительно, но это не работает, а также добавить overflow-y при прокрутке и auto для самой обертки меню. Кто-нибудь может помочь мне с каким-то решением или сталкивался с подобным с этим плагином? HTML:

<ul id="menu2">
    <li>Parent 1
        <ul>
            <li><a href="#">item 3</a></li>
            <li>Parent 3
                <ul>
                    <li><a href="#">item 8</a></li>
                    <li><a href="#">item 9</a></li>
                    <li><a href="#">item 10</a></li>
                </ul>
            </li>
            <li><a href="#">item 4</a></li>
        </ul>
    </li>
    <li><a href="#">item 1</a></li>
    <li>non-link item</li>
    <li>Parent 2
        <ul>
            <li><a href="#">item 5</a></li>
            <li><a href="#">item 6</a></li>
            <li><a href="#">item 7</a></li>
        </ul>
    </li>
</ul>

ЯШ:

$('#menu2').slicknav({prependTo:'#mobileMenuHolder'});

CSS: (не работает)

#mobileMenuHolder, .slicknav_menu{
  overflow-y: scroll;
  position: relative;
}

mobileMenuHolder содержит меню и находится в нижней части фиксированного div.

Спасибо за всю предоставленную помощь.

jsfiddle

Answer 1

Я знаю, что прошло много времени с момента публикации проблемы, но я столкнулся с той же проблемой, поэтому я опубликую здесь свое решение. Когда вы запускаете меню slicknav, вы должны добавить соответствующие обратные вызовы для переключения определенного класса в контейнер в открытом состоянии, а лучше в теле. Таким образом, если у вас есть возможность стилизовать открытое состояние и добавить немного CSS, чтобы скрыть полосу прокрутки на экранах небольшой высоты.

Вот как вы запускаете slicknav:

var $container = $('body'); $('#menu2').slicknav({ duplicate:false, //adjust if you have an un-responsive menu to begin with label: 'Menu', beforeOpen: function(e) {
if(e.hasClass('slicknav_btn')){ $container.addClass('slicknav_open'); } }, beforeClose: function(e) { if(e.hasClass('slicknav_btn')){ $container.removeClass('slicknav_open'); } } });

и затем CSS (поместите это в ваш запрос @media):

html,body{
    height:100%;
    margin:0
}

.slicknav_open .slicknav_menu {
    height: 100%;
    overflow-y: scroll;
    width: calc(100% + 22px);
    margin-right: -22px;
    position:fixed;
    top:0;
    left:0;

}
#menu2{
 height: auto;   
}

Вот скрипка для демонстрации: http://jsfiddle.net/9vvanrj2/

Answer 2

Возможно, вам лучше изменить CSS самого плагина. Можете ли вы опубликовать пример jsfiddle? Проблема могла быть исправлена ​​в определениях пикселей. Я не слишком знаком с мобильными устройствами, но наверняка это CSS.