Question

为什么当一个人点击汉堡包按钮转到X按钮并决定刷新并且X按钮仍然存在？刷新网站后如何让汉堡包按钮再次显示？

以下是我网站的链接：http://dannysaavedra.com/photobeta

以下是我的汉堡包按钮和CSS中的X按钮的代码。

这只发生在Firefox浏览器中。

/*Begin Hamburger Menu*/
#menu {
  position: fixed;
  top:17px;
  right: 20px;
  height: 28px;
  width: 35px;
  cursor: pointer;
  z-index: 7;
}

.nav-trigger {
  cursor: pointer;
  clip: rect(0, 0, 0, 0);
  position: fixed;
}

label {
  position: absolute;
  height: 100%;
  width: 100%;
  cursor: pointer;
}

#menuButton,
#menuButton:before,
#menuButton:after {
  cursor: pointer;
  position: fixed;
  top: 30px;
  right: 20px;
  z-index: 2;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background-color: white;
  content: '';
}

.nav-trigger:checked + #menuButton:before,
.nav-trigger:checked + #menuButton:after {
  top: 30px;
  right:20px;
  background-color: red;
}

#menuButton:before {
  top: 20px;
}

#menuButton:after {
  top: 40px;
}

.nav-trigger:checked + #menuButton:after {
  transform: rotate(-45deg);
}

.nav-trigger:checked + #menuButton {
  background-color: transparent;
}

.nav-trigger:checked + #menuButton:before {
  transform: rotate(45deg);
}

.nav-trigger + #menuButton:before,
.nav-trigger + #menuButton:after {
  transition: all 200ms ease-in-out;
}

.nav-trigger:checked + #menuButton:before,
.nav-trigger:checked + #menuButton:after {
  transition: all 200ms ease-in-out;
}

.nav-trigger + #menuButton,
.site-wrap {
  transition: left 0.2s;
}

.nav-trigger + #menuButton {
  right: 20px;
  transition: right 0.2s;
  transition: all 10ms ease-in-out;
}

.nav-trigger:checked ~ .site-wrap {
  left: -300px;
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
  transition: left 0.2s;
}

Answer 1

编辑：似乎：已检查未在Firefox中重置。我找到了一个类似的主题，建议在给定元素中添加autocomplete="off"。找到主题here。

OLD：尝试将-webkit-transition添加到所有转换中，如下所示：

-webkit-transition: someTransition;
transition: someTransition;

变换也是如此。

汉堡按钮转移到X按钮，但刷新时不会返回汉堡包按钮

1 个答案: