Красивое адаптивное меню под pdoMenu

Результат:

Рарзметка HTML:

Навигация

Чанк adaptive_nav_tpl:

<li[[+classes]]>
    [[+wrapper:isnot=``:then=`<div class="mobile_opener"></div>`]]
    <a href="[[+link]]" [[+attributes]]><span>[[+menutitle]]</span></a>
    [[+wrapper]]
</li>

Высов сниппета и оберточный HTML

<div class="header_nav adaptive_nav">
    <div class="adaptive_nav_toprow clearafter">
        <div class="adaptive_nav_logo"><a href="#">Inline_logo_name</a></div>
        <div class="adaptive_nav_trigger">
            <div class="burger_title">
                Навигация
            </div>
            <div class="burger">
                <div class="burger_x"></div>
                <div class="burger_y"></div>
                <div class="burger_z"></div>
            </div>
        </div>
    </div>
    <div class="adaptive_nav_links">
        [[!pdoMenu?
            &parents=`0`
            &level=`4`
            &levelClass=`level`
            &tpl=`adaptive_nav_tpl`
        ]]
    </div>
</div>

Стили CSS:

.adaptive_nav {
	margin-top: 10px;
}
.adaptive_nav li{
    position: relative;
    font-family: "Roboto","Open Sans",Arial;
}
@media (min-width: 992px) {
    .adaptive_nav_toprow{
        display: none;
    }
    .adaptive_nav li a {
    	display: inline-block;
    	white-space: nowrap;
    	color: #000;
    	text-decoration: none;
    }
    .adaptive_nav li a > span {
    	border-bottom: 1px solid rgba(0, 0, 0, 0.22);
    }
    .adaptive_nav li a:hover span{
    	border-bottom: 1px solid #000;
    }
    .adaptive_nav li.level1{
        display: inline-block;
    }
    .adaptive_nav li.level1 > a{
        padding: 10px 20px;
        font-size: 16px;
    }
    .adaptive_nav li.level2 > a{
        font-size: 14px;
        padding: 5px 10px;
    }
    .adaptive_nav li.level2{
        display: block;
    }
    .adaptive_nav li.level1 > ul{
        /*display: block !important;*/
        opacity: 0;
        visibility: hidden;
        position: absolute;
        background: #fff;
        border-radius: 3px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
        margin: 0;
        padding: 10px;
        top: 80%;
        -webkit-transition: all 0.25s;
        transition: all 0.25s;
        z-index: 99;
    }
    .adaptive_nav ul ul:before {
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid white;
      content: "";
      height: 0;
      left: 24px;
      position: absolute;
      top: -6px;
      width: 0;
    }
    .adaptive_nav li.level1:hover > ul{
        opacity: 1;
        top: 100%;
        visibility: visible;
    }
    .adaptive_nav li.level2 ul{
        display: none;
    }
    .mobile_opener{
        display: none;
    }
}
@media (max-width: 991px) {
    .adaptive_nav_links{
        display: none;
    }
    .adaptive_nav a {
    	color: #000;
    	text-decoration: none;
    }
    .adaptive_nav li a > span {
    	border-bottom: 1px solid rgba(0, 0, 0, 0.22);
    }
    .adaptive_nav li a:hover span{
    	border-bottom: 1px solid #000;
    }
    .adaptive_nav{
        padding-top: 15px;
        padding-bottom: 15px;
    }
    .adaptive_nav_logo{
        float: left;
        white-space: nowrap;
    	display: none;
    }
    .adaptive_nav_logo a{
        line-height: 25px;
    }
    .adaptive_nav_trigger{
        /*float: right;*/
        text-align: center;
    }
    .adaptive_nav .burger {
        height: 25px;
        width: 26px;
        cursor: pointer;
        position: relative;
        display: inline-block;
        vertical-align: middle;
    }
    .adaptive_nav .burger_title {
        display: none;
        vertical-align: middle;
    }
    .adaptive_nav .burger_x, .adaptive_nav .burger_y, .adaptive_nav .burger_z {
        position: absolute;
        background: #fff;
        border-radius:2px;
        -webkit-transition: all 120ms ease-out;
        -moz-transition: all 120ms ease-out;
        -ms-transition: all 120ms ease-out;
        -o-transition: all 120ms ease-out;
        transition: all 120ms ease-out;
    }
    .adaptive_nav .burger_x, .adaptive_nav .burger_y, .adaptive_nav .burger_z {
        height: 3px; width: 26px;
        background-color: #000;
    }
    .adaptive_nav .burger_x{top:0px;}
    .adaptive_nav .burger_y{top: 11px;}
    .adaptive_nav .burger_z{top: 22px;}
    .adaptive_nav .burger .collapse{top: 11px;}
    .adaptive_nav .rotate30{
        -ms-transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
    }
    .adaptive_nav .rotate150{
        -ms-transform: rotate(150deg);
        -webkit-transform: rotate(150deg);
        transform: rotate(150deg);
    }
    .adaptive_nav .rotate45{
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .adaptive_nav .rotate135{
        -ms-transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }
    .adaptive_nav_links ul ul {
    	display: none;
    	padding-left: 20px;
    	margin-left: 15px;
    }
    .mobile_opener{
        display: inline-block;
        right: 0;
        top: 3px;
        cursor: pointer;
        text-align: center;
        background-color: #d4cad2;
        z-index: 10;
        padding: 4px 0;
        width: 32px;
        border-radius:3px;
    }
    .mobile_opener:before{
        content:"+";
        display: block;
        -webkit-transition: all 120ms ease-out;
        -moz-transition: all 120ms ease-out;
        -ms-transition: all 120ms ease-out;
        -o-transition: all 120ms ease-out;
        transition: all 120ms ease-out;
    }
    .mobile_opener.active:before{
        content:"-";
    }
    .adaptive_nav_links a{
        display: inline-block;
        padding: 7px 10px;
    }
    .mobile_opener.active + a{
        font-weight: 500;
    }
    .mobile_opener.active + a:after{
        content:":";
    }
}
@media (max-width: 380px) {
    .adaptive_nav_links ul ul {
    	display: none;
    	padding-left: 7px;
    	margin-left: 5px;
    }
}

Инструкции JS:

$('.burger').on('click', function(){
    if(!$(this).hasClass('open')){
        openMobileMenu($(this));
    }else{
        closeMobileMenu($(this));
    }
});
function openMobileMenu(t){
    $(".adaptive_nav").find(".adaptive_nav_links").slideDown();
    t.addClass('open');
    t.find(".burger_x, .burger_z").addClass('collapse');
    setTimeout(function(){
        t.find('.burger_y').hide();
        t.find('.burger_x').addClass('rotate30');
        t.find('.burger_z').addClass('rotate150');
    }, 30);
    setTimeout(function(){
        t.find('.burger_x').addClass('rotate45');
        t.find('.burger_z').addClass('rotate135');
    }, 60);
}
function closeMobileMenu(t){
    $(".adaptive_nav").find(".adaptive_nav_links").slideUp(400,function(){
            $(this).css("display","");
        });
    setTimeout(function(){
        t.removeClass('open');
        t.find('.burger_x').removeClass('rotate45').addClass('rotate30');
        t.find('.burger_z').removeClass('rotate135').addClass('rotate150');
 
        setTimeout(function(){
            t.find('.burger_x').removeClass('rotate30');
            t.find('.burger_z').removeClass('rotate150');
        }, 20);
        setTimeout(function(){
            t.find('.burger_y').show();
            t.find('.burger_x, .burger_z').removeClass('collapse');
        }, 30);
    }, 50);
}
$('.mobile_opener').on('click', function(){
    var t = $(this);
    var tUl = t.siblings("ul");
    if(tUl.css("display") == "none"){
        tUl.slideDown();
        t.addClass("active");
    }else{
        tUl.slideUp(400,function(){
            $(this).css("display","");
        });
        t.removeClass("active");
    }
});

Комментарии (0)

  1. Напишите первый комментарий
*Комментарий будет опубликован после проверки модератором

Комментарии easyComm

tantan 17 марта 2018, 22:38

Здравствуйте, спасибо за меню. Скажите а возможно ли реализовать, что бы в горизонтальном варианте меню так же отображались [+] для разворачивания подменю, и были все уровни меню а не только 2й? Второй день пытаюсь понять что к чему, но похоже мозгов не хватает. Заранее спасибо за ответ.

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

Генератор настроек MIGX

Документация на русском по MODX MIGX

Подсказки по работе и заготовки для MiniShop2

pdoPage и getImageList - Постраничная навигация MIGX

Импорт и экспорт в MiniShop2. Реализация 1

Как включить HTTPS (SSL) в MODX - Подробная инструкция

Генерация YML для выгрузки в маркет

Примеры работы с API MODX

Примеры выборки where, optionFilters, innerJoin

pThumb - ресайз изображений. Примеры использования.

Расширение свойств товаров minishop2

Примеры использования

Сайт на обслуживании (выключить сайт)

Добавить в письмо контактную информацию

Вывести getImageList только если он не пустой

Тип поля "Список ресурсов" (resourcelist) с ограничением по родителю (parents)

Оформление и настройка easyComm. Комментарии и отзывы на сайте.

Поиск на сайте с пакетом SimpleSearch

Простая и симпатичная галерея fancybox

Подсчет и вывод количества потомков ресурса в MODX

Галерея. Вывести обложки альбомов и фотографии

Вывод tv-параметров в формате -

Отредактировать письмо о заказе - добавить ТВ поле, или что-то еще

Quip для MODX. Более рабочий вариант

pdoResources Заготовки для работы

Сниппет для вывода размера и расширения файла

Простой аудио-плеер HTML5

Вывести список всех опций MiniShop2

Слайдер Slick slider в контенте ресурса

Как контролировать кэш CSS и скриптов

Изменить цену на товар в зависимости от количества при добавлении в корзину minishop2

Подключить MODX в стороннем PHP файле

Простейшая авторизация

Как создать ресурс процессором $modx->runProcessor('resource/create', $props)

Красивое адаптивное меню под pdoMenu

Массово обновить ТВ, или другое поле через базу

Создать свою страницу в админке

Изменить формат номера заказа

Сообщение о том, что сайт использует Cookie

Получить grandparent. Вывести родитель родителя

Симпатичный список файлов, загружаемых к ресурсу через MIGX

Установить шаблон по-умолчанию для новых, создаваемых ресурсов

Создать источник файлов

Вывести все доступные плейсхолдеры

Отредактировать шаблон письма

Добавить скрипт перед тегом body

Общая сумма по каждому товару в корзине Minishop2

Создать раздел с паролем на сайте MODX

Что делать если ее приходит почта администратору

Фильтрация по TV параметрам в msProducts

Дата на русском

FontAwesome - часто используемые иконки для шаблонов MODX

Создать пакет с пользовательской таблицей

Заготовки для работы

Курсы валют с cbr.ru на PHP

Загрузка сниппета после загрузки страницы через AjaxSnippet

getResources заготовки

Обязательный чекбокс при оформлении заказа

Обработка остатков заказа в miniShop2

Соответствие названия классов с названиями таблиц в MySQL

Разбить вывод pdoResources на несколько колонок (блоков)

Баннеры с использованием BannerY

Обновить alias (псевдоним) у всех ресурсов

CSS для постраничной навигации pdoPage

Вывести время загрузки (формирования) страницы

Расширить таблицу site_content (объект modResource) за 5 минут

Вырезать кавычки — фильтр-сниппет MODX

Счетчик посещений и скачиваний для сортировки ресурсов

Бесплатная доставка от 5000 рублей в MiniShop2

Динамическое поле emailSubject в FormIt

Скрыть информацию о том, что сайт работает на MODX

Отсортировать ресурсы по количеству комментариев Quip MODx

Изменить цену на товар, если в корзине лежит товар из особой категории minishop2

Создать редирект через autoRedirector API

Ответ для сервиса moneta.ru

Вывести 404 ошибку по настройке TV MODX

Cортировать по списку id в pdoResources и pdoTools

Email сделать не обязательным полем

Как разместить исходный код сниппета на сайте, в документации

Ускорить установку MODX revo до пары кликов

Постраничная навигация — набор параметров и CSS PdoPage

Сделать все элементы статичными для Git и IDE

Не работает подгрузка товаров ajax mfilter2 на мобильном

Сделать поле размер обязательным

Подключить текстовой редактор к доп. полям ресурса

Настройка стилей для комментариев Tickets

Кастомный чанк для AdminPanel

Динамическая замена шаблона ресурса - плагин

Разместить корзину внутри блока с оформлением заказа

Плагин для формирования замороженных URL с редиректом

reCaptcha не через форму (без тега <form>)

xPDO Выборка из одной таблицы с зацепкой значения из другой

Приветственный экран / заглушка на сайт

Вложенные условия в xPDO MODX

Вывести список всех родителей в ТВ поле ресурса

Как получить данные пользователя сразу после авторизации через API

Вывести список всех емэйлов miniShop2

Если getParentIds не работает в плагине

Контролировать кэширование файлов CSS и JS MiniShop2

Не приходят / не отправляются письма - в чем причина?

Кэширование в MODX: использование $modx->cacheManager

Наш сайт использует куки, нажмите «ОК» если вы не против
OK