Good-Production/template-for-verstka
13
2
Fork 0
Code Pull Requests Releases Wiki Activity

переделал меню pc на ul

Browse Source
This commit is contained in:
Kirill Pet
2024-12-23 16:12:24 +03:00
parent d272e126ad
commit a68e12af2f
3 changed files with 136 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
assets/css/gp-style-desktop.css
View File

@@ -114,6 +114,7 @@
.header-menu__list li:first-child{ .header-menu__list li:first-child{
margin-left: 0; margin-left: 0;
} }
.header-menu__list a{ .header-menu__list a{
color: var(--text-white); color: var(--text-white);
text-decoration: none; text-decoration: none;
@@ -127,18 +128,16 @@
display: block; display: block;
} }
.header-menu-list-next__block{ .header-menu-list__sub{
position: relative; margin-top: 30px;
}
.header-menu-list-next__content{
position: absolute; position: absolute;
top: 50px;
left: 0;
width: 300px; width: 300px;
padding: 14px 0; padding: 14px 0;
list-style-type: none;
background-color: var(--background-grey); background-color: var(--background-grey);
opacity: 0; opacity: 0;
@@ -146,66 +145,53 @@
transition: all .3s; transition: all .3s;
} }
.header-menu-list-next__content.active{ .header-menu-list__sub.open{
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
} }
.header-menu-list-next-content__item{ .header-menu-list__sub li{
display: block; margin-left: 0;
}
.header-menu-list__sub li > a{
padding: 14px 24px; padding: 14px 24px;
font-weight: 400; transition: all .3s;
font-size: 16px;
text-transform: uppercase;
color: var(--text-white);
display: block;
}
.header-menu-list__sub > li:hover{
padding-right: 23px;
background-color: var(--background-grey-hover);
border-right: 1px solid var(--text-white);
}
.header-menu-list__sub > li > ul{
transition: all .3s; transition: all .3s;
} }
.header-menu-list-next-content__item:hover{ .header-menu-list__sub > li:hover > ul{
padding-right: 23px; opacity: 1;
pointer-events: auto;
border-right: 1px solid var(--text-white);
background-color: var(--background-grey-hover);
} }
.header-menu-list-next-content__item.active{ .header-menu-list__sub ul{
padding-right: 23px;
border-right: 1px solid var(--text-white);
background-color: var(--background-grey-hover);
}
.header-menu-list-next__content-next{
position: absolute; position: absolute;
top: 0; top: 0;
left: 300px; left: 100%;
width: 100%;
height: 100%;
display: block; display: block;
min-height: 100%;
width: 300px;
padding: 12px;
background-color: var(--background-grey-hover); background-color: var(--background-grey-hover);
list-style-type: none;
display: flex;
flex-direction: column;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
transition: all .6s;
} }
.header-menu-list-next__content-next.active{ .header-menu-list__sub ul.open{
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
} }
.header-menu-list-next-content-next__item{
padding: 12px;
font-weight: 400;
font-size: 16px;
text-transform: uppercase;
color: var(--text-white);
}
.header-menu__search{ .header-menu__search{
display: flex; display: flex;
align-items: center; align-items: center;

54
assets/js/main.js
View File

@@ -163,51 +163,31 @@ function howPhone() {
// how end // how end
// phone menu // phone menu
let btnOpenMenu = document.querySelector('.button-menu__open'); let listMenu = document.querySelectorAll('.header-menu__list > li');
btnOpenMenu.onclick = function () { listMenu.forEach(li => {
let phoneMenu = document.querySelector('.phone-menu'), if (li.querySelector('.header-menu-list__next')) {
block = document.querySelector('.phone-menu__block-content.main'), let nextButton = li.querySelector('.header-menu-list__next'),
content = document.querySelector('.phone-menu__content.main'), sub = li.querySelector('.header-menu-list__sub');
newHeigh = content.offsetHeight + 'px';
phoneMenu.classList.add('active'); nextButton.addEventListener('mouseover', function (event) {
// block.classList.add('active'); let openSubMenu = document.querySelector('.header-menu-list__sub.open');
block.style.height = newHeigh;
if (openSubMenu) {
openSubMenu.classList.remove('open');
} }
let closeMainMenu = document.querySelector('.phone-menu-content__close.main'); sub.classList.add('open');
closeMainMenu.onclick = function () {
let phoneMenu = document.querySelector('.phone-menu'),
block = document.querySelector('.phone-menu__block-content.main'),
content = document.querySelector('.phone-menu__content.main');
phoneMenu.classList.remove('active');
block.style.height = 0;
}
let nextPhoneMenu = document.querySelectorAll('.phone-menu--next');
nextPhoneMenu.forEach(next => {
next.onclick = function () {
let subName = next.dataset.menu,
blockSub = document.querySelector(`.phone-menu__sub.${subName}`);
blockSub.classList.add('active');
}
}) })
let subPhone = document.querySelectorAll('.phone-menu__sub'); sub.addEventListener('mouseout', function (event) {
if (event.relatedTarget.offsetParent.tagName != 'UL') {
subPhone.forEach(menu => { sub.classList.remove('open');
let close = menu.querySelector('.phone-menu-content__close');
close.onclick = function () {
menu.classList.remove('active');
} }
}) })
};
})
// phone menu end // phone menu end
// search // search

120
index.html
View File

@@ -112,46 +112,96 @@
<a href="#">О компании</a> <a href="#">О компании</a>
</li> </li>
<li> <li>
<div class="header-menu-list-next__block">
<a href="#" class="header-menu-list__next">каталог</a> <a href="#" class="header-menu-list__next">каталог</a>
<div class="header-menu-list-next__content"> <ul class="header-menu-list__sub">
<a href="#" class="header-menu-list-next-content__item" data-menu="cardio"> <li>
Кардио <a href="#">Кардио</a>
</a> <ul>
<li>
<a href="#" class="header-menu-list-next-content__item" data-menu="cardio-1"> <a href="#">беговые дорожки</a>
механическое кардио </li>
</a> <li>
<a href="#">беговые дорожки</a>
<a href="#" class="header-menu-list-next-content__item"> </li>
силовые тренажеры <li>
</a> <a href="#">беговые дорожки</a>
</li>
<a href="#" class="header-menu-list-next-content__item"> <li>
скамьи <a href="#">беговые дорожки</a>
</a> </li>
</ul>
<div class="header-menu-list-next__content-next cardio"> </li>
<a href="#" class="header-menu-list-next-content-next__item">беговые дорожки</a> <li>
<a href="#" class="header-menu-list-next-content-next__item">беговые дорожки</a> <a href="#">механическое кардио</a>
<a href="#" class="header-menu-list-next-content-next__item">беговые дорожки</a> <ul>
<a href="#" class="header-menu-list-next-content-next__item">беговые дорожки</a> <li>
</div> <a href="#">беговые дорожки 2</a>
</li>
<div class="header-menu-list-next__content-next cardio-1"> <li>
<a href="#" class="header-menu-list-next-content-next__item">механическое кардио</a> <a href="#">беговые дорожки 2</a>
<a href="#" class="header-menu-list-next-content-next__item">механическое кардио</a> </li>
<a href="#" class="header-menu-list-next-content-next__item">механическое кардио</a> <li>
<a href="#" class="header-menu-list-next-content-next__item">механическое кардио</a> <a href="#">беговые дорожки 2</a>
</div> </li>
</div> <li>
</div> <a href="#">беговые дорожки 2</a>
</li>
</ul>
</li>
<li>
<a href="#">силовые тренажеры</a>
</li>
<li>
<a href="#">скамьи</a>
</li>
</ul>
</li> </li>
<li> <li>
<div class="">
<a href="#" class="header-menu-list__next">бренды</a> <a href="#" class="header-menu-list__next">бренды</a>
</div>
<ul class="header-menu-list__sub">
<li>
<a href="#">Кардио</a>
<ul>
<li>
<a href="#">беговые дорожки</a>
</li>
<li>
<a href="#">беговые дорожки</a>
</li>
<li>
<a href="#">беговые дорожки</a>
</li>
<li>
<a href="#">беговые дорожки</a>
</li>
</ul>
</li>
<li>
<a href="#">механическое кардио</a>
<ul>
<li>
<a href="#">беговые дорожки 2</a>
</li>
<li>
<a href="#">беговые дорожки 2</a>
</li>
<li>
<a href="#">беговые дорожки 2</a>
</li>
<li>
<a href="#">беговые дорожки 2</a>
</li>
</ul>
</li>
<li>
<a href="#">силовые тренажеры</a>
</li>
<li>
<a href="#">скамьи</a>
</li>
</ul>
</li> </li>
<li> <li>
<a href="#">зонирование</a> <a href="#">зонирование</a>