document.querySelector('.burger_block').addEventListener('click', function(event) {
document.querySelectorAll('.cross, .cart_popup, .popup, .cart_overlay, progress')
.forEach( el => el.classList.add('active'))
});
document.querySelector('.cross').addEventListener('click', function(event) {
document.querySelectorAll('.cross, .cart_popup, .popup, .cart_overlay, progress')
.forEach( el => el.classList.remove('active'))
});
document.querySelector('.cart_overlay').addEventListener('click', function(event) {
document.querySelectorAll('.cross, .cart_popup, .popup, .cart_overlay, progress')
.forEach( el => el.classList.remove('active'))
});
// Dropdown menu
$(function(){
// перебираю методом .each. Если у li есть дочерний ul, то
$('.menu_list li').find('ul').each(function(){
//Добавляю класс .parent и Кнопку к родительному li
$(this).parent().addClass('parent').append('<span></span>');
});
// Клик по Кнопке Родителя 2 уровня
$('.parent span').click(function(){
// Если эта Кнопка активна, то
if($(this).hasClass("active")){
// Снимаю активный класс с текущей кнопки
$(this).removeClass('active');
}
// В противном случае
else{
// ищем ближайщий родитель ul для li.parent и пытаемся все дочерние li закрыть...
$('.parent').closest('ul').children('li').find('li').removeClass('active');
// Добавляю к текущей Кнопке активный класс
$(this).toggleClass('active');
}
});
});
@media (min-width:1025px){
/*cart_popup_pc*/
.cart_popup{
padding-top:15px;
top:100%;
right:-60px;
position:absolute;
visibility:hidden;
opacity:0;
transform:translate(0px, 20px);
z-index:92;
}
.header_cart_content:hover>.cart_popup{
visibility:visible;
opacity:1;
transform:translate(0px, 0px);
transition:transform .3s,visibility .3s,opacity .3s;
transition-delay:.1s;
}
.header_cart_content:not(:hover)>.cart_popup{
transition:transform .2s,visibility .2s,opacity .2s;
}
}
@media (max-width:1024px){
/*cart_popup_mobile*/
.cart_popup{
background:#fff;
padding:50px 0 0 0;
height:100%;
overflow-y:auto;
overflow-x:hidden;
z-index:96;
}
.cart_popup{
width:320px;
top:0;
right:-320px;
position:fixed;
transition: .3s;
}
.cart_popup.active{
right:0;
}
}
visibility:visible;
opacity:1;
transition: .3s;
visibility:hidden;
opacity:0;
// resizeScreen
function resizeScrenn(){
if ($(window).innerWidth () >= 1025){
// if scroll 150px
$(window).scroll(function(){
if($(this).scrollTop() > 150 && $('.menu').hasClass('default')){
$('.menu').removeClass('default').addClass('fixed');
// header_cart -> nav on
$('.menu_cart_js').html($('.header_cart_js').html());
$('.header_cart,.header_cart_content,.breadcrumb').toggleClass('active');
}
else if($(this).scrollTop() <= 150 && $('.menu').hasClass('fixed')){
$('.menu').removeClass("fixed").addClass('default');
// header_cart -> nav off
$('.header_cart,.header_cart_content,.breadcrumb').removeClass('active');
$('.menu_cart_js').html('');
}
});
} else{
}
}
resizeScrenn();
$(window).resize(function(){
resizeScrenn();
});
.header_cart_js{
width:100%;
height:50%;
position:relative;
}
.header_cart,
.header_cart_content,
.header_cart_content a{
color:#3d3d3d;
width:170px;
height:45px;
display:flex;
justify-content:center;
}
.cart,
.cart_price{
height:45px;
display:block;
position:relative;
}
.cart{
width:65px;
}
.cart_price{
color:#65b800;
min-width:30px;
font-size:20px;
font-weight:700;
line-height:50px;
}
.header_cart_content svg{
width:35px;
height:35px;
}
.header_logo a,
.header_logo img,
.header_logo svg{
}
.payment li{
}
.social_network li a{
}
.social_network li a:hover{
}