Скрипты для uKit 30.09.2017 7 810
Вертикальное меню для 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 и не только:

  • Слайдер контента или блоков (в который вы можете разместить любую пару виджетов с разным фоном и расположением): скриншот
  • Всплывающие окна для uKit: скриншот
  • uMessage - Конструктор мессенджеров и социальных сетей для сайтов: скриншот

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


Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице: blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). 
Всего комментариев: 7
avatar
1
Спойлер открывается на секунду и сразу же сворачивается. В чем ошибка?
avatar
0
2
Вы наблюдаете точно такое же на демо-странице? Если нет, то покажите, пожалуйста, ваш сайт.
Если речь идет про загрузку сайта и вы видите некоторое время все ваши пункты меню, то так происходит загрузка скрипта, с небольшой задержкой в зависимости от скорости интернета
avatar
3
Нет, на демо-странице все ОК.  
https://cmbuh.ru/uo
avatar
0
4
У вас установлена два кода, меню и спойлеров сразу. Используйте пожалуйста, один из вариантов или распределите правильно по страницам: http://screenshot.ukit.com/src/god2/2017-10-26-21-28-14.png
avatar
5
Спасибо! Попробую - отпишусь, чтобы людей не пугать)))
avatar
6
Подскажите горизонтально сделать можно? И закрепить под шапкой меню, при прокрутке.
avatar
0
7
Горизонтальное меню предусмотрено во всех шаблонах uKit.
avatar