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

56
assets/js/main.js
View File

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

126
index.html
View File

@@ -111,47 +111,97 @@
<li>
<a href="#">О компании</a>
</li>
<li >
<div class="header-menu-list-next__block">
<a href="#" class="header-menu-list__next">каталог</a>
<li>
<a href="#" class="header-menu-list__next">каталог</a>
<div class="header-menu-list-next__content">
<a href="#" class="header-menu-list-next-content__item" data-menu="cardio">
Кардио
</a>
<a href="#" class="header-menu-list-next-content__item" data-menu="cardio-1">
механическое кардио
</a>
<a href="#" class="header-menu-list-next-content__item">
силовые тренажеры
</a>
<a href="#" class="header-menu-list-next-content__item">
скамьи
</a>
<div class="header-menu-list-next__content-next cardio">
<a href="#" class="header-menu-list-next-content-next__item">беговые дорожки</a>
<a href="#" class="header-menu-list-next-content-next__item">беговые дорожки</a>
<a href="#" class="header-menu-list-next-content-next__item">беговые дорожки</a>
<a href="#" class="header-menu-list-next-content-next__item">беговые дорожки</a>
</div>
<div class="header-menu-list-next__content-next cardio-1">
<a href="#" class="header-menu-list-next-content-next__item">механическое кардио</a>
<a href="#" class="header-menu-list-next-content-next__item">механическое кардио</a>
<a href="#" class="header-menu-list-next-content-next__item">механическое кардио</a>
<a href="#" class="header-menu-list-next-content-next__item">механическое кардио</a>
</div>
</div>
</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>
<div class="">
<a href="#" class="header-menu-list__next">бренды</a>
</div>
<a href="#" class="header-menu-list__next">бренды</a>
<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>
<a href="#">зонирование</a>