Shelter part3

shelter/scripts/index.js

@@ -154,26 +154,36 @@ 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;
-    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');
-    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';
+})
+
+
 const modalWindow = document.querySelector('.modal-window');
 const modalWindowBg = document.querySelector('.modal-bg');
 

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';
 })
 
 

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;
 }