Блог

Я пытаюсь создать простую навигационную панель боковой панели, которая работает как меню на этом веб-сайте ->

https://www.romereborn.org/arch-of-constantine/arch_quiz.html

По сути, я пытаюсь создать меню, в котором первое нажатие на кнопку открывает меню и нажатие той же кнопки закрывает меню, но меню все еще видно.

Я начал использовать этот пример в w3schools, но в нем две кнопки, а не одна. Я попытался отредактировать кнопки, чтобы просто иметь кнопку закрытия, которая работает в обоих направлениях, но это вообще не сработало.

https://www.w3schools.com/howto/howto_js_collapse_sidebar.asp

Кто-нибудь сможет мне помочь или направить меня к учебнику?

Вы можете удалить кнопку openbtn и просто сохранить closebtn в вашем HTML.

Измените это в своем CSS:

 .sidebar { width: 35px }
.sidebar closebtn {right: 0px}
#main { padding-left : 40px }
  

Измените свой javascript, чтобы иметь только событие с closebtn:

 /* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
let bool = false;
function closeNav() {
  bool = !bool;
  if (bool) {
    document.getElementById("mySidebar").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
    document.querySelector(".closebtn").innerHTML = "amp;times;";
  } else {
    document.getElementById("mySidebar").style.width = "35px";
    document.getElementById("main").style.marginLeft = "0";
    document.querySelector(".closebtn").innerHTML = "amp;#9776;";
  }
}