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

<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>