Для того, чтобы выпадающее меню работало, необходимо подключить базовый функционал шапки. Инструкцию по его установке можно найти здесь. Если у вас уже установлена шапка, этот шаг можно пропустить.
1
2
Создайте Zero-блок с меню и присвойте ему класс .uc-menu
Фон блока должен быть прозрачным. Если вы хотите, чтобы при раскрытии меню появлялось затемнение, добавьте фильтр в настройках фона Zero-блока и поставьте его высоту в 100% экрана.
3
Добавьте в хэдер свои кнопки открытия/закрытия меню. Для кнопки открытия поставьте ссылку #menu, а для закрытия – #menu-close
Если вы хотите, чтобы меню раскрывалось на весь экран, переместите кнопку закрытия в блок с меню и поставьте галочку в настройках модификации напротив параметра «Раскрывать на весь экран».
4
Задайте в настройках модификации параметры анимации меню
5
Скопируйте код и вставьте его в блок T123 после блока с меню и кода с хэдером
Чтобы в выпадающих меню выделялась активная страница, присвойте ссылкам класс .page. Если у ссылок есть дополнительные элементы (шейпы, иконки и др.), присвойте им класс .page-elem.
Для работы этой функции необходимо самостоятельно задать стили ссылкам и их элементам через CSS. Текущей ссылке и её элементам присваивается класс .current, используйте его для настройки активного состояния.
Видео скоро появится…
Настройки модификации
Настройки модификации
Анимация раскрытия:
Раскрывать на весь экран:
Если включено, открытое меню будет перекрывать шапку, если нет – отображаться под ней
selector;Класс хэдера;string;-
params.hideOffset;Высота в пикселях, после прокрутки на которую хэдер будет скрываться;number;-
params.pages;Класс ссылок на другие страницы;string;'.page'
params.elems;Класс дополнительных элементов для ссылок на другие страницы (шейпы, линии, иконки и др.);string;'.page-elem'
params.transition;Длительность перехода для хэдера и его элементов в миллисекундах;number;300
params.easing;Функция перехода для хэдера и его элементов;string;'ease-in-out'
selector;Класс выпадающих меню;string;-
params.link;Класс ссылок, по которым открываются выпадающие меню;string;'.submenu'
params.linkElems;Класс элементов для ссылок, по которым открываются выпадающие меню ;string;'.submenu-elem'
params.pages;Класс ссылок на страницы внутри выпадающего меню;string;'.page'
params.elems;Класс элементов для ссылок внутри выпадающего меню;string;'.page-elem'
params.transition;Длительность перехода для хэдера и его элементов в миллисекундах;number;300
params.easing;Функция перехода для хэдера и его элементов;string;'ease-in-out'
selector;Класс меню, для которого работает скрипт;string;-
params.pages;Класс для ссылок на другие страницы;string;'.page'
params.elems;Класс для дополнительных элементов для ссылок на другие страницы (шейпы, иконки и др.);string;'.page-elem'
params.open;Ссылка для кнопки открытия меню;string;'#menu'
params.close;Ссылка для кнопки закрытия меню;string;'#menu-close'
params.fullscreen;Раскрытие меню во весь экран (игнорирование шапки);boolean;false
params.animation;Анимация раскрытия меню;string;'roll'
params.transition;Длительность перехода для хэдера и его элементов в миллисекундах;number;300
params.easing;Функция перехода для хэдера и его элементов;string;'ease-in-out'
Модификации для Zero
Оцените сервис
Нравится 100+ человек
Присоединяйтесь ко мне в Telegram-канале!
Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку
t.me/postnikovmds
Можете меня поблагодарить
Если у вас есть желание поблагодарить автора за работу, можете пожертвовать любую сумму на развитие проекта
Присоединяйтесь ко мне в Telegram-канале!
Чтобы узнавать о новых модификациях и получать оперативную тех. поддержку