9 922 Скрипты / Menu & Nav

Mega dropdown меню

Mega dropdown меню - jQuery плагин для реализации большого выпадающего меню с множеством подкатегорий для сайтов с большим количеством контента.

HTML

Разметка html состоит из двух основных элементов: <header> - содержит выпадающее меню, и <main> - для остального вашего контента.
Блок .cd-dropdown-wrapper содержит триггер .cd-dropdown-trigger для показа меню, и блок .cd-dropdown состоящим из неупорядоченных списков.

CSS

Для мобильных устройств основная идея состояла в том, чтобы позволить пользователю полность сосредоточиться на контенте раскрытого выпадающего меню. Именно поэтому мы назначили позицию fixed для выпадающего списка и установили ширину и высоту 100%. По умолчанию меню скрыто translateY(-100%). Когда пользователь кликает по триггеру, то добавляется класс .dropdown-is-active к выпадающему меню, для которого применяется свойство translateY(0) и меню возвращается в область просмотра (становится видимым).

.cd-dropdown {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(-100%);
    transition: transform 0.5s;
}
.cd-dropdown.dropdown-is-active {
    transform: translateY(0);
}


Когда пользователь выбирает новый подуровень в выпадающем меню, видимые элементы выходят за границы viewport (за счет добавления класса .move-out), в то время, как новые элементы плавно появляются в viewport (удаляется класс .is-hidden который принадлежит их родителю - ul)

.cd-dropdown-content.is-hidden, .cd-dropdown-content ul.is-hidden {
    /* push the secondary dropdown items to the right */
    transform: translateX(100%);
}
.cd-dropdown-content.move-out > li > a, .cd-dropdown-content ul.move-out > li > a {
    /* push the dropdown items to the left when secondary dropdown slides in */
    transform: translateX(-100%);
}


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

Скачать 2201Загрузок 60,82 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи