Переопределение стилей (заданных предыдущей функцией) при изменении размера экрана на Javascript - PullRequest
Новая
       0

Переопределение стилей (заданных предыдущей функцией) при изменении размера экрана на Javascript

0 голосов
/ 13 апреля 2020

У меня есть кнопка в заголовке мобильной версии сайта (<620px). Когда эта кнопка нажата, она запускает мою функцию «mobileNav», которая переключает мобильную навигацию между «display: none;» и «display: flex;». Работает отлично! Однако, если я открою меню, когда размер экрана <620 пикселей, а затем изменит размер экрана, чтобы увеличить его, мобильная навигация все равно будет отображаться (и из-за дизайна сайта не может закрыться). </p>

Мне нужно выяснить, как вернуть кнопку обратно в состояние «Выкл.». ИЛИ переопределяют стили, которые щелкают по кнопке, вставленной на место, когда экран становится больше (например, нажатие кнопки заставляет # mobile-nav "display: flex;", если размер экрана изменяется, переопределяет реализованное нажатием кнопки и делает # mobile- nave "display: none;".

Вот фрагмент кода. CSS немного неопрятен, но ключевые примечания:

  • "mobile-nav" is "display: none;" на рабочем столе
  • "disktop-nav" is "display: none;" на mobile
  • Функция "mobileNav" переключает "# mobile-nav" между "display: нет; "и" display: flex; "при нажатии кнопки
  • Текущая функция" mobileNav "в настоящее время не" закрывает "панель навигации при изменении размера экрана 

// SEARCH DROPDOWN--------------------------------------------------

function searchButton() {
  var x = document.getElementById("searchbar-wrap");
  if (x.style.transform === "scale(1)") {
    x.style.transform = "scale(1,0)";
  } else {
    x.style.transform = "scale(1)";
  }

  var x = document.getElementById("searchbar");
  if (x.style.transform === "scale(1)") {
    x.style.transform = "scale(1,0)";
  } else {
    x.style.transform = "scale(1)";
  }
}

// MOBILE NAV--------------------------------------------------

function mobileNav() {
  // Rotate Buger One and Reposition
  var x = document.getElementById("burger-one");
  if (x.style.transform === "rotate(45deg)") {
    x.style.transform = "rotate(0deg)";
    x.style.width = "40px";
    x.style.top = "15px";
  } else {
    x.style.transform = "rotate(45deg)";
    x.style.width = "20px";
    x.style.top = "18.4px";
  }

  // Rotate Buger Two and Reposition
  var x = document.getElementById("burger-two");
  if (x.style.transform === "rotate(-45deg)") {
    x.style.transform = "rotate(0deg)";
    x.style.width = "40px";
    x.style.bottom = "15px";
  } else {
    x.style.transform = "rotate(-45deg)";
    x.style.width = "20px";
    x.style.bottom = "18.4px";
  }

  // Show/Hide Mobile Nav
  var x = document.getElementById("mobile-nav");
  if (x.style.display === "flex") {
    x.style.display = "none";
  } else {
    x.style.display = "flex";
  }

  // Prevent Body from Scrolling Behind Mobile Nav
  var x = document.getElementById("body");
  if (x.style.overflow === "hidden") {
    x.style.overflow = "scroll";
  } else {
    x.style.overflow = "hidden";
  }

}
/*NAVIGATION--------------------------------------*/

.logo {
  width: 75px;
}

nav {
  width: calc(100% - 75px);
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

header ul {
  text-decoration: none;
  list-style-type: none;
  padding: 0px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
}

.mobile-nav ul {
  width: 100%;
  padding-left: 0px;
}

header li,
.mobile-nav li,
.button-wrap {
  text-decoration: none;
  background-color: transparent;
  height: 60px;
  padding-left: 10px;
  padding-right: 10px;
  transition: all 0.5s ease;
  border-right: 1px #334c22 solid;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.mobile-nav li {
  width: calc(100% - 20px);
  background-color: #3f5d21;
  margin-top: 10px;
}

.mobile-nav li:hover {
  background-color: #ece5d0;
  transition: all 0.5s ease;
  color: #3f5d21;
}

.mobile-li:hover .nav-text {
  color: #3f5d21;
}

.mobile-nav section {
  flex-direction: column;
}

header li:hover,
.button-wrap:hover {
  background-color: #334c22;
  transition: all 0.5s ease;
}

li:hover .nav-text {
  color: #8cc257;
  transition: all 0.5s ease;
}

.button-wrap:hover button {
  color: #8cc257;
  transition: all 0.5s ease;
}

.nav-text {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 1px;
  transition: all 0.5s ease;
}

#searchbar,
#searchbar-wrap {
  transform: scale(1, 0);
  transform-origin: top;
  transition: all 0.5s ease;
}

#searchbar-wrap {
  height: 40px;
}

