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

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

Browse Source
fitness
Kirill Pet 8 months ago
parent a68e12af2f
commit 5b0a62233e
3 changed files with 173 additions and 159 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. 23
      assets/css/gp-style-tablet.css
  2. 127
      assets/js/main.js
  3. 104
      index.html

23
assets/css/gp-style-tablet.css
Unescape View File

@ -110,14 +110,14 @@
height: 100vh; height: 100vh;
overflow-y: auto; overflow-y: auto;
} }
.phone-menu__block-content{ /* .phone-menu__block-content{
height: 0; height: 0;
overflow: hidden; overflow: hidden;
z-index: 10; z-index: 10;
transition: all .5s; transition: all .5s;
} } */
.phone-menu__content{ .phone-menu__content{
padding: 104px 16px 40px 16px; padding: 104px 16px 40px 16px;
@ -127,20 +127,22 @@
position: absolute; position: absolute;
top: 0; top: 0;
left: 100%; left: 100%;
width: 100%; width: 100%;
transition: all .3s; height: 100%;
height: 100vh; padding: 104px 16px 40px 16px;
background-color: var(--background-main); background-color: var(--background-main);
transition: all .5s;
} }
.phone-menu__sub.active{ .phone-menu__sub.open{
left: 0; left: 0;
overflow-y: auto;
} }
.phone-menu__sub .title-1{ .phone-menu__sub li:nth-child(2) a{
margin-bottom: 32px; font-weight: 700;
font-size: 32px;
} }
.phone-menu-content__close{ .phone-menu-content__close{
position: absolute; position: absolute;
@ -213,9 +215,6 @@
.phone-menu__text--no-line{ .phone-menu__text--no-line{
text-decoration: none; text-decoration: none;
} }
.phone-menu__sub .title-1{
text-transform: capitalize;
}
.phone-social{ .phone-social{
margin-top: 24px; margin-top: 24px;

127
assets/js/main.js
Unescape View File

@ -163,31 +163,77 @@ function howPhone() {
// how end // how end
// phone menu // phone menu
let listMenu = document.querySelectorAll('.header-menu__list > li'); let btnOpenMenu = document.querySelector('.button-menu__open');
btnOpenMenu.onclick = function () {
let block = document.querySelector('.phone-menu'),
content = document.querySelector('.phone-menu__content'),
contentHeight = content.offsetHeight + 'px';
listMenu.forEach(li => { block.style.height = contentHeight;
if (li.querySelector('.header-menu-list__next')) { }
let nextButton = li.querySelector('.header-menu-list__next'),
sub = li.querySelector('.header-menu-list__sub');
nextButton.addEventListener('mouseover', function (event) { let closeMenu = document.querySelector('.phone-menu-content__close');
let openSubMenu = document.querySelector('.header-menu-list__sub.open'); closeMenu.onclick = function () {
let block = document.querySelector('.phone-menu');
if (openSubMenu) { block.style.height = '0px';
openSubMenu.classList.remove('open');
} }
sub.classList.add('open'); let phoneList = document.querySelectorAll('.phone-menu__list');
}) phoneList.forEach(list => {
let elementList = list.querySelectorAll('li');
elementList.forEach(element => {
let nextList = element.querySelector('.phone-menu__sub');
if (nextList) {
let button = element.querySelector('a');
button.onclick = function () {
nextList.classList.add('open')
}
nextList.querySelector('.phone-menu-content__close').onclick = function () {
nextList.classList.remove('open')
}
sub.addEventListener('mouseout', function (event) {
if (event.relatedTarget.offsetParent.tagName != 'UL') {
sub.classList.remove('open');
} }
}) })
};
}) })
// 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;
// }
// 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');
// 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
@ -297,52 +343,29 @@ phoneInputs.forEach(phoneInput => {
// pc menu // pc menu
let blocksMenu = document.querySelectorAll('.header-menu-list-next__block'); let listMenu = document.querySelectorAll('.header-menu__list > li');
blocksMenu.forEach(block =>{
let button = block.querySelector('.header-menu-list__next'),
content = block.querySelector('.header-menu-list-next__content');
button.addEventListener('mouseover', function (event) {
if (document.querySelector('.header-menu-list-next__content.active')) {
document.querySelector('.header-menu-list-next__content.active').classList.remove('active');
}
content.classList.add('active');
})
let nextButtons = block.querySelectorAll('.header-menu-list-next-content__item');
nextButtons.forEach(button => { listMenu.forEach(li => {
let className = button.dataset.menu; if (li.querySelector('.header-menu-list__next')) {
let nextButton = li.querySelector('.header-menu-list__next'),
sub = li.querySelector('.header-menu-list__sub');
if (typeof className == 'undefined') return; nextButton.addEventListener('mouseover', function (event) {
let openSubMenu = document.querySelector('.header-menu-list__sub.open');
button.addEventListener('mouseover', function (event) { if (openSubMenu) {
if (block.querySelector('.header-menu-list-next-content__item.active')) { openSubMenu.classList.remove('open');
block.querySelector('.header-menu-list-next-content__item.active').classList.toggle('active');
block.querySelector('.header-menu-list-next__content-next.active').classList.toggle('active');
} }
sub.classList.add('open');
button.classList.toggle('active');
document.querySelector(`.header-menu-list-next__content-next.${className}`).classList.toggle('active');
})
})
content.addEventListener('mouseout', function (event) {
if (event.relatedTarget.offsetParent.classList.contains('header-menu-list-next__content-next')) return;
if (event.relatedTarget.offsetParent != content) {
content.classList.remove('active');
content.querySelectorAll('.header-menu-list-next__content-next.active').forEach(next => {
next.classList.remove('active');
}) })
block.querySelector('.header-menu-list-next-content__item.active').classList.remove('active');
content.removeEventListener("mouseout", handleMouseDown, false); sub.addEventListener('mouseout', function (event) {
if (event.relatedTarget.offsetParent.tagName != 'UL') {
sub.classList.remove('open');
} }
}) })
};
}) })
// pc menu end // pc menu end

104
index.html
Unescape View File

@ -257,9 +257,8 @@
</div> </div>
<div class="phone-menu"> <div class="phone-menu">
<div class="phone-menu__block-content main"> <div class="phone-menu__content">
<div class="phone-menu__content main"> <button class="phone-menu-content__close"></button>
<button class="phone-menu-content__close main"></button>
<ul class="phone-menu__list"> <ul class="phone-menu__list">
<li> <li>
@ -268,6 +267,52 @@
<li>О компании</li> <li>О компании</li>
<li> <li>
<a href="#" class="phone-menu--next" data-menu="catalog">каталог</a> <a href="#" class="phone-menu--next" data-menu="catalog">каталог</a>
<ul class="phone-menu__sub phone-menu__list">
<button class="phone-menu-content__close"></button>
<li>
<a href="#">Каталог</a>
</li>
<li>
<a href="#" class="phone-menu--next">Кардио</a>
<ul class="phone-menu__sub phone-menu__list">
<button class="phone-menu-content__close"></button>
<li>
<a href="#">Кардио</a>
</li>
<li>
<a href="#" class="phone-menu--next">Беговые дорожки</a>
</li>
<li>
<a href="#" class="phone-menu--next">Беговые дорожки</a>
</li>
<li>
<a href="#" class="phone-menu--next">Беговые дорожки</a>
</li>
<li>
<a href="#" class="phone-menu--next">Беговые дорожки</a>
</li>
</ul>
</li>
<li>
<a href="#" class="phone-menu--next">механическое кардио</a>
</li>
<li>
<a href="#" class="phone-menu--next">силовые тренажеры</a>
</li>
<li>
<a href="#" class="phone-menu--next">скамьи</a>
</li>
<li>
<a href="#" class="phone-menu--next">свободные веса</a>
</li>
<li>
<a href="#" class="phone-menu--next">Функциональный тренинг</a>
</li>
<li>
<a href="#">Уникальные продукты</a>
</li>
</ul>
</li> </li>
<li> <li>
<a href="#" class="phone-menu--next" data-menu="brand">бренды</a> <a href="#" class="phone-menu--next" data-menu="brand">бренды</a>
@ -307,59 +352,6 @@
</div> </div>
</div> </div>
<div class="phone-menu__sub catalog">
<div class="phone-menu__content">
<button class="phone-menu-content__close"></button>
<p class="title-1">
Каталог
</p>
<ul class="phone-menu__list">
<li>
<a href="#" class="phone-menu--next" data-menu="cardio">Кардио</a>
</li>
<li>
<a href="#" class="phone-menu--next">механическое кардио</a>
</li>
<li>
<a href="#" class="phone-menu--next">силовые тренажеры</a>
</li>
<li>
<a href="#" class="phone-menu--next">скамьи</a>
</li>
<li>
<a href="#" class="phone-menu--next">свободные веса</a>
</li>
<li>
<a href="#" class="phone-menu--next">Функциональный тренинг</a>
</li>
<li>
<a href="#" class="phone-menu--next">Уникальные продукты</a>
</li>
</ul>
</div>
</div>
<div class="phone-menu__sub cardio">
<div class="phone-menu__content">
<button class="phone-menu-content__close"></button>
<p class="title-1">
Кардио
</p>
<ul class="phone-menu__list">
<li>Беговые дорожки</li>
<li>Беговые дорожки</li>
<li>Беговые дорожки</li>
<li>Беговые дорожки</li>
</ul>
</div>
</div>
</div>
<div class="phone-search"> <div class="phone-search">
<div class="phone-search__content"> <div class="phone-search__content">
<input type="text" class="phone-search__input" placeholder="Поиск"> <input type="text" class="phone-search__input" placeholder="Поиск">

Write Preview
Loading…
Cancel
Save