2

I am working on a slide/push out menu and have another question (thanks for the help last time).

I have the menu sliding out and compressing the webpage, but the webpage on the server is a bit slow (complex page and calling python strings etc) and its causing a flash of the menu underneath to be shown before the page content loads. So I think I would want to hide the menu on page load, maybe until you click the trigger icon. I've tried a bunch of things and cant figure out how to do it. I'm sure its simple, and that I just don't fully understand the 'checkbox hack'. Any other suggestions are welcome though! I can't have javascript, only css.

Extra, but would be helpful: If anyone could help me implement that animated icon (under the home icon) instead of the home icon, it would be super helpful. I cant seem to figure it out.

Edit: I realized that what was causing the flash is transition: all 0.4s ease 0s; on .site-wrap. Because it is slower on my server, the transition is slowed down and you can see the underlying menu when the whole page transitions. Not sure if there is a way to do left and right transition combined, rather than all.

Edit: I cannot reproduce this issue on jsfiddle, just on my server when the python strings get called within the content.

I hope this all makes sense!

Here is my jsfiddle for reference: 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>

4

1 回答 1

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;
    }
}

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

第一个答案display: none;通过添加到类来 在页面最初加载时隐藏菜单navigation。

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

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 上调试它。希望这可以帮助！

于 2016-09-11T19:06:47.447 回答