Блог

Я создал эту страницу с кнопкой ,которая является гамбургером и боковой панелью , когда пользователь нажимает на меню гамбургера, его боковая панель исчезает, но я сталкиваюсь с проблемой, которая заключается в том, что когда я переключаю кнопку, боковая панель исчезает и тоже появляется, но проблема в том, что кнопка исчезает, я думаю, что ее положение : абсолютное или сетчатое, если я делаю положение относительно, это происходит так, как я, то есть кнопка не исчезает, но она оставляет пространство над тем, что я не хочу HTML-код, Это html-код для боковой панели и меню гамбургеров, он уже на боковой панели-скрыть идентификатор, потому что он уже скрыт при загрузке страницы

 lt;htmlgt;  lt;headgt;  lt;titlegt;Side Barlt;/titlegt;  lt;link rel="stylesheet" href="./indexSB.css"gt;lt;/linkgt;  lt;link href="https://fonts.googleapis.com/css2?family=Noto Sans:ital@1amp;display=swap"   rel="stylesheet"gt;  lt;link href="https://fonts.googleapis.com/css2?family=Patrick Handamp;display=swap"   rel="stylesheet"gt;  lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons"gt;    lt;/headgt;  lt;bodygt;  lt;div id="wrapper-hamBtn"gt;  lt;button id="hamburger-btn"gt;Buttonlt;/buttongt;  lt;/divgt;  lt;div id="sidebar-hide" class="sidebar-class"gt;  lt;div id="upper-row" class="grid-item"gt;  lt;button id="cancel-btn"gt;lt;span class="material-icons" id="cancel-   span"gt;clearlt;/spangt;lt;/buttongt;  lt;/divgt;  lt;div id="home" class="grid-item"gt;lt;span class="GI-span"gt;Homelt;/spangt;lt;/divgt;  lt;div id="about" class="grid-item"gt;lt;span class="GI-span"gt;Aboutlt;/spangt;lt;/divgt;  lt;div id="project" class="grid-item"gt;lt;span class="GI-span"gt;Projectlt;/spangt;lt;/divgt;  lt;div id="contact" class="grid-item"gt;lt;span class="GI-span"gt;Contactlt;/spangt;lt;/divgt;  lt;div id="end"gt;lt;/divgt;  lt;/divgt;  lt;script src="indexSB.js"gt;lt;/scriptgt;  lt;/bodygt;  lt;/htmlgt;  

Код CSS я думаю , что это из-за сетки, если я изменю значение позиции на относительное, оно работает нормально, я не могу использовать относительное, потому что оно оставляет зазор в верхней части кнопки

 *{  margin:0px;  background-color: cornflowerblue; } .hamburger{  border:2px solid black;  margin:3px;  width:25px;  border-radius: 5px;  margin-right: 20px;  }   /* #wrapper-hamBtn{  display: flex;  /* align-items: ; */  /* position: fixed;  right:0px; */  /* cursor : pointer; */  /* } */    /* #cancel-icon{    } */  #hamburger-btn{  height: 30px;  position: absolute;  left:500px;  /* display: inline; */  }  #cancel{  font-size: 30px;  color:red;  }    #sidebar-show{  display: grid;  grid-template-rows: 100px 100x 100px 100px;  grid-template-columns: 300px;  transform: translateX(0%);  transition-duration: 0.5s;    }  .grid-item{  height: 90px;  background-color: white;  width: 300px;  border-right: 2px solid black;  font-size: 50px;  /* font-family: 'Noto Sans', sans-serif; */  font-family: 'Patrick Hand', cursive;  /* position: absolute; */  /* left:30px; */  display: flex;  align-items: center;  }  .GI-span{  background-color: white;  position: relative;  left:20px;  }  #end{  background-color: white;  height: 175px;  width: 300px;  border-right:2px solid black;  }  #cancel-span{  background-color: white;  color: #e60000;  font-size: 40px;  cursor: pointer;  /* transform:rotate(160deg); */  }  #cancel-btn{  border: none;  background-color: white;  position: absolute;  left:240px;  /* transform:rotateY(70deg); */  }  #cancel-span:hover{  transform: rotate(360deg);  transition-duration:0.5s;  color:#ff4d4d;  transition-timing-function: ease-out;  }  .grid-item:hover gt;.GI-span{  background-color: rgb(27, 148, 204);  font-size: 45px;  transition-duration: 0.5s;  /* cursor:pointer; */    }  .grid-item:hover{  background-color: rgb(27, 148, 204);;  font-size: 45px;  transition-duration: 0.5s;  cursor:pointer;  }  #upper-row{  background-color: white;;  }  #sidebar-hide{  display: grid;  grid-template-rows: 100px 100x 100px 100px;  transform: translateX(-100%);   transition-duration: 1s;  /* display: inline; */  }  Javascript code  let hamBtn=document.querySelector("#hamburger-btn"); let cancelBtn=document.querySelector("#cancel-btn"); let sidebarClass=document.querySelector(".sidebar-class"); let isHide=true; function showHide(){  if(isHide==true){  let hideId=document.getElementById("sidebar-hide");  hideId.id="sidebar-show";  isHide=false;  }  else{  let showId=document.getElementById("sidebar-show");  showId.id="sidebar-hide";  isHide=true;  } } hamBtn.addEventListener("click",showHide); cancelBtn.addEventListener("click",showHide);  

