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

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

Browse Source
fitness
Kirill Pet 8 months ago
parent d272e126ad
commit a68e12af2f
3 changed files with 134 additions and 118 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 68
      assets/css/gp-style-desktop.css
  2. 56
      assets/js/main.js
  3. 128
      index.html

68
assets/css/gp-style-desktop.css
Unescape 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;
font-size: 16px;
text-transform: uppercase;
color: var(--text-white);
transition: all .3s; transition: all .3s;
}
.header-menu-list-next-content__item:hover{
padding-right: 23px;
border-right: 1px solid var(--text-white); display: block;
background-color: var(--background-grey-hover);
} }
.header-menu-list-next-content__item.active{ .header-menu-list__sub > li:hover{
padding-right: 23px; padding-right: 23px;
border-right: 1px solid var(--text-white);
background-color: var(--background-grey-hover); 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__sub > li:hover > ul{
opacity: 1;
pointer-events: auto;
} }
.header-menu-list-next__content-next{ .header-menu-list__sub ul{
position: absolute; position: absolute;
top: 0; top: 0;
left: 300px; left: 100%;
display: block; width: 100%;
height: 100%;
min-height: 100%; display: block;
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;

56
assets/js/main.js
Unescape 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;
}
let closeMainMenu = document.querySelector('.phone-menu-content__close.main');
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;
}
if (openSubMenu) {
openSubMenu.classList.remove('open');
}
let nextPhoneMenu = document.querySelectorAll('.phone-menu--next'); sub.classList.add('open');
})
nextPhoneMenu.forEach(next => { sub.addEventListener('mouseout', function (event) {
next.onclick = function () { if (event.relatedTarget.offsetParent.tagName != 'UL') {
let subName = next.dataset.menu, sub.classList.remove('open');
blockSub = document.querySelector(`.phone-menu__sub.${subName}`); }
})
blockSub.classList.add('active'); };
}
}) })
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 // phone menu end
// search // search

128
index.html
Unescape View File

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

Write Preview
Loading…
Cancel
Save