UI with UX improvements with only CSS

index.html

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

script.js

	/*
	NO JS, I said! ^^
	*/

style.scss

$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,30%),.6);
		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;
		-webkit-filter: blur(2px);
		        filter: blur(2px); /* quite laggy :S */
	}
}

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

styles

<link href="https://fonts.googleapis.com/css?family=Lato:300,700|Roboto+Condensed:700" rel="stylesheet" />

ui-with-ux-improvements-with-only-css.markdown

UI with UX improvements with only CSS

Burger icon with pseudo-elements, animated nav background with pseudo-element, off-trigger area (outside nav opened) width pseudo-element.

No repaint, no reflow, no JS, but the blur effect may be a little laggy, particulary on mobile devices.

A Pen by Twikito on CodePen.

License.