Возможный обходной путь-сделать так, чтобы кнопка не исчезала вместе с position: absolute ней .

 let hamBtn=document.querySelector("#hamburger-btn"); let cancelBtn=document.querySelector("#cancel-btn"); let sidebarClass=document.querySelector(".sidebar-class"); let isHide=true; function showHide(){  if(isHide==true){  let hideId=document.getElementById("sidebar-hide");  hideId.id="sidebar-show";  isHide=false;  }  else{  let showId=document.getElementById("sidebar-show");  showId.id="sidebar-hide";  isHide=true;  } } hamBtn.addEventListener("click",showHide); cancelBtn.addEventListener("click",showHide); 

 *{  margin:0px;  background-color: cornflowerblue; } .hamburger{  border:2px solid black;  margin:3px;  width:25px;  border-radius: 5px;  margin-right: 20px;  }   /* #wrapper-hamBtn{  display: flex;  /* align-items: ; */  /* position: fixed;  right:0px; */  /* cursor : pointer; */  /* } */    /* #cancel-icon{    } */  #hamburger-btn{  height: 30px;  position: absolute;  left:500px;  z-index: 1;  /* display: inline; */  }  #cancel{  font-size: 30px;  color:red;  }    #sidebar-show{  display: grid;  grid-template-rows: 100px 100x 100px 100px;  grid-template-columns: 300px;  transform: translateX(0%);  transition-duration: 0.5s;    }  .grid-item{  height: 90px;  background-color: white;  width: 300px;  border-right: 2px solid black;  font-size: 50px;  /* font-family: 'Noto Sans', sans-serif; */  font-family: 'Patrick Hand', cursive;  /* position: absolute; */  /* left:30px; */  display: flex;  align-items: center;  }  .GI-span{  background-color: white;  position: relative;  left:20px;  }  #end{  background-color: white;  height: 175px;  width: 300px;  border-right:2px solid black;  }  #cancel-span{  background-color: white;  color: #e60000;  font-size: 40px;  cursor: pointer;  /* transform:rotate(160deg); */  }  #cancel-btn{  border: none;  background-color: white;  position: absolute;  left:240px;  /* transform:rotateY(70deg); */  }  #cancel-span:hover{  transform: rotate(360deg);  transition-duration:0.5s;  color:#ff4d4d;  transition-timing-function: ease-out;  }  .grid-item:hover gt;.GI-span{  background-color: rgb(27, 148, 204);  font-size: 45px;  transition-duration: 0.5s;  /* cursor:pointer; */    }  .grid-item:hover{  background-color: rgb(27, 148, 204);;  font-size: 45px;  transition-duration: 0.5s;  cursor:pointer;  }  #upper-row{  background-color: white;;  }  #sidebar-hide{  display: grid;  grid-template-rows: 100px 100x 100px 100px;  transform: translateX(-100%);   transition-duration: 1s;  /* display: inline; */  } 

 lt;!DOCTYPE htmlgt; lt;htmlgt;  lt;headgt;  lt;titlegt;Side Barlt;/titlegt;  lt;link rel="stylesheet" href="./indexSB.css"gt;lt;/linkgt;  lt;link href="https://fonts.googleapis.com/css2?family=Noto Sans:ital@1amp;display=swap"   rel="stylesheet"gt;  lt;link href="https://fonts.googleapis.com/css2?family=Patrick Handamp;display=swap"   rel="stylesheet"gt;  lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material Icons"gt;  lt;link rel="stylesheet" href="style.css"gt;  lt;/headgt;  lt;bodygt;  lt;div id="wrapper-hamBtn"gt;  lt;button id="hamburger-btn"gt;Buttonlt;/buttongt;  lt;/divgt;  lt;div id="sidebar-hide" class="sidebar-class"gt;  lt;div id="upper-row" class="grid-item"gt;  lt;button id="cancel-btn"gt;lt;span class="material-icons" id="cancel-   span"gt;clearlt;/spangt;lt;/buttongt;  lt;/divgt;  lt;div id="home" class="grid-item"gt;lt;span class="GI-span"gt;Homelt;/spangt;lt;/divgt;  lt;div id="about" class="grid-item"gt;lt;span class="GI-span"gt;Aboutlt;/spangt;lt;/divgt;  lt;div id="project" class="grid-item"gt;lt;span class="GI-span"gt;Projectlt;/spangt;lt;/divgt;  lt;div id="contact" class="grid-item"gt;lt;span class="GI-span"gt;Contactlt;/spangt;lt;/divgt;  lt;div id="end"gt;lt;/divgt;  lt;/divgt;  lt;script src="indexSB.js"gt;lt;/scriptgt;  lt;/bodygt;  lt;/htmlgt;