Вход Регистрация
Скрипты для uKit 30.09.2017 14 7164
Вертикальное меню для uKit / Спойлер категорий

Вертикальное меню для uKit / Спойлер категорий

По умолчанию в конструкторе uKit для всех сайтов выбрано горизонтальное меню. Но структура сайта не всегда позволяет использовать такое меню. Нередко владельцы сайтов интересуются вертикальным меню по типу гармошки/аккордеона. 

Такое меню удобнее для сайтов, в которых немного разделов, но все они должны быть быстро доступны клиентам. Как правило, меню «Аккордеон» размещается сбоку сайта (например справа или слева от основного контента) и в нем выделены только основные разделы, а если нажать на один из разделов, посетитель увидит подразделы, которые в него входят. 
Такой вид меню популярен для интернет магазинов, где нужно удобно представить каталог товаров. Меню «Аккордеон» позволяет создать двухуровневую структуру. Если вам необходимо уместить много пунктов меню или ваш сайт имеет сложную структуру (более 3 подкатегорий) удобнее будет использовать стандартное горизонтальное меню от uKit.

 


Установка

1. Размещаем меню при помощи виджета "Текст" на сайте. Вам необходимо разместить текст и использовать только "Заголовок 4". Текст должен быть расположен без отступов (Клавиша ENTER), отступы между пунктами меню необходимо добавлять при помощи клавиш (CTRL+ENTER или SHIFT+ENTER). 
Раскрывающийся пункт меню указывается жирным текстом, а весь остальной текст/пункты расположены ниже указываются обычным шрифтом, пример расположения: скриншот.


2. Выбираем стилистику оформления меню. Выбрать стилизацию, вы можете на нашей демо-странице, а затем исходя из порядкового номера установить код на сайт:

 

Первый вариант оформления:
 

Код
<style>

h4.shBlock {
    display: grid;  
}
  span.zagolovok {
    list-style-type: none;
        font-weight: 500!important;}
  h4.shBlock {
    list-style-type: none;
    border-bottom: 1px solid hsla(0,0%,100%,.1);
    padding: 00px 0px 0px 10px;
    border-color: currentColor;
    }
#body-fict h4.shBlock {
    line-height: 50px!important;
}
  h4.shBlock:after {
    cursor: pointer;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
h4.shBlock:after {
    height: 10px;
    width: 10px;
    border-right: 2px solid hsla(0,0%,100%,.1);
    border-bottom: 2px solid hsla(0,0%,100%,.1);
      margin-top: 19px;
    right: 20px;
    -webkit-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    -webkit-transition: border-color .2s ease-out 0s;
    transition: border-color .2s ease-out 0s;
    will-change: border-color;
}
h4.shBlock:after,h4.shBlock:before {
    content: "";
    display: inline-block;
    position: absolute;
}
h4.shBlock:hover:after {
    border-color: currentColor;
border-color: hsl(0, 0%, 100%);
    -webkit-transition: none;
    transition: none;
  border-color: currentColor;
}
 h4.shBlock.active:after {
    border-color: currentColor;
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
        -webkit-transition: -webkit-transform .3s,opacity .2s;
    -moz-transition: -moz-transform .3s,opacity .2s;
    transition: transform .3s,opacity .2s;
}
  span.zagolovok {
    list-style-type: none;
    font-weight: 500!important;
    cursor: pointer;
}
  h4.shBlock:after, h4.shBlock:before {
    border-color: currentColor;
}
#body .ul-widget-wysivig h4 {
    -webkit-animation: swing-in-left-fwd 0.9s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1s both;
            animation: swing-in-left-fwd 0.9s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1s both;
}

@-webkit-keyframes swing-in-left-fwd {
  0% {
    -webkit-transform: rotateY(100deg);
            transform: rotateY(100deg);
    -webkit-transform-origin: left;
            transform-origin: left;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    -webkit-transform-origin: left;
            transform-origin: left;
    opacity: 1;
  }
}
@keyframes swing-in-left-fwd {
  0% {
    -webkit-transform: rotateY(100deg);
            transform: rotateY(100deg);
    -webkit-transform-origin: left;
            transform-origin: left;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    -webkit-transform-origin: left;
            transform-origin: left;
    opacity: 1;
  }
}
</style>

 

