создал addClosePhoneMenu для создания кнопки в меню для телефона

fitness
Kirill Pet 8 months ago
parent 9ec0db852e
commit 5bb2a18ae3
  1. 2
      assets/css/gp-style-tablet.css
  2. 41
      assets/js/main.js
  3. 5
      index.html

@ -142,7 +142,7 @@
.phone-menu__sub.open{ .phone-menu__sub.open{
left: 0; left: 0;
} }
.phone-menu__sub li:nth-child(2) a{ .phone-menu__sub > li:nth-child(2) a{
font-weight: 700; font-weight: 700;
font-size: 32px; font-size: 32px;
} }

@ -163,6 +163,9 @@ function howPhone() {
// how end // how end
// phone menu // phone menu
addClosePhoneMenu('.phone-menu__content');
addClosePhoneMenu('.phone-menu__sub');
let btnOpenMenu = document.querySelector('.button-menu__open'); let btnOpenMenu = document.querySelector('.button-menu__open');
btnOpenMenu.onclick = function () { btnOpenMenu.onclick = function () {
let block = document.querySelector('.phone-menu'), let block = document.querySelector('.phone-menu'),
@ -201,39 +204,17 @@ phoneList.forEach(list => {
}) })
}) })
function addClosePhoneMenu(classAdd) {
document.querySelectorAll(classAdd).forEach(element => {
let button = document.createElement('button');
button.className = "phone-menu-content__close";
// let closeMainMenu = document.querySelector('.phone-menu-content__close.main'); let referenceElement = element.firstElementChild;
// 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 => { console.log(element.insertBefore(button, referenceElement));
// 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

@ -258,8 +258,6 @@
<div class="phone-menu"> <div class="phone-menu">
<div class="phone-menu__content"> <div class="phone-menu__content">
<button class="phone-menu-content__close"></button>
<ul class="phone-menu__list"> <ul class="phone-menu__list">
<li> <li>
<a href="#">спецификация</a> <a href="#">спецификация</a>
@ -268,15 +266,12 @@
<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"> <ul class="phone-menu__sub phone-menu__list">
<button class="phone-menu-content__close"></button>
<li> <li>
<a href="#">Каталог</a> <a href="#">Каталог</a>
</li> </li>
<li> <li>
<a href="#" class="phone-menu--next">Кардио</a> <a href="#" class="phone-menu--next">Кардио</a>
<ul class="phone-menu__sub phone-menu__list"> <ul class="phone-menu__sub phone-menu__list">
<button class="phone-menu-content__close"></button>
<li> <li>
<a href="#">Кардио</a> <a href="#">Кардио</a>
</li> </li>

Loading…
Cancel
Save