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. 52
      assets/js/main.js
  3. 120
      index.html

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

52
assets/js/main.js
Unescape 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;
}
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');
nextButton.addEventListener('mouseover', function (event) {
let openSubMenu = document.querySelector('.header-menu-list__sub.open');
phoneMenu.classList.remove('active');
block.style.height = 0;
if (openSubMenu) {
openSubMenu.classList.remove('open');
}
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.classList.add('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');
sub.addEventListener('mouseout', function (event) {
if (event.relatedTarget.offsetParent.tagName != 'UL') {
sub.classList.remove('open');
}
})
};
})
// phone menu end
// search

120
index.html
Unescape View File

@ -112,46 +112,96 @@
<a href="#">О компании</a>
</li>
<li>
<div class="header-menu-list-next__block">
<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>
<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>

Write Preview
Loading…
Cancel
Save