html - 菜单仅在使用汉堡包时可见

Question

当我在网站上时，菜单是隐藏的。
然后当我调整页面大小时并使用汉堡包时，菜单正常显示。< br/> 当我重新调整页面大小时，菜单仍然可见。
刷新网站后，问题再次出现。

你在我的演示页面上看到了问题:

如果你能帮助我，我将非常高兴。

谢谢。

---

代码:

body {
  min-height: 100%;
}


/* HEADER */

#header {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 1000px;
  right: 0px;
  overflow: hidden;
}

.backgroundheader {
  top: 0 !important;
  position: relative !important;
  height: 350px;
  background-color: #333;
  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 1);
  background-image: url("images/bamboo.png"), url("images/bamboo2.png");
  background-repeat: no-repeat;
  background-size: 560px, 195px;
  width: 100%;
  min-width: 100%;
  background-position: top right, top left
}

.logo {
  left: 0 !important;
  position: absolute;
  height: 200px;
  width: 600px;
  margin-top: 70px;
  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.8);
  background-color: #AB2732;
  float: left !important
}


/* HEADER */


/* MENU */

ul {
  list-style-type: none;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  padding: 0;
  overflow: hidden;
  font-size: 220%;
  font-family: menu
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 23px;
  text-decoration: none;
}

li a:hover {
  background-color: #111111;
}

.vyber {
  position: absolute;
  background-color: #AB2732;
  background-size: 100%;
  width: 100%;
  height: 100px;
  margin-top: 410px;
  -webkit-animation-name: example;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-duration: 4s;
  /* Safari 4.0 - 8.0 */
  animation-name: vysunuti;
  animation-duration: 0.8s;
  box-shadow: inset -0px 0 40px rgba(0, 0, 0, 0.7);
  margin-bottom: 200px;
}

.hamburger {
  visibility: hidden;
}

.hamburger-box {
  margin-top: 80px;
}

@media screen and (max-width: 1246px) {
  ul {
    top: 345px;
    z-index: 99
  }
  ul li {
    ;
    background-color: #333;
    display: block;
    text-align: center;
    width: 100%
  }
  .hamburger {
    visibility: visible
  }
  .hamburger-box {
    -webkit-animation: hamburger 0.5s ease-in-out;
    animation: hamburger 0.5s ease-in-out;
  }
}

@-webkit-keyframes hamburger {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}

@font-face {
  font-family: menu;
  src: url("fonty/menu.otf");
}


/* MENU */


/* MENU */

<div class="nav" id="header">
  <div class="backgroundheader">
    <div class="logo"></div>
    <div class="simple-ss"></div>

    <div id="container">
      <div class="navbar-header">
        <button style="right: 0 !important; position: absolute;margin-right: 30px;margin-top: 350px;z-index: 10" class="hamburger hamburger--spring navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" type="button">
                            <span class="hamburger-box">
                                <span class="hamburger-inner"></span>
                            </span>
                        </button>

        <div class="vyber">
          <div class=" collapse " id="bs-example-navbar-collapse-1">
            <div class="navbar-header">
              <ul>
                <li>
                  <a href="#">O nás</a>
                </li>
                <li>
                  <a href="#">Restaurace</a>
                </li>
                <li>
                  <a href="#">Running sushi</a>
                </li>
                <li>
                  <a href="#">Kontakt</a>
                </li>
                <li>
                  <a href="#">Fotogalerie</a>
                </li>
              </ul>
              <div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

汉堡包不是你的问题。

这是您的网站现在如何工作的伪代码:

你的伪代码

var showMenu = false;
var showButton = false;

if 1246px > windowWidth 
    showButton = true;

if buttonIsClicked == true
    showMenu = !showMenu;
        (if it is true it will set to false)
        (if it is false it will set to true)

问题

因此您需要在用户访问网站时显示您的菜单。
当 windowWidth 小于 1246px 时，您将停止显示菜单并显示按钮。现在，当用户禁用菜单并使 windowWidth 大于 1246px 时，您需要再次启用菜单。这在伪代码中看起来像这样。

好的伪代码

var showMenu = true;
var showButton = false;

if 1246px > windowWidth 
    showButton = true;
    showMenu = false;

if 1246px < windowWidth
    showMenu = true;

if buttonIsClicked == true
    showMenu = !showMenu;

有了这些知识，你应该能够解决你的 css