Pure CSS3 Parallax Menu

index.html

<div class="parallax">
	<input type="checkbox" id="menu-toggle" class="hidden">
	<label for="menu-toggle">
		<span class="glyphicon"></span>
	</label>
	<div class="menu">
		<h2>Dashboard</h2>
		<ul>
			<li>FILTERS</li>
			<li><a href="javascript:void(0)" class="active">Reports</a></li>
			<li><a href="javascript:void(0)">Documents</a></li>
			<li><a href="javascript:void(0)">Reviews</a></li>
			<li><a href="javascript:void(0)">Messages</a></li>
		</ul>
	</div><!--/.menu-->
	<div class="content">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<h1>Consectetur adipiscing</h1>
					<hr>
				</div><!--/.col-md-12-->
				<div class="col-sm-4">
					<img src="https://images.unsplash.com/photo-1418065460487-3e41a6c84dc5?q=80&fm=jpg&s=13c892f6ad31fb47e453970580ad28e1" class="img-responsive">
					<h4>Lorem ipsum dolor</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit id orci eget vulputate. Duis quam quam, molestie ac rhoncus vel, convallis at libero.</p>
				</div><!--/.col-sm-4-->
				<div class="col-sm-4">
					<img src="https://picjumbo.imgix.net/IMG_6640.jpg?q=40&w=3000&sharp=40" class="img-responsive">
					<h4>Cras suscipit id</h4>
					<p>Consectetur adipiscing elit. Cras suscipit id orci eget vulputate. Etiam in libero sed magna fermentum condimentum. Duis at nibh vel lectus ullamcorper fermentum. Maecenas congue sem vitae magna posuere ullamcorper.</p>
				</div><!--/.col-sm-4-->
				<div class="col-sm-4">
					<img src="https://images.unsplash.com/uploads/1413259835094dcdeb9d3/6e609595?q=80&fm=jpg&s=34df8de331cae7450247b04ed37d9ede" class="img-responsive">
					<h4>Etiam in libero</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit id orci eget vulputate. Etiam in libero sed magna fermentum condimentum.</p>
				</div><!--/.col-sm-4-->
			</div><!--/.row-->
			<h5><a href="http://www.codepen.io/brycesnyder" target="_blank">CHECK OUT MY OTHER PENS</a></h5>
		</div><!--/.container-->
	</div><!--/.content-->
</div><!--/.parallax-->

Pure CSS3 Parallax Menu.markdown

Pure CSS3 Parallax Menu

Using only CSS creating a slide out menu with animations with pseudo siblings and checkbox. Also works with mobile.

A Pen by Bryce Snyder on CodePen.

License.

style.css

transitions(x, y, z)
	-webkit-transition x y z
	transition x y z

.parallax
	input[type="checkbox"]
		&:checked
			~
				label
					span
						&::after
							content "\e236"
							color inherit
							transitions(all, .25s, ease-in-out)
				.menu
					left -25%
				.content
					.container
						margin-left 0
	label
		position absolute
		top 20px
		right 20px
		left inherit
		z-index 999
		span
			&::after
				transitions(all, .25s, ease-in-out)
				content "\e014"
				font-size 30px
				cursor pointer
				color #DA4453
	.menu
		position absolute
		top 0
		left 0
		width 25%
		height 100%
		background #25262D
		z-index 9
		transitions(all, .5s, ease-in-out)
		h2
			color white
			font-weight lighter
			margin-left 20px
		ul
			list-style-type none
			padding 0
			li
				position relative
				&:first-child
					margin-left 20px
					color #555
					padding 10px 0
					font-size 10px
				a
					display block
					width 100%
					color white
					font-weight lighter
					padding 5px 20px
					&.active
						background #1E2025
						&::before
							content ""
							position absolute
							left 0
							top 0
							height 100%
							width 5px
							background #5C9DF5
	.content
		.container
			width initial
			margin-left 25%
			transitions(all, .5s, ease-in-out)
			h1
				font-weight normal
				margin-bottom 30px
			h4
				font-weight normal
				margin 15px 0
			p
				font-weight lighter
				text-align justify
				
@media (max-width 767px)
	input[type="checkbox"]
		&:checked
			~
				.menu
					left -100% !important
				label
					span
						color inherit
						transitions(all, .5s, ease-in-out)
	label
		span
			color white
			transitions(all, .5s, ease-in-out)
	.menu
		width 100% !important
		
		
h5
	a
		color white
		position fixed
		background #3BAFDA
		font-weight normal
		width 100%
		margin 0
		padding 10px 25px
		bottom 0
		left 0
		z-index 999
		&:hover
			color white

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />