在页面加载时隐藏 slide/push 菜单？（仅限 css）

Question

我正在制作 slide/push 输出菜单，还有一个问题（感谢上次的帮助）。

我有菜单滑出并压缩网页，但是服务器上的网页有点慢（复杂的页面和调用 python 字符串等）并且导致下面的菜单闪烁在页面内容加载之前显示。所以我认为我想在页面加载时隐藏菜单，也许直到您单击触发图标。我已经尝试了很多东西，但不知道该怎么做。我敢肯定它很简单，而且我只是不完全理解 'checkbox hack'。不过，欢迎任何其他建议！我不能有 javascript，只有 css.

额外的，但会有所帮助：如果有人能帮我实现那个动画图标（在主页图标下）而不是主页图标，那将非常有帮助。我好像想不通。

编辑：我意识到导致闪光的原因是 .site-wrap 上的 transition: all 0.4s ease 0s;。因为在我的服务器上比较慢，所以过渡慢了，整个页面过渡的时候你可以看到底层的菜单。不确定是否有办法结合 left 和 right 转换，而不是 all.

编辑：我无法在 jsfiddle 上重现此问题，只能在内容中调用 python 字符串时在我的服务器上重现。

我希望这一切都有意义！

这是我的jsfiddle供参考： https://jsfiddle.net/2u64k0xq/6/

/* Navigation Menu - Background */

.navigation {
  /* critical sizing and position styles */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  /* non-critical appearance styles */
  list-style: none;
  background: #1c2227;
}
/* Navigation Menu - List items */

.nav-item {
  /* non-critical appearance styles */
  width: 200px;
  border-top: 1px solid #1c2227;
  border-bottom: 1px solid #000;
}
.nav-item a {
  /* non-critical appearance styles */
  display: block;
  padding: 1em;
  background: #1c2227;
  color: white;
  font-size: 1.2em;
  text-decoration: none;
  transition: color 0.2s, background 0.5s;
}
.nav-item a:hover {
  color: #c74438;
}
/* Site Wrapper - Everything that isn't navigation */

.site-wrap {
  /* Critical position and size styles */
  min-height: 100%;
  min-width: 100%;
  width: 100%;
  background-color: #f3f6f8;
  /* Needs a background or else the nav will show through */
  position: relative;
  top: 0;
  bottom: 100%;
  float: right;
  right: 0;
  z-index: 1;
  /* non-critical apperance styles */
  background-size: 200%;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
/* Nav Trigger */

.nav-trigger {
  /* critical styles - hide the checkbox input */
  position: absolute;
  clip: rect(0, 0, 0, 0);
}
label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 15px;
  top: 15px;
  z-index: 2;
  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-image: url("http://icons.iconarchive.com/icons/artua/mac/256/Home-icon.png");
  background-size: contain;
  -moz-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  -webkit-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
/* Make the Magic Happen */

.nav-trigger + label,
.site-wrap {} .nav-trigger:checked + label {
  left: 215px;
}
.nav-trigger:checked ~ .site-wrap {
  min-width: calc(100% - 200px);
  box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
  width: calc(100% - 200px);
}
/* Micro reset */

html {
  position: relative;
  min-height: 100%;
  height: 100%;
}
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font: .8em sans-serif;
  line-height: 1.4em;
  letter-spacing: .03em;
  height: 100%;
  padding: 0;
  margin: 0 0 0 0;
  overflow-x: hidden;
  background-color: #f3f6f8;
  color: #1c2227;
  background-attachment: fixed;
}
/* page styles */

.dds-header-wrapper {
  height: 4em;
  background-color: #1c2227;
}
.dds-header-dash-icon {
  background-color: #1c2227;
  width: 9em;
  color: #fff;
  height: 100%;
  float: left;
  font-size: .35em;
  line-height: 1.6em;
  text-align: center;
  padding-top: 3em;
  padding-left: 2em;
  -webkit-transition: all 0.10s ease-in-out;
  -moz-transition: all 0.10s ease-in-out;
  transition: all 0.15s ease-in-out;
  display: block;
  margin-left: -10px;
}
.dds-header-dash-icon:hover {
  margin-left: 0px;
  background-color: #3b3e43;
  display: block;
}

<ul class="navigation">
  <li class="nav-item"><a href="#">Home</a>
  </li>
  <li class="nav-item"><a href="#">Portfolio</a>
  </li>
  <li class="nav-item"><a href="#">About</a>
  </li>
  <li class="nav-item"><a href="#">Blog</a>
  </li>
  <li class="nav-item"><a href="#">Contact</a>
  </li>
</ul>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger"></label>

<div class="site-wrap">

  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi vero nisi eos sed qui natus, ut eius reprehenderit error nesciunt veniam aliquam nulla itaque labore obcaecati molestiae eveniet, perferendis provident amet perspiciatis expedita accusantium!
    Eveniet, quos voluptas et, labore natus, saepe unde est nulla sit eaque tempore debitis accusantium. Recusandae.</p>
  <p>Dolorem aliquam a libero reiciendis obcaecati doloribus ipsa eos laudantium, dicta in! Odit iure ut ratione, dolorum cupiditate perferendis voluptatum sapiente, dignissimos sunt necessitatibus, reprehenderit consequatur dolorem. Aliquam veniam quaerat,
    pariatur deserunt reiciendis vero vitae, repellat omnis sequi dolor nesciunt. Nihil similique alias impedit, obcaecati eligendi delectus voluptatum! Ipsum, vel.</p>
  <p>Sint, perspiciatis nemo aut, rerum excepturi deleniti modi quos nihil corporis eum, maiores soluta labore, consectetur eligendi nesciunt. Placeat, incidunt! Illum placeat eligendi, veritatis consectetur eum! Dolor obcaecati minima ab placeat voluptatem
    neque modi doloribus, magnam qui voluptate eaque in. Nulla expedita hic porro architecto facere officiis vitae numquam, dolor!</p>
  <p>Perferendis quis ea incidunt ducimus nisi voluptate natus. Repellat asperiores quod rerum rem quos blanditiis enim modi, veniam voluptas a facilis! Velit cum omnis, voluptatum eum inventore! Corrupti, suscipit, neque distinctio expedita est laboriosam
    cum aliquid minus tempora quaerat officia possimus unde vel deleniti eaque fugit accusamus iusto dolorum natus.</p>
</div>

Answer 1

更新的答案 经进一步澄清，当在页面加载时调用 CSS 动画时会出现此问题。要在没有任何 Javascript 的情况下解决此问题，请使用不设置动画的关键帧。这些关键帧将运行在页面加载时阻止过渡发生。

// Add noAnimation keyframe to any class that has transitions
.nav-item a, .site-wrap {
    -moz-animation-name: noAnimation;
    -webkit-animation-name: noAnimation;
    animation-name: noAnimation;
}
// noAnimation keyframe
@-moz-keyframes noAnimation {
    0% {
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: color 0 ease-in;
        transition: none;
    }
    100% {
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: color 0 ease-in;
        transition: none;
    }
}
@-webkit-keyframes noAnimation {
    0% {
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: color 0 ease-in;
        transition: none;
    }
    100% {
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: color 0 ease-in;
        transition: none;
    }
}
@keyframes noAnimation {
    0% {
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: color 0 ease-in;
        transition: none;
    }
    100% {
        -moz-transition: none;
        -webkit-transition: none;
        -o-transition: color 0 ease-in;
        transition: none;
    }
}

尽管更好的解决方案是按照 this answer 中的步骤设置导航动画。

第一个答案 通过将 display: none; 添加到 navigation class.

，在页面初始加载时隐藏菜单

然后使用下面的代码使导航再次可见。将代码放在数据库请求的成功回调中。因此，当数据库请求成功返回时，它将显示导航。

document.getElementsByClassName('navigation').style.display = 'block';

或者这个，如果你使用 jQuery:

$('.navigation').css('display','block');

如果您没有回调函数，您还可以使用 setTimeout 在导航再次可见之前添加延迟。

// Will wait 200 milliseconds before running.
setTimout(function() {
    document.getElementsByClassName('navigation').style.display = 'block';
}, 200);

虽然老实说我不明白为什么在等待返回数据库请求时菜单是可见的，但是很难从 jsFiddle 上的内容中调试它。希望这对您有所帮助！

在页面加载时隐藏 slide/push 菜单？（仅限 css）

Hide slide/push menu on page load? (css only)

html

css

checkbox

menu

css-hack

在页面加载时隐藏 slide/push 菜单？ （仅限 css）

Hide slide/push menu on page load? (css only)

html

css

checkbox

menu

css-hack

在页面加载时隐藏 slide/push 菜单？（仅限 css）