Второй вариант оформления:
 

Код
<style>

h4.shBlock {
    padding-left: 20px;
    line-height: 50px!important;
    cursor: pointer;
    display: grid;  
    color: #4c4946;
    text-shadow: 1px 1px 1px rgba(255,255,255,.8);
    background: -moz-linear-gradient(top,#fff 1%,#eaeaea 100%);
    background: -webkit-gradient(linear,left top,left bottom,color-stop(1%,#fff),color-stop(100%,#eaeaea));
    background: -webkit-linear-gradient(top,#fff 1%,#eaeaea 100%);
    background: -o-linear-gradient(top,#fff 1%,#eaeaea 100%);
    background: -ms-linear-gradient(top,#fff 1%,#eaeaea 100%);
    background: linear-gradient(top,#fff 1%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea', GradientType=0 );
    box-shadow: 0 0 0 1px rgba(155,155,155,.3), 1px 0 0 0 rgba(255,255,255,.9) inset, 0 2px 2px rgba(0,0,0,.1);
}
  h4.shBlock:after {
    cursor: pointer;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
h4.shBlock:after {
    height: 10px;
    width: 10px;
    border-right: 2px solid hsla(0,0%,100%,.1);
    border-bottom: 2px solid hsla(0,0%,100%,.1);
    top: 9.5px;
      margin-top: 19px;
    right: 20px;
    -webkit-transform: translateY(-50%) rotate(45deg);
    -ms-transform: translateY(-50%) rotate(45deg);
    transform: translateY(-50%) rotate(45deg);
    -webkit-transition: border-color .2s ease-out 0s;
    transition: border-color .2s ease-out 0s;
    will-change: border-color;
}
h4.shBlock:after,h4.shBlock:before {
    content: "";
    display: inline-block;
    position: absolute;
}
h4.shBlock:hover:after {
    border-color: currentColor;
border-color: hsl(0, 0%, 100%);
    -webkit-transition: none;
    transition: none;
  border-color: currentColor;
}
 h4.shBlock.active:after {
    border-color: currentColor;
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
        -webkit-transition: -webkit-transform .3s,opacity .2s;
    -moz-transition: -moz-transform .3s,opacity .2s;
    transition: transform .3s,opacity .2s;
}
  span.zagolovok {
    list-style-type: none;
    font-weight: 500!important;
    cursor: pointer;
}
  h4.shBlock:after, h4.shBlock:before {
    border-color: currentColor;
}
#body .ul-widget-wysivig h4 {
    -webkit-animation: swing-in-left-fwd 0.9s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1s both;
            animation: swing-in-left-fwd 0.9s cubic-bezier(0.175, 0.885, 0.320, 1.275) 1s both;
}

@-webkit-keyframes swing-in-left-fwd {
  0% {
    -webkit-transform: rotateY(100deg);
            transform: rotateY(100deg);
    -webkit-transform-origin: left;
            transform-origin: left;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    -webkit-transform-origin: left;
            transform-origin: left;
    opacity: 1;
  }
}
@keyframes swing-in-left-fwd {
  0% {
    -webkit-transform: rotateY(100deg);
            transform: rotateY(100deg);
    -webkit-transform-origin: left;
            transform-origin: left;
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateY(0);
            transform: rotateY(0);
    -webkit-transform-origin: left;
            transform-origin: left;
    opacity: 1;
  }
}
  </style>

 

После того как выберите оформление этого скрипта, перейдите в панель управления вашего сайта в раздел «Свой код» и установить один из нужных стилей. Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В <head>» и выберите необходимые страницы для показа. (скриншот). После чего, нажмите кнопочку "Сохранить"


3.. Устанавливаем основной код. в этом же разделе добавляем второй код (скриншот):
 

Код
<script>
    
    require(['jquery'], function($){ 
        $(document).ready(function(){ 
            $('.ul-wysivig-editor > *, .ul-widget-wysiwyg > *').each(function(i){ 
                if($(this).children('*:eq(0)').html() != '' && $(this).attr('class') != 'tab_block'){ 
                    // данные ребенка 
                    var spo_zag = $(this).children('*:eq(0)').clone(), 
                    spo_css_bold = $(this).children('*:eq(0)').css('fontWeight'), 
                    spo_css_i = $(this).children('*:eq(0)').css('fontStyle'); 
                    
                    $(this).children('*:eq(0)').remove(); 
                    var spo_th_html = $.trim($(this).html()); 
                    if((spo_css_bold == 'bold' || spo_css_bold == '700') && spo_css_i != 'italic' && spo_th_html != ''){ 
                        $(this).attr('data-block', 'block'+i+'').html('<p class="ttxt" style="display:none;">'+spo_th_html+'</p>'); 
                        spo_zag.addClass('zagolovok').prependTo('*[data-block="block'+i+'"]'); 
                        $(this).addClass('shBlock'); 
                        }else{ 
                        $(this).attr('data-block', 'block'+i+''); 
                        spo_zag.prependTo('*[data-block="block'+i+'"]'); 
                    } 
                }
            });
            
            // Клик по спойлеру 
            $('body').on('click', '.zagolovok', function(){
                $('.shBlock.active .ttxt').toggle('fast'); 
                // если нажат не по открытому
                if(!$(this).parent().hasClass('active')){
                    $('.shBlock.active').removeClass('active');
                    $(this).parent().addClass('active'); 
                    $(this).parent().children('.ttxt').toggle('fast');
                    }else{
                    $('.shBlock.active').removeClass('active');
                }
            }); 
        }); 
    }); 
</script>


Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот).
Сохраните код и опубликуйте ваш сайт.

 


Планы на будущее

В наших ближайших планах планируется следующий функционал для uKit и не только:

И другие не менее значимые интересные решения.
Также рекомендуем вам следить за нашим интернет-магазином шаблонов, в котором ожидается большое пополнение, которое будет полезно вебмастерам\студиям или фрилансерам, которые разрабатывают сайты для своих клиентов.


Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице: blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). 
Демо страница Написать автору статьи Донат автору
Похожие материалы:
Всего комментариев: 14
avatar
0 Спам
1
Спойлер открывается на секунду и сразу же сворачивается. В чем ошибка?
avatar
0
2
Вы наблюдаете точно такое же на демо-странице? Если нет, то покажите, пожалуйста, ваш сайт.
Если речь идет про загрузку сайта и вы видите некоторое время все ваши пункты меню, то так происходит загрузка скрипта, с небольшой задержкой в зависимости от скорости интернета
avatar
0 Спам
3
Нет, на демо-странице все ОК.  
https://cmbuh.ru/uo
avatar
0
4
У вас установлена два кода, меню и спойлеров сразу. Используйте пожалуйста, один из вариантов или распределите правильно по страницам: http://screenshot.ukit.com/src/god2/2017-10-26-21-28-14.png
avatar
0 Спам
5
Спасибо! Попробую - отпишусь, чтобы людей не пугать)))
avatar
0 Спам
6
Подскажите горизонтально сделать можно? И закрепить под шапкой меню, при прокрутке.
avatar
0
7
Горизонтальное меню предусмотрено во всех шаблонах uKit.
avatar
0 Спам
8
Здравствуйте! А если все таки нужно отдельное горизонтальное? Можно?
avatar
0
9
Использовать любое стороннее решение, они все по сути являются универсальными, пример: https://yraaa.ru/publ/1/4-1-0-645
А еще легче это сделать из виджета "Кнопка" (если не нужно выпадающее меню)
avatar
1 Спам
10
На моем шаблоне меню уже изначально работает, выводит категории товаров. Хочу изменить их.  Переходит все в текст. Делаю по инструкции. Не пойму почему не получается.... может что-то не описано. Добавляю текстовой виджет, пишу жирным первый пункт, использую (заголовок 4) пишу далее пункты меню отступы cntr+entr   Не выходит никак..... Помогите
avatar
0
11
Без адреса сайта, вам никто не сможет помочь, указывайте адрес.
avatar
0 Спам
12
Как такое меню отображается на мобильной версии?
avatar
0
13
Можете посмотреть на демо-странице
avatar
0
14
Решение устарело, советуем перейти на: https://ukit.top/scripts/vertikalnoe_menju_dlja_ukit
Войдите:
avatar