<div class="wrapper">
<div id="menu" class="menu">
<ul id="list" class="menu_list">
<!-- / class Item -- JS /-->
<li class="menu_list_item">
<span class="menu_list_item_span menu_list_item_span-apple spanJS">Apple</span>
<div class="submenu">
<ul class="submenu_list">
<!-- / class subItem -- JS /-->
<li class="submenu_list_item">
<span class="submenu_list_item_span subSpanJS">iPhone</span>
<div class="product">
<div class="wrapper_product">
<p class="product_code">Код товару: 523668</p>
<img class="photo" src="images/iphone.jpg" width="87" height="174" alt="iPhone">
<p class="product_discount">Акция</p>
<h3 class="product_title">Смартфон Apple iPhone 14 128GB Midnight (PUFF3RX/A)</h3>
<p class="product_price">37 499 </p>
<button class="product_button">Купить</button>
<p class="product_congratulations">Спасибо за покупку смартфона Apple iPhone 14 128GB Midnight</p>
</div>
</div>
</li>
<!-- / class subItem -- JS /-->
<li class="submenu_list_item">
<span class="submenu_list_item_span subSpanJS">Mac</span>
<div class="product">
<div class="wrapper_product">
<p class="product_code">Код товару: 523897</p>
<img class="photo" src="images/macbook.jpg" width="200" height="117" alt="macbook">
<p class="product_best_price">Наилучшая цена</p>
<h3 class="product_title">Ноутбук APPLE MacBook Air 13"M1 256GB 2020 (MIND3UA/A) Gold MIND3</h3>
<p class="product_price">39 999 </p>
<button class="product_button">Купить</button>
<p class="product_congratulations">Спасибо за покупку ноутбука APPLE MacBook Air 13"M1 256GB 2020</p>
</div>
</div>
</li>
<!-- / class subItem -- JS /-->
<li class="submenu_list_item">
<span class="submenu_list_item_span subSpanJS">iPad</span>
<div class="product">
<div class="wrapper_product">
<p class="product_code">Код товару: 523444</p>
<img class="photo" src="images/iPad.jpg" width="140" height="200" alt="iPad">
<p class="product_discount">Акция</p>
<h3 class="product_title">Планшет Apple iPad 10.2" 4G 64Gb Space Grey (MK473RK/A) 2021</h3>
<p class="product_price">23 999 </p>
<button class="product_button">Купить</button>
<p class="product_congratulations">Спасибо за покупку планшета Apple iPad 10.2" 4G 64Gb Space Grey</p>
</div>
</div>
</li>
</ul>
</div>
</li>
<!-- / class Item -- JS /-->
<li class="menu_list_item">
<span class="menu_list_item_span menu_list_item_span-energy spanJS">Электропотребление</span>
<div class="submenu">
<ul class="submenu_list">
<!-- / class subItem -- JS /-->
<li class="submenu_list_item">
<span class="submenu_list_item_span subSpanJS">Генераторы</span>
<div class="product">
<div class="wrapper_product">
<p class="product_code">Код товару: 5234789</p>
<img class="photo" src="images/generator.jpg" width="200" height="200" alt="generator">
<p class="product_discount">Акция</p>
<h3 class="product_title">Генератор Marcher бензиновий PGG 3/1, 230В, max 3кВт, (1.042-207.0)</h3>
<p class="product_price">27 999 </p>
<button class="product_button">Купить</button>
<p class="product_congratulations">Спасибо за покупку генератора Marcher бензиновий PGG 3/1, 230В, max 3кВт</p>
</div>
</div>
</li>
<!-- / class subItem -- JS /-->
<li class="submenu_list_item">
<span class="submenu_list_item_span subSpanJS">Повербанки</span>
<div class="product">
<div class="wrapper_product">
<p class="product_code">Код товару: 5234435</p>
<img class="photo" src="images/powerbank.jpg" width="116" height="174" alt="powerbank">
<p class="product_discount">ХИТ</p>
<h3 class="product_title">Портативный акумулятор Trust Primo ECO 20000 mAh Black (24676)</h3>
<p class="product_price">2 999 </p>
<button class="product_button">Купить</button>
<p class="product_congratulations">Спасибо за покупку портативного акумулятора Trust Primo ECO 20000 mAh Black</p>
</div>
</div>
</li>
<!-- / class subItem -- JS /-->
<li class="submenu_list_item">
<span class="submenu_list_item_span subSpanJS">Фонарики</span>
<div class="product">
<div class="wrapper_product">
<p class="product_code">Код товару: 5235896</p>
<img class="photo" src="images/lamp.jpg" width="122" height="174" alt="lamp">
<p class="product_discount">ХИТ</p>
<h3 class="product_title">Кемпинговий фонарик Philips LED Camping luminaria Cicero (929003241607)</h3>
<p class="product_price">1 599 </p>
<button class="product_button">Купить</button>
<p class="product_congratulations">Спасибо за покупку кемпингового фонарик Philips LED Camping luminaria Cicero</p>
</div>
</div>
</li>
</ul>
</div>
</li>
<!-- / class Item -- JS /-->
<li class="menu_list_item">
<span class="menu_list_item_span menu_list_item_span-smartphone spanJS" >Смартфоны и телефоны</span>
<div class="submenu">
<ul class="submenu_list">
<!-- / class subItem -- JS /-->
<li class="submenu_list_item">
<span class="submenu_list_item_span subTitleJS">Смартфоны</span>
<div class="product">
<div class="wrapper_product">
<p class="product_code">Код товару: 5235675</p>
<img class="photo" src="images/smartphone.jpg" width="200" height="200" alt="smartphone">
<p class="product_discount">ХИТ</p>
<h3 class="product_title">Смартфон Black-view BV4900 Pro 4/64GB DS Black</h3>
<p class="product_price">7 599 </p>
<button class="product_button">Купить</button>
<p class="product_congratulations">Спасибо за покупку смартфона Black-view BV4900 Pro 4/64GB DS Black</p>
</div>
</div>
</li>
<!-- / class subItem -- JS /-->
<li class="submenu_list_item">
<span class="submenu_list_item_span subSpanJS">Наушники</span>
<div class="product">
<div class="wrapper_product">
<p class="product_code">Код товару: 5235678</p>
<img class="photo" src="images/headphones.jpg" width="113" height="174" alt="headphones">
<p class="product_discount">ХИТ</p>
<h3 class="product_title">Навушники Bluetooth Sony WH-CH510L Blue</h3>
<p class="product_price">1 249 </p>
<button class="product_button">Купить</button>
<p class="product_congratulations">Спасибо за покупку наушников Bluetooth Sony WH-CH510L Blue</p>
</div>
</div>
</li>
<!-- / class subItem -- JS /-->
<li class="submenu_list_item">
<span class="submenu_list_item_span subSpanJS">Чехлы</span>
<div class="product">
<div class="wrapper_product">
<p class="product_code">Код товару: 5235328</p>
<img class="photo" src="images/case.jpg" width="97" height="200" alt="case">
<p class="product_discount">ХИТ</p>
<h3 class="product_title">Case</h3>
<p class="product_price">1 249 </p>
<button class="product_button">Купить</button>
<p class="product_congratulations">Спасибо за покупку Case</p>
</div>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
li {
list-style-type: none;
}
li:last-child {
margin-bottom: 0;
}
a {
text-decoration: none;
outline: none;
}
span {
cursor: pointer;
}
.wrapper {
max-width: 1920px;
width: 100%;
margin: 0 auto;
}
.menu {
padding-top: 100px;
}
.menu_list {
background-color: #fff;
max-width: 360px;
width: 100%;
padding: 12px 0 12px 12px;
max-height: 100%;
}
.menu_list_item {
display: flex;
height: 48px;
box-sizing: border-box;
list-style-type: none;
position: relative;
}
.menu_list_item_span {
max-width: 360px;
width: 100%;
height: 100%;
display: flex;
align-items: center;
padding-left: 50px;
padding-right: 25px;
transition: background-color ease-in-out 0.4s;
font-weight: bold;
font-size: 16px;
color: #222d4a;
border-radius: 20px;
position: relative
}
.menu_list_item_span::before {
position: absolute;
top: 50%;
left: 10px;
transform: translateY(-50%);
}
.menu_list_item_span::after {
content: url("../images/arrow.svg");
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
}
.menu_list_item_span:hover {
background-color: #f7f8f9;
}
.menu_list_item_span-apple::before {
content: url("../images/apple.svg");
}
.menu_list_item_span-energy::before {
content: url("../images/energy.svg");
}
.menu_list_item_span-smartphone::before {
content: url("../images/smartphone.svg");
}
.submenu {
position: absolute;
top: -10px;
left: 360px;
display: none;
max-width: 320px;
width: 100%;
}
.menu_list_item.active .submenu {
display: flex;
}
.submenu_list {
width: 100%;
padding: 12px 0 12px 12px;
height: 100%;
}
.submenu_list_item {
position: relative;
}
.submenu_list_item_span {
display: flex;
background-color: #fff;
align-items: center;
border-radius: 40px;
color: #222d4a;
font-weight: 700;
font-size: 16px;
padding-left: 16px;
min-height: 48px;
padding-right: 40px;
transition: background-color .3s ease-in-out;
position: relative
}
.submenu_list_item_span::after {
content: url("../images/arrow.svg");
position: absolute;
top: 50%;
right: 24px;
transform: translateY(-50%);
}
.submenu_list_item_span:hover {
background-color: #f7f8f9;
}
.product {
display: none;
position: absolute;
top: 0;
right: -300px;
padding: 16px 0;
max-width: 240px;
width: 100%;
background-color: snow;
border-radius: 10px;
border: 2px solid deepskyblue;
box-sizing: border-box;
}
.submenu_list_item.active .product {
display: block;
}
.wrapper_product {
text-align: center;
max-width: 210px;
width: 100%;
margin: 0 auto;
}
.product_code {
text-align: right;
padding: 2px 4px;
border-radius: 2px;
color: #777e90;
font-size: 12px;
box-sizing: border-box;
margin-bottom: 10px;
}
.photo {
max-width: 100%;
min-height: auto;
margin-bottom: 50px;
}
.product_discount {
max-width: 60px;
width: 100%;
height: 18px;
border-radius: 2px;
font-size: 12px;
color: #fff;
text-transform: uppercase;
font-weight: 700;
padding: 1px 8px 0;
display: flex;
justify-content: center;
align-items: center;
background-color: #d23e00;
margin-bottom: 20px;
}
.product_title {
font-weight: bold;
font-size: 16px;
line-height: 1.15;
color: #292b31;
margin-bottom: 30px;
}
.product_price {
color: #fd3321;
font-size: 20px;
font-weight: 700;
margin-block: 18px;
text-align: left;
}
.product_best_price {
font-size: 20px;
font-weight: 400;
margin-block: 10px;
background-color: #569e06;
color: white;
max-width: 150px;
width: 100%;
}
.product_button {
padding: 10px 0;
max-width: 140px;
width: 100%;
border-radius: 4px;
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
background-color: #00ac45;
border: 2px solid greenyellow;
color: white;
transition: background-color 0.3s ease-in-out;
}
.product_button:hover {
background-color: #008a35;
}
.product_congratulations {
position: absolute;
top: 0;
left: 0;
max-width: 300px;
width: 100%;
min-height: 100%;
display: none;
justify-content: center;
align-items: center;
border-radius: 8px;
z-index: 2;
background-color: azure;
color: purple;
font-size: 26px;
}
.product.active .product_congratulations {
display: flex;
}const menu = document.getElementById('menu');
menu.addEventListener('click', (event) => {
//______Условие выполняется если мы нажимаем на SPAN_____//
if (event.target.tagName === 'SPAN') {
//______Создаем переменную текущий родитель(li)--Span_____//
const currentParentLI = event.target.parentNode;
//______Перебираем li которые имеют class .active_____//
document.querySelectorAll('.active').forEach((activeParentLI) => {
if (activeParentLI !== currentParentLI) {
activeParentLI.classList.toggle('active', activeParentLI.contains(currentParentLI));
}
});
currentParentLI.classList.toggle('active');
}
if (event.target.tagName === 'BUTTON') {
const currentParentDIV = document.querySelector('.wrapper_product').closest('.product');
console.log(currentParentDIV);
currentParentDIV.classList.toggle('active');
setTimeout(() => {
document.querySelectorAll('.active').forEach((activeEl) => {
activeEl.classList.remove('active')
})
},3000);
}
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.