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.
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.
I cannot reproduce this issue on JSFiddle, just on my server when the python strings get called within the content.
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>This problem occurs when the CSS animations are called on page load. To solve this without any JavaScript, use keyframes without animations set. These keyframes will run on page load and prevent the transition from happening.
// 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;
}
}
Although a better solution would be to follow steps in this answer to setup the navigation animation.