#searchbar {
  height: 25px;
}

input {
  border: none;
  width: 100%;
  height: 25px !important;
  transition: all 0.5s ease;
  outline: none;
  padding-left: 10px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
}

nav button,
.searchbar-wrap button {
  height: 100%;
  width: 100%;
  border: none;
  cursor: pointer;
  background-color: transparent;
  color: #ffffff;
  outline: none;
}

.searchbutton-wrap {
  height: 25px;
  background-color: #3f5d21;
  padding-left: 10px;
  padding-right: 10px;
  transition: all 0.5s ease;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.searchbutton-wrap:hover {
  background-color: #ede5d0;
  transition: all 0.5s ease;
  color: #3f5d21;
}

.searchbutton-wrap:hover button {
  color: #3f5d21;
}

.searchbar-wrap {
  position: absolute;
  width: 100vw;
  margin-top: 50px;
  background-color: #334c22;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.mobile-nav .searchbar-wrap,
.mobile-nav input {
  position: relative;
  width: 100%;
  height: 60px;
  margin-top: 0px;
}

.searchbar-wrap section {
  justify-content: flex-end;
}

form {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.mobile-nav {
  height: calc(100vh - 60px);
  width: 100vw;
  margin-top: 60px;
  background-color: #334c22;
  position: fixed;
  z-index: 998;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.mobile-nav ul {
  margin-top: 0px;
}

.mobile-nav .searchbutton-wrap {
  height: 60px;
}

.mobile-nav .searchbar-wrap {
  margin-top: 30px;
}

.mobile-nav #searchbar-wrap,
.mobile-nav #searchbar {
  transform: scale(1, 1);
}

.mobile-nav input {
  height: 60px !important;
}


/*Mobile Nav Button*/

#mobile-nav {
  display: none;
}

.mobile-nav-button {
  height: 40px;
  width: 40px;
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  position: relative;
  overflow: visible;
  display: none;
}

.mobile-nav-button:hover .hamburger {
  background-color: #8cc257;
  transition: all 0.5s ease;
}

.hamburger {
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  height: 3px;
  width: 40px;
  border-radius: 999px;
  background-color: #ffffff;
  transition: all 0.5s ease;
}

#burger-one,
#burger-two {
  transform: rotate(0deg);
}

#burger-one {
  top: 15px;
}

#burger-two {
  bottom: 15px;
}


/*NAVIGATION END--------------------------------------*/


/*MASTER ITEMS--------------------------------------*/

body {
  margin: 0px;
  padding: 0px;
  position: relative;
}

header {
  width: 100%;
  height: 60px;
  background-color: #3f5d21;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: fixed;
  margin: auto;
  top: 0;
  z-index: 9999;
  box-shadow: 0px 0px 20px #000000;
}

section {
  width: 80%;
  max-width: 1200px;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

a {
  text-decoration: none;
  color: inherit;
}


/*MASTER ITEMS END--------------------------------------*/


/*TEXT--------------------------------------*/

p {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  font-size: 15px;
}

.text-small {
  font-size: 10px;
  font-weight: 400;
}

h1 {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  color: #000000;
  font-size: 50px;
  margin-bottom: 0px;
}

h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 20px;
  color: #3f5d21;
}

h3 {
  text-transform: uppercase;
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-size: 15px;
}

.hero h1 {
  color: #ffffff;
}

.hero p,
.section-headline p {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  color: #8cc257;
  font-size: 20px;
  margin-top: 0px;
}

.column p {
  margin-top: 0px;
}


/*TEXT END--------------------------------------*/


/*MOBILE--------------------------------------*/

@media only screen and (max-width: 620px) {
  .desktop-nav {
    display: none;
  }
  .mobile-nav-button {
    display: block;
  }
  header .searchbar-wrap {
    display: none;
  }
}
image

1 Ответ

1 голос
/ 13 апреля 2020

Быстрое исправление ...

Как только происходит событие resize, скрыть мобильное меню?

Что также может произойти при смене портрета / ландшафта ... Но это может быть полезным Вам решать. 

window.addEventListener("resize", ()=>{
  if(document.getElementById("mobile-nav").style.display === "flex"){

    // Use the existing function to close it
    mobileNav();
  }
});

CodePen

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...