Красивое адаптивное меню под 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

getResources заготовки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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