Основание: Как быстро переключаться между Основным меню и Выпадающим меню? - PullRequest
Новая
       28

Основание: Как быстро переключаться между Основным меню и Выпадающим меню?

0 голосов
/ 18 февраля 2019

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

Мобильный вид: https://imgur.com/a/biMWB4b

Рабочий стол: https://imgur.com/a/ZIHWqHL

Я написал код Jquery, которыйперемещает содержимое меню из одного места в другое, в зависимости от размера мультимедиа.

HTML-код: 

<ul class="dropdown menu" id="desktop-place" data-dropdown-menu>
    <li class="show-for-small-only">
        <a>Drop</a>
        <ul class="menu" id="mobile-place">
        </ul>
    </li>
    <li class="content"><a>One</a></li>
    <li class="content"><a>Two</a></li>
    <li class="content"><a>Three</a></li>
    <li class="content"><a>Four</a></li>
</ul>

Код JS: 

$(document).foundation();

function moveFromBasicToDropdown() {
    $('#mobile-place').append($('.content'));
}
function moveFromDropdownToBasic() {
    $('#desktop-place').append($('.content'));
}

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) {
    if (newSize === 'small') {
        moveFromBasicToDropdown();
    }
    else {
        moveFromDropdownToBasic();
    }
});

if (Foundation.MediaQuery.is('small only')) {
    moveFromBasicToDropdown();
}
else {
    moveFromDropdownToBasic();
}

Код работает, как и ожидалось,Однако я не уверен, что эта функция уже поддерживается в Foundation;если нет, то мне интересно, правильно ли это реализовывать?

...