Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Pure CSS3 Parallax Menu
<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

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.

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment