<input type="checkbox" id="navcheck" role="button" title="menu">
<label for="navcheck" aria-hidden="true" title="menu">
<span class="burger">
<span class="bar">
<span class="visuallyhidden">Menu</span>
</span>
</span>
</label>
<nav id="menu">
<a href="#">Lorem.</a>
<a href="#">Nesciunt!</a>
<a href="#">Magnam.</a>
<a href="#">Ipsum.</a>
<a href="#">Voluptatem.</a>
<a href="#">Quibusdam.</a>
</nav>
<main>
<article class="content">
<h1>UI with UX improvement with only awesome CSS</h1>
<p><strong>Burger icon, animated nav background and off-trigger area (outside nav opened) made width pseudo-elements. No JS at all :)</strong></p>
<p><strong>No repaint, no reflow, no JS, but the blur effect may be a little laggy, particularly on mobile devices.</strong></p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum asperiores, minima obcaecati ex iusto alias minus excepturi sunt! Asperiores quibusdam iure numquam quis dicta at quisquam debitis minima perspiciatis modi?</p>
<p>Asperiores impedit neque porro, minus cum. Nesciunt blanditiis, dolorum explicabo esse voluptates voluptas doloribus, vero voluptate veniam impedit nam doloremque unde inventore ipsum iste magnam perferendis assumenda in sunt deleniti.</p>
<p>Cum quidem eum quos provident placeat aut tempore rem voluptates eveniet? Eos impedit aspernatur hic tenetur ipsum tempora exercitationem libero voluptas numquam necessitatibus. Error quisquam quaerat debitis suscipit velit dolore.</p>
<p>Atque, ab libero! Cum quae cumque voluptate culpa accusantium iste aliquam illum quos facere quisquam, delectus, magnam neque dicta quibusdam libero itaque dolorem, tenetur vel dolores laudantium ratione asperiores voluptatibus.</p>
<p>Fugiat praesentium omnis maiores atque sed perspiciatis quia laboriosam! Eius mollitia iusto quia libero, voluptate laborum labore ducimus beatae, quisquam, dicta laboriosam culpa voluptatem impedit maxime, a ex pariatur dignissimos.</p>
<p>Dolores odio dolore quo? Autem iure dolorem ratione, odit reiciendis. Non pariatur voluptates, explicabo vitae, rem molestias in. Voluptates expedita iusto blanditiis commodi numquam. Hic atque natus dolore cupiditate velit.</p>
<p>Ipsam ipsum quos, quibusdam nulla commodi dolorem impedit soluta odio natus. Ullam dolor consequatur tenetur similique cupiditate debitis natus tempore molestiae quo, inventore in quia earum explicabo eaque qui facilis.</p>
<p>Iure, natus. Ipsam officia nostrum minima ut blanditiis asperiores neque esse itaque reprehenderit, et, porro ea nemo eligendi cum soluta fuga similique? Soluta, nam odio praesentium quas officia repellendus dicta.</p>
<p>Modi voluptates, doloremque aliquam. Magnam numquam fugit aliquam veniam officiis iusto et assumenda cupiditate aspernatur voluptas expedita quo voluptatibus repudiandae, sapiente molestias, culpa eos placeat possimus quae! Aliquid dicta, atque?</p>
<p>Laborum magni ipsam iure iste blanditiis saepe. Optio obcaecati quaerat soluta, vitae. Asperiores reiciendis minima, quidem iusto explicabo culpa quaerat atque! Cum nesciunt nam ducimus mollitia iste sapiente sit, eos.</p>
</article>
</main>
$timing-function : cubic-bezier(0.190, 1.000, 0.220, 1.000);
$nav-width-desktop : 40em;
$nav-width-mobile : 25em;
$nav-item-nb : 6;
input {
position: fixed;
opacity: 0;
}
label {
position: absolute;
margin: 0;
padding: 0;
border: none;
outline: none;
background: none;
cursor: pointer;
&::before {
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(darken(#3498db,40%),.75);
content: '';
opacity: 0;
pointer-events: none;
transition: opacity .5s $timing-function;
}
.burger {
position: fixed;
top: 1em;
left: 1em;
z-index: 3;
width: 2em;
height: 2em;
margin: 0;
padding: 0;
transition: opacity .5s $timing-function;
&::before,
.bar,
&::after {
position: absolute;
left: 0;
display: block;
width: 100%;
height: 12%;
background: white;
content: '';
transition: all .5s $timing-function;
}
.bar {
top: 44%;
}
&::before {
top: 0;
transform-origin: top left;
}
&::after {
bottom: 0;
transform-origin: bottom left;
}
}
}
input:focus + label,
label:hover {
.burger {
opacity: .75;
}
}
nav {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 2;
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: flex-start;
transform: translate3d(0,0,0); /* material acceleration */
transform: translateX(-100%);
will-change: transform;
transition: transform .5s $timing-function;
&::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: -1;
width: $nav-width-mobile;
background: #d62956;
content: '';
transform: skewX(15deg) translateX(-100%);
transform-origin: bottom left;
will-change: transform;
transition: transform .5s $timing-function;
@media(min-width: 40em) {
width: $nav-width-desktop;
}
}
a {
margin: .5em 0;
padding: .2em 2em;
font-size: 1.5em;
color: white;
text-decoration: none;
font-weight: 500;
transform: translateX(-100%);
transition: color .15s, transform .5s;
transition-timing-function: $timing-function;
@for $i from 1 through $nav-item-nb {
&:nth-child(#{$i}) { transition-delay: 0s, #{50 + (50 * $i)}ms; }
}
&:hover, &:focus {
color: black;
}
}
}
main {
overflow: hidden;
.content {
transform: translate3d(0,0,0); /* material acceleration */
will-change: transform, filter;
transition: all .5s $timing-function;
}
}
[id="navcheck"]:checked {
& + label {
&::before {
opacity: 1;
pointer-events: auto;
}
.burger {
&::before,
&::after {
width: 141.42%; // Pythagore!
}
&::before {
transform: rotate(45deg) translateY(-50%);
}
&::after {
transform: rotate(-45deg) translateY(50%);
}
.bar {
transform: scale(0.1);
}
}
}
& ~ nav {
transform: translateX(0);
&::before {
transform: skewX(15deg) translateX(0);
}
a {
transform: translateX(0);
}
}
& ~ main .content {
transform: translateX(3em);
transform-origin: left center;
filter: blur(2px);
}
}
/* helper */
.visuallyhidden { border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; }
/* misc */
body { overflow-x: hidden; background: #444; color: white; font: 1em/1.4 "lato"; }
main { background: #3498db; padding: 5% 0; }
article { width: 80%; margin: 0 auto; font-size: 1.3em; @media(min-width: 60em) { width: 50%; } }
h1 { font: 2.5em/1.4 "roboto condensed"; font-weight: 700; }
View Compiled
