Вертикальное меню на uKit

В конструкторе uKit в данное время отсутствует добавление виджета вертикального меню. Такой вид меню удобен для интернет магазинов и многостаночников в которых находится каталог материалов (категорий) в которых нужно показать структуру сайта и упростить навигацию по нему.

Преимущества данного скрипта: меню создаётся из стандартного вложенного пункта, массовое редактирование и добавление новых пунктов происходит также внутри стандартного виджета, без редактирования HTML кода.


 

Настройки Меню

Если Вы не знаете, как сделать вложенный пункт меню, посмотрите это видео — YouTube

  1. Настраиваем пункты меню и указываем ссылку «Внешняя» — #menutop (Скриншот)
  2. Если у Вас будут насколько категорий как в «примере сайта» то Вам нужно добавить ещё один вложенный пункт меню и указать ссылку «Внешняя» — #menuopen (скриншот)
  3. Установка вертикального меню происходит через виджет «иконка» установите виджет и укажите ссылку — #menuukittop (Скриншот)

Вы также можете поменять цвета и размер шрифтов. В самом начале кода присутствуют пояснительные подписи, ориентируясь на «демо сайт» Вы можете указать свои значения.

Видео-инструкция


 

Установка скрипта

Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:

Код

<style>
    #main #body .menuukittop [href="#menutop"][data-type="external"] {
        background-color: #2f4d99 !important; /*Фон название вертикальное меню*/
        color: white !important; /*Цвет название вертикальное меню*/
    }
    #main #body .menuukittop {
        background-color: #f6f6f6;/*Меню цвет фона*/
    }
    #main #body .menuukittop .ul-w-mainmenu-item-link {
        color: #000000;/*Цвет пунктов меню*/
    }
    #main #body .menuukittop .menu-ukit-top-open~.ul-w-mainmenu-nested .ul-w-mainmenu-item-link:hover,
    #main #body .menuukittop .ul-w-mainmenu-item-link:hover,
    #main #body .menuukittop .menu-ukit-top-open~.ul-w-mainmenu-nested .ul-w-mainmenu-active-item .ul-w-mainmenu-item-link,
    #main #body .menuukittopopen~.ul-w-mainmenu-nested .ul-w-mainmenu-active-item .ul-w-mainmenu-item-link {
        background-color: #1273eb !important;/*Синий фон активной вкладки и при наведении*/
        color: #ffffff !important; /*Белый цвет текста на синем фоне активной вкладки и при наведении*/
    }
    #main #body .menuukittop .menuukittopopen,
    #main #body .ul-w-mainmenu-item.ul-w-mainmenu-have-nasted.ul-w-mainmenu-have-nested .menu-ukit-top-open {
        background-color: #ffbb02 !important;/*Оранжевый фон*/
        color: white !important;/*Белый цвет текста на оранженом фоне*/
    }
    #main #body .menuukittop .ul-w-mainmenu-item-link {
        font-size: 20px !important;/*Размер шрифта*/
        padding: 10px 20px;/*Отступы у пункта меню*/
        line-height: 28px !important;/*Высота пункта меню*/
    }
</style>

<script>
    require(['jquery'], function($) {
        $(function() {
            $('[href^="http://#"]').each(function() {
                $(this).attr('href', $(this).attr('href').replace('http://', ''));
            });

            $('[href*="#menuukittop"]').addClass("menuukittop");
            $(".ul-w-mainmenu-have-nasted:eq(0)").appendTo('.menuukittop');
            $('[href*="#menutop"]').addClass("menuukittopopen");
            $('[href*="#menuopen"]').addClass("menu-ukit-top-open");
            $('.header-content-mainmenu').removeClass("menu-ukit-top-open");

            $('.menuukittopopen').click(function() {
                $('.menuukittop .ul-w-mainmenu-nested:eq(0)').addClass('opennewukittop').show(300);
            }, function() {
                $('.menuukittop .ul-w-mainmenu-nested:eq(0)').removeClass('opennewukittop').toggle(300);
            });

            $('.menu-ukit-top-open').click(function() {
                $('.menu-ukit-top-open .ul-w-mainmenu-nested:eq(0)').addClass('opennewukittop').show(300);
            }, function() {
                $('.menu-ukit-top-open .ul-w-mainmenu-nested:eq(0)').removeClass('opennewukittop').toggle(300);
            });

            $(".menuukittop .menu-ukit-top-open").click(function() {
                $(this).toggleClass("active");
            });
        });
    });
