From 7a7a90aacc51a03bb98c9e7bf1cc5c0941d0cba3 Mon Sep 17 00:00:00 2001 From: kozhemyakin Date: Wed, 12 Apr 2023 14:38:50 +0300 Subject: [PATCH 1/2] fix: pets burger --- shelter/scripts/index.js | 11 ++++++++++- shelter/scripts/pets.js | 20 +++++++++++++++----- shelter/styles/styles_pets.css | 30 ++++++++---------------------- 3 files changed, 33 insertions(+), 28 deletions(-) diff --git a/shelter/scripts/index.js b/shelter/scripts/index.js index da13a2a..f710e08 100644 --- a/shelter/scripts/index.js +++ b/shelter/scripts/index.js @@ -154,6 +154,7 @@ const burgerToggle = document.getElementById('menu__toggle'); const burgerMenu = document.querySelector('.hamburger-menu'); const menuBox = document.querySelector('.menu__box'); const shadow = document.querySelector('.shadow-bg'); +const menuBtn = document.querySelector('.menu__btn'); menuBox.addEventListener('click', ()=> { burgerToggle.checked = false; @@ -165,7 +166,7 @@ menuBox.addEventListener('click', ()=> { shadow.addEventListener('click', ()=> { burgerToggle.checked = false; document.body.classList.toggle('overflow-hidden-class'); - shadow.classList.toggle('shadow'); + // shadow.classList.toggle('shadow'); shadow.style.display = 'none'; }) @@ -174,6 +175,14 @@ burgerToggle.addEventListener('click', ()=> { shadow.style.display = 'block'; }) +menuBtn.addEventListener('click', ()=> { + burgerToggle.checked = false; + document.body.classList.toggle('overflow-hidden-class'); + // shadow.classList.toggle('shadow'); + shadow.style.display = 'none'; +}) + + const modalWindow = document.querySelector('.modal-window'); const modalWindowBg = document.querySelector('.modal-bg'); diff --git a/shelter/scripts/pets.js b/shelter/scripts/pets.js index 09235a7..9faa377 100644 --- a/shelter/scripts/pets.js +++ b/shelter/scripts/pets.js @@ -116,26 +116,36 @@ const prevBtn = document.querySelector('.left'); const leftEnd = document.querySelector('.left-end') const rightEnd = document.querySelector('.right-end') const left = document.querySelector('.pagination > div:nth-child(2)') +const menuBtn = document.querySelector('.menu__btn'); +const menuBtnSpan = document.querySelector('.menu__btn > span'); let pageNumber = 1; menuBox.addEventListener('click', ()=> { burgerToggle.checked = false; - document.body.classList.toggle('overflow-hidden-class'); - shadow.classList.toggle('shadow'); + document.body.classList.remove('overflow-hidden-class'); + // shadow.classList.toggle('shadow'); shadow.style.display = 'none'; }) shadow.addEventListener('click', ()=> { burgerToggle.checked = false; - document.body.classList.toggle('overflow-hidden-class'); - shadow.classList.toggle('shadow'); + document.body.classList.remove('overflow-hidden-class'); + // shadow.classList.toggle('shadow'); shadow.style.display = 'none'; }) burgerToggle.addEventListener('click', ()=> { - document.body.classList.toggle('overflow-hidden-class'); + document.body.classList.add('overflow-hidden-class'); shadow.style.display = 'block'; + +}) + +menuBtn.addEventListener('click', ()=> { + burgerToggle.checked = false; + // document.body.classList.toggle('overflow-hidden-class'); + // shadow.classList.toggle('shadow'); + shadow.style.display = 'none'; }) diff --git a/shelter/styles/styles_pets.css b/shelter/styles/styles_pets.css index 60a5d09..c3eef78 100644 --- a/shelter/styles/styles_pets.css +++ b/shelter/styles/styles_pets.css @@ -838,28 +838,10 @@ button { top: 8px; } + + /* контейнер меню */ .menu__box { - /* display: flex; */ - /* display: none; */ - /* flex-direction: column; - gap: 40px; - position: absolute; - visibility: hidden; - top: 0; */ - /* right: -100%; */ - /* right: 0; - width: 320px; - height: 100vh; - margin: 0; - padding-top: 248px; - list-style: none; - text-align: center; - background: #292929; - box-shadow: 1px 0px 6px rgba(0, 0, 0, .2); - transition: 1s; - z-index: 2; */ - padding-top: 248px; list-style: none; text-align: center; @@ -876,7 +858,7 @@ button { height: 100vh; top: 0; right: -320px; - transition: left 1s; + transition: left 0.5s; z-index: 2; -webkit-transform: translateZ(0); -webkit-backface-visibility: hidden; @@ -946,7 +928,7 @@ button { top: 0; left: 0; opacity: 0.7; - transition: 1s; + transition: 0.5s; } @@ -1058,4 +1040,8 @@ button { left: 0; opacity: 0.7; transition: 1s; +} + +.displayedNone { + display: none; } \ No newline at end of file From 04afeddc994e8427fb416340d2a34e3b239ba1df Mon Sep 17 00:00:00 2001 From: kozhemyakin Date: Wed, 12 Apr 2023 14:39:50 +0300 Subject: [PATCH 2/2] fix: index burger --- shelter/scripts/index.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/shelter/scripts/index.js b/shelter/scripts/index.js index f710e08..f3ed511 100644 --- a/shelter/scripts/index.js +++ b/shelter/scripts/index.js @@ -158,26 +158,27 @@ const menuBtn = document.querySelector('.menu__btn'); menuBox.addEventListener('click', ()=> { burgerToggle.checked = false; - document.body.classList.toggle('overflow-hidden-class'); + document.body.classList.remove('overflow-hidden-class'); // shadow.classList.toggle('shadow'); shadow.style.display = 'none'; }) shadow.addEventListener('click', ()=> { burgerToggle.checked = false; - document.body.classList.toggle('overflow-hidden-class'); + document.body.classList.remove('overflow-hidden-class'); // shadow.classList.toggle('shadow'); shadow.style.display = 'none'; }) burgerToggle.addEventListener('click', ()=> { - document.body.classList.toggle('overflow-hidden-class'); + document.body.classList.add('overflow-hidden-class'); shadow.style.display = 'block'; + }) menuBtn.addEventListener('click', ()=> { burgerToggle.checked = false; - document.body.classList.toggle('overflow-hidden-class'); + // document.body.classList.toggle('overflow-hidden-class'); // shadow.classList.toggle('shadow'); shadow.style.display = 'none'; })