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

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

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

[MODx] minishop2 tips

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Все записи