</script>

<style>
    @media screen and (min-width: 768px) {
        .menuukittopopen~.ul-w-mainmenu-nested {
            display: block !important;
            width: 100% !important;
            opacity: 1 !important;
            height: 100% !important;
        }
    }

    .header .menuukittopopen {
        display: none !important;
    }

    #main #body .menuukittop .ul-w-mainmenu-item {
        border: none !important;
    }

    .menuukittop span {
        display: none;
    }

    .menuukittop a,
    a.menuukittop {
        text-decoration: none !important;
    }

    .menuukittop .ul-w-mainmenu-nested {
        width: 100% !important;
    }

    .menuukittop .ul-w-mainmenu-nested {
        display: none;
    }

    #main #body .menuukittop a,
    #main #body .menuukittop .ul-w-mainmenu-item {
        -webkit-transition: 0.3s all ease;
        -moz-transition: 0.3s all ease;
        -ms-transition: 0.3s all ease;
        -o-transition: 0.3s all ease;
        transition: 0.3s all ease;
    }

    #main #body .menuukittop .ul-w-mainmenu-item-link {
        border: none !important;
    }

    .menuukittopopen:after,
    .menu-ukit-top-open:after {
        font: normal normal normal 20px/1 'FontAwesome';
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        content: "\f0dd";
        color: currentColor;
        position: relative;
        float: right;
        -webkit-transform: rotate(0deg) translateY(0%) translateX(0%);
        -moz-transform: rotate(0deg) translateY(0%) translateX(0%);
        -ms-transform: rotate(0deg) translateY(0%) translateX(0%);
        transform: rotate(0deg) translateY(0%) translateX(0%);
        -webkit-transition: transform .4s ease, color .0s ease !important;
        transition: transform .4s ease, color .0s ease !important;
    }

    #main #body .menuukittopopen~.ul-w-mainmenu-nested .ul-w-mainmenu-active-item .menu-ukit-top-open~.ul-w-mainmenu-nested,
    .menu-ukit-top-open.active~.ul-w-mainmenu-nested {
        display: block;
    }

    #main #body .menuukittop .menu-ukit-top-open~.ul-w-mainmenu-nested .ul-w-mainmenu-item-link {
        background-color: transparent !important;
        color: black !important;
    }
    @media screen and (min-width: 768px) {
    #main #body .menuukittop [href="#menutop"]:after {
        display: none !important;
    }
  }
</style>


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

 

Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице: blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). 
Всего комментариев: 5
avatar
1
Спасибо, но после того как гугл реклама заблокировала мне все сайты, на которых были использованы ваши скрипты, больше нет желания с вами работать.
avatar
1
2
1. С нами работать? Это ваше право, мы лишь просто размещаем скрипты функционала и там нет никакого вредоносного кода. Если же вам писал Google об этом то нужно было уточнить, с чего они это решили, они часто ошибаются и даже системные коды uKit помечают вредоносными, пример: https://screenshot.ukit.com/src/goalov/15/2020-06-30-03-08-48.png.
2. С нашей же стороны таких жалоб от Google нет: https://screenshot.ukit.com/src/goalov/15/2020-06-30-03-05-36.png
3. Даже просто бывает, что сайт забыл продлить SSL-сертификат и его Google помечает вредоносным сразу. В вашем случае, скорее всего стоял какой-то старый код с HTTP-протоколом, который нужно было просто обновить и прежде чем делать такие поспешные выводы, нужно сначала почитать об этом по больше информации в интернете.
avatar
3
Сайты со скриптами гугл не блокирует сам пробовал а конструктор этот очень хороший просто когда не знаешь код думаешь что причина в нём а дело было в вашем контенте, не нужно продавать то что запрещено, у меня ни один сайт гугл не банили и все они на этом конструкторе, вас либо жаба давит или ещё что но вы деревянный в этом плане чтобы такое тут писать, позвоните в гугл и узнайте что не так, индюк! cool
Поробуй сам написать сайт он у тебя не то что в гугл а сам сервер заблокируюет азахаха
avatar
4
Подскажите, какой шаблон используется на "демо-сайте"?
avatar
0
5
Используется шаблон "aster" (можете найти через поиск). Но шаблон кардинально изменен, при помощи дополнительного кода.

Если у вас нет опыта работы с кодом, то  можете заказать сайт у разработчиков: https://ukit.top/rukovod....na_ukit  или автора статьи
avatar