Вертикальное меню на uKit
В конструкторе uKit в данное время отсутствует добавление виджета вертикального меню. Такой вид меню удобен для интернет магазинов и многостаночников в которых находится каталог материалов (категорий) в которых нужно показать структуру сайта и упростить навигацию по нему.
Преимущества данного скрипта: меню создаётся из стандартного вложенного пункта, массовое редактирование и добавление новых пунктов происходит также внутри стандартного виджета, без редактирования HTML кода.
Настройки Меню
Если Вы не знаете, как сделать вложенный пункт меню, посмотрите это видео — YouTube
- Настраиваем пункты меню и указываем ссылку «Внешняя» — #menutop (Скриншот)
- Если у Вас будут насколько категорий как в «примере сайта» то Вам нужно добавить ещё один вложенный пункт меню и указать ссылку «Внешняя» — #menuopen (скриншот)
- Установка вертикального меню происходит через виджет «иконка» установите виджет и укажите ссылку — #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!important;
}
.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>». (скриншот).
Сохраните код и опубликуйте ваш сайт.
| Всего комментариев: 9 | |
Сайты со скриптами гугл не блокирует сам пробовал а конструктор этот очень хороший просто когда не знаешь код думаешь что причина в нём а дело было в вашем контенте, не нужно продавать то что запрещено, у меня ни один сайт гугл не банили и все они на этом конструкторе, вас либо жаба давит или ещё что но вы деревянный в этом плане чтобы такое тут писать, позвоните в гугл и узнайте что не так, индюк!
 Поробуй сам написать сайт он у тебя не то что в гугл а сам сервер заблокируюет азахаха | |
0
