Красивое адаптивное меню под 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й? Второй день пытаюсь понять что к чему, но похоже мозгов не хватает. Заранее спасибо за ответ.

[MODx] Подсказки по API

[MODx] minishop2 tips

[Code helper] Заготовки для работы

Преобразовать JSON в HTML

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

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

[MODX, pdoCrumbs] Вывести список всех родителей в ТВ поле ресурса

[JS] Связать значения инпутов через jQuery (биндинг)

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

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

[OpenCart 1.5.1] Массово изменить адреса картинок у товаров

Вывести список всех файлов на сервере (и размер файла)

[PHP] Фиксированная сортировка массива на основе хэша

Курсы валют с cbr.ru на PHP, с запасным вариантом и кэшированием

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

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

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

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

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

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

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

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

[PHP] Узнать скорость выполнения кода. Простой таймер PHP

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

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

[MODX, MiniShop2] Отредактировать шаблон письма

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

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

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

[JS] Маска для ввода телефона +7(___)___-__-__

[MODX, MiniShop2] Добавить в письмо контактную информацию

[MODX, MiniShop2] Email сделать не обязательным полем

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

[MODX, MiniShop2] Изменить формат номера заказа

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

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

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

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

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

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

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

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

Передать файл с одного на другой сервер

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

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

[MODX, MIGX] Простейшая авторизация

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

[MODX] Узнать размер файла

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

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

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

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

[MODX, MIGX] Вывести getImageList только если он не пустой

Bxslider отображение картинок после полной загрузки слайдера

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

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

[MODX, MIGX] Простой аудио-плеер HTML5

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

[OpenCart] Вывести на главную все категории с картинками

[PHP] Получить древовидный массив за один запрос к базе

Вырезать кавычки - фильтр MODx

Регулярное выражение

[MODx] Генератор настроек MIGX

[MODx, MIGx] Документация на русском по MIGx

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

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

[MODx,MiniShop2] Не приходит почта администратору

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

[Opencart] Вернуть английский язык, если вы его удалили

Универсальная форма обратной связи — feedBackForm

[MODx, miniShop2] Генерация YML для выгрузки в маркет

Редиректы

[MODx] pdoPage pagination css

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

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

[MODx, minishop] Фильтрация по TV параметрам в msProducts

Регулярные выражения notepad++ примеры

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

[JS] Заготовочки

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

[MODx, XML] Ответ для сервиса moneta.ru

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

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

[PHP] Простое логирование

[OpenCart] Вывести модуль напрямую через контроллер

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

[MODx, MIGX] Примеры использования

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

[Opencart, FilterPro] Не работает пагинация

[OpenCart] Заготовки для автоматического заполнения товарами магазина 1.5.5.1.2

[PHP] Разные фишки, заготовки

[PHP, JSON] Пример перевода с помощью Yandex Translate API

[MySQL] Примеры запросов

[MODx] Вывод tv-параметров в формате [название TV] - [значение TV]

[MODx] Дата на русском

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

[Opencart] API tips

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

[PHP] Загрузить файл для постобработки

[Opencart 2] Показывать в категориях

[MODx, Quip] Более рабочий вариант.

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

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

[MODx] getResources заготовки

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

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

Удалить HTML-теги span, и стили из тега br

Полезные ссылки

Все записи