<script>
$(document).ready(function() {
$('.open-menu').click(function(){
$('.open-menu').fadeOut(200);$('.close-menu').fadeIn(200);
});
$('.close-menu').click(function(){
$('.close-menu').fadeOut(200);$('.open-menu').fadeIn(200);
$('.uc-m-menu button.t450__close-button').click();
});
$('.uc-m-menu').click(function(){
setTimeout(function() {
if( $('.uc-m-menu .t450__menu_show').length==0 ){
$('.close-menu').fadeOut(200);$('.open-menu').fadeIn(200);
};
}, 200);
});
let newElem = `
<div class="menu-wrapper t-text">
<div class="menu-left-col">
<div class="menu-main-link"></div>
<div class="menu-sub-link">
<div class="menu-sub-back">< Назад</div>
<div class="menu-sub-m-title"></div>
</div>
</div>
<div class="menu-right-col">
<div class="menu-contact-card">
<div class="menu-contact-city">Москва</div>
<div class="menu-contact-adress">Улица Московская, 31Б</div>
<div class="menu-contact-phone"><a href="tel:+74957777777">+7 (495) 777 77 77</a></div>
<div class="menu-contact-mail"><a href="mailto:mail@mail.ru">mail@mail.ru</a></div>
</div>
<div class="menu-contact-card">
<div class="menu-contact-city">Владивосток</div>
<div class="menu-contact-adress">Улица Владивосточная, 55А</div>
<div class="menu-contact-phone"><a href="tel:+74237777777">+7 (423) 777 77 77</a></div>
<div class="menu-contact-mail"><a href="mailto:mail@mail.ru">mail@mail.ru</a></div>
</div>
<div class="menu-contact-card">
<div class="menu-contact-city">Санкт-Петербург</div>
<div class="menu-contact-adress">улица Ленинградская</div>
<div class="menu-contact-phone"><a href="tel:+78127777777">+7 (812) 777 77 77</a></div>
<div class="menu-contact-mail"><a href="mailto:mail@mail.ru">mail@mail.ru</a></div>
</div>
<div class="menu-contact-card">
<div class="menu-contact-city">Краснодар</div>
<div class="menu-contact-adress">улица Краснодарская</div>
<div class="menu-contact-phone"><a href="tel:+7985627777777">+7 (9856) 777 77 77</a></div>
<div class="menu-contact-mail"><a href="mailto:mail@mail.ru">mail@mail.ru</a></div>
</div>
</div>
</div>
`;
$('.uc-m-menu .t450__top').append(newElem);
let mainLinkList = '';
$('.uc-m-menu .t-menu__link-item').each(function(){
let el = $(this);
let caption = el.text();
let href = el.attr('href');
let dataLink = el.attr('data-menu-submenu-hook');
mainLinkList += `<a class="main-links" href="${href}" data-menu-submenu-hook="${dataLink}">${caption}</a>`;
});
$('.menu-main-link').append(mainLinkList);
let subLinkList = '';
$('.uc-m-menu .t-menusub__link-item').each(function(){
let el = $(this);
let caption = el.text();
let href = el.attr('href');
let dataLink = el.closest('.t-menusub').attr('data-submenu-hook');
subLinkList += `<a class="sub-links" href="${href}" data-menu-submenu-hook="${dataLink}"><span>${caption}</span></a>`;
});
$('.menu-sub-link').append(subLinkList);
$('.close-menu').hide();
$('.sub-links').hide();
$('.main-links').mouseenter(function() {
$('.sub-links').hide();
$('.main-links').removeClass('active-main');
let el = $(this);
el.addClass('active-main');
let data = el.attr('data-menu-submenu-hook');
$('.sub-links[data-menu-submenu-hook="'+data+'"]').show();
let caption = el.text();
let attr = el.attr('data-menu-submenu-hook');
let width = $(window).width();
if(attr!='' && width<680 ){
el.closest('.menu-left-col').addClass('slide-menu');
$('.menu-sub-m-title').text(caption);
};
});
$('.main-links').click(function(){
// let el = $(this);
// let caption = el.text();
// let attr = el.attr('data-menu-submenu-hook');
// let width = $(window).width();
// if(attr!='' && width<680 ){
// el.closest('.menu-left-col').addClass('slide-menu');
// $('.menu-sub-m-title').text(caption);
// };
});
$('.menu-sub-back').click(function(){
$('.menu-left-col').removeClass('slide-menu');
});
$('.uc-m-menu .sub-links').click(function(){
let el = $(this);
let link = el.attr('href');
window.location.href = link;
$('.close-menu').click();
});
});
</script>
<style>
.open-menu, .close-menu {
cursor: pointer;
border-radius: 50%;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.open-menu:hover {
filter: invert(1);
}
.uc-m-menu .t450, .uc-m-menu .t450__overlay {
max-width: none !important;
height: calc(100vh - 200px);
top: 100px;
width: calc(100vw - 80px);
left: 40px;
border-radius: 30px;
overflow: auto;
}
.uc-m-menu button.t450__close-button {
display: none;
}
.uc-m-menu .t450 {
-webkit-transition: transform ease-in-out 0.6s;
-moz-transition: transform ease-in-out 0.6s;
-o-transition: transform ease-in-out 0.6s;
transition: transform ease-in-out 0.6s;
-moz-transform: translate(110%,0);
-ms-transform: translate(110%,0);
-webkit-transform: translate(110%,0);
-o-transform: translate(110%,0);
transform: translate(110%,0);
}
.uc-m-menu .t450__menu_show.t450 {
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-webkit-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
}
.uc-m-menu .t-menusub {
display: none !important;
}
.uc-m-menu nav.t450__menu {
display: none;
}
.menu-wrapper {
display: flex;
overflow: hidden;
}
.menu-left-col {
display: flex;
}
.menu-main-link {
display: flex;
flex-direction: column;
position: relative;
}
.menu-left-col>div {
padding: 20px;
box-sizing: border-box;
transition: all 0.3s ease-in-out;
}
.menu-sub-link {
display: flex;
flex-direction: column;
padding-top: 30px !important;
}
a.main-links {
color: #fff !important;
font-weight: 400;
font-size: 36px;
margin-bottom: 14px;
opacity: 0.5;
}
a.sub-links {
color: #fff !important;
font-weight: 400;
font-size: 26px;
margin-bottom: 14px;
}
.menu-right-col {
display: flex;
flex-wrap: wrap;
}
.menu-right-col>div {
width: 50%;
padding: 30px 30px 30px 30px;
box-sizing: border-box;
color: #fff;
}
.menu-contact-city {
font-size: 22px;
margin-bottom: 16px;
font-weight: 600;
}
.menu-contact-adress {
opacity: 0.6;
font-size: 14px;
}
.menu-contact-phone a {
font-size: 22px;
color: #fff !important;
}
.menu-contact-phone {
margin: 7px 0;
opacity: 0.6;
}
.menu-contact-mail a {
color: #fff !important;
text-decoration: underline !important;
opacity: 0.6;
}
.uc-m-menu .t450__rightcontainer {
display: flex;
justify-content: space-between;
padding-left: 60%;
}
.uc-m-menu .t450__right_descr a {
color: #fff !important;
font-size: 14px;
}
.uc-m-menu .t450__right_descr {
padding-left: 30px;
}
.uc-m-menu .t450__container:after {
content: "";
width: 2px;
height: 100%;
background-color: #fff;
position: absolute;
left: 24%;
top: 0;
}
.menu-right-col {
width: 40%;
}
.menu-left-col {
width: 60%;
}
.menu-main-link {
width: 40%;
}
.menu-sub-link {
width: 60%;
}
a.sub-links, a.sub-links span {
transition: all 0.3s ease-in-out;
}
a.sub-links:hover span {
box-shadow: 0 2px 0 0 #fff;
}
a.sub-links:after {
content: "";
width: 25px;
height: 25px;
background-image: url(https://static.tildacdn.com/tild6630-3462-4461-b432-626537356465/Group_256.svg);
position: absolute;
top: 7px;
right: 30px;
transition: all 0.3s ease-in-out;
opacity: 0;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
a.sub-links {
position: relative;
}
a.sub-links:hover:after {
opacity: 1;
}
a.main-links {
transition: all 0.3s ease-in-out;
position: relative;
}
a.main-links:hover, a.main-links.active-main {
opacity: 1;
}
a.main-links:after {
content: "";
width: 20px;
height: 20px;
background-image: url(https://static.tildacdn.com/tild3230-6563-4264-a166-363436363834/Subtract.svg);
position: absolute;
background-repeat:no-repeat;
background-size: contain;
top: 17px;
right: 19px;
transition: all 0.3s ease-in-out;
opacity: 0;
}
a.main-links:hover:after, a.main-links.active-main:after {
opacity: 1;
}
a.main-links[data-menu-submenu-hook=""]:after {
opacity: 0 !important;
}
.menu-sub-back,
.menu-sub-m-title{
display: none;
}
@media screen and (max-width:1450px){
.menu-main-link {
width: 50%;
}
.menu-sub-link {
width: 50%;
}
.uc-m-menu .t450__container:after {
left: 30%;
}
a.sub-links:after {
right: -10px;
}
.menu-contact-phone a {
font-size: 18px;
}
}
@media screen and (max-width:1180px){
a.main-links {
font-size: 26px;
}
a.main-links:after {
width: 15px;
height: 15px;
top: 13px;
right: 10px;
}
a.sub-links {
font-size: 18px;
}
a.sub-links:after {
width: 15px;
height: 15px;
top: 5px;
right: -10px;
}
.menu-right-col>div{
width:100%;
padding-bottom:0px;
}
.uc-m-menu .t450__rightcontainer {
flex-wrap:wrap;
}
.uc-m-menu .t450__right_social_links {
margin-top: 10px;
}
}
@media screen and (max-width:960px){
.uc-m-menu .t450__container {
padding: 25px 10px 25px 10px;
}
.menu-left-col{
width:100%;
}
.menu-right-col{
width:100%;
}
.menu-wrapper {
flex-wrap: wrap;
}
.uc-m-menu .t450__container:after {
opacity:0;
}
.menu-main-link {
box-shadow: 2px 0 0 0 #fff;
}
.menu-right-col>div {
width: 33.33%;
}
.uc-m-menu .t450__rightcontainer {
padding-left: 0%;
}
.uc-m-menu .t450__right_social_links {
margin-right: 20px;
}
}
@media screen and (max-width: 960px){
.menu-contact-city {
font-size: 18px;
font-weight: 400;
}
}
@media screen and (max-width: 680px){
.menu-contact-city {
font-size: 18px;
font-weight: 400;
}
.menu-right-col>div {
width: 100%;
}
.uc-m-menu .t450, .uc-m-menu .t450__overlay {
height: auto;
top: 0px;
width: calc(100vw);
left: 0px;
border-radius: 0px;
overflow: auto;
padding-bottom: 50px;
}
.uc-m-menu button.t450__close-button {
display: flex;
}
.uc-m-menu .t450__close_icon span {
width: 100% !important;
}
.uc-m-menu .t450_opened .t450__close_icon span:nth-child(1) {
opacity: 0;
}
.uc-m-menu .t450_opened .t450__close_icon span:nth-child(4) {
opacity: 0;
}
.menu-main-link {
width: 100vw;
}
.menu-sub-link {
width: 100vw;
}
.menu-left-col {
width: max-content;
}
.menu-left-col>div {
transition: all 0.3s ease-in-out;
}
.menu-left-col.slide-menu>div {
transform: translateX(-100%);
}
.menu-sub-link {
color: #fff;
}
.menu-sub-back {
font-size: 20px;
cursor: pointer;
}
.menu-sub-m-title {
font-size: 26px;
font-weight: 400;
margin: 20px 0;
}
a.sub-links:after {
right: 20px;
}
.menu-sub-back,
.menu-sub-m-title{
display: block;
}
.uc-m-menu .t450__rightcontainer{
display:block;
}
.uc-m-menu .t450__right_social_links{
padding-left:30px;
}
a.main-links:after {
opacity: 1;
}
a.main-links {
opacity: 1;
}
}
</style>