Check out This Cool Pure CSS3 Parallax Menu. Designed by Bryce Snyder.
Pure CSS3 Parallax Menu
HTML
[code language=”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="https://www.codepen.io/brycesnyder" target="_blank">CHECK OUT MY OTHER PENS</a></h5>
</div><!–/.container–>
</div><!–/.content–>
</div><!–/.parallax–>
[/code]
CSS / Stylus
[code language=”css”]
.parallax
input[type="checkbox"]
&:checked
~
label
span
&::after
content "\e236"
color inherit
transition all 0.3s cubic-bezier(.25,.8,.25,1)
.menu
left -25%
.content
.container
margin-left 0
label
position absolute
top 20px
right 20px
left inherit
z-index 999
span
&::after
transition all 0.3s cubic-bezier(.25,.8,.25,1)
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
transition all 0.3s cubic-bezier(.25,.8,.25,1)
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%
transition all 0.3s cubic-bezier(.25,.8,.25,1)
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
transition all 0.3s cubic-bezier(.25,.8,.25,1)
label
span
color white
transition all 0.3s cubic-bezier(.25,.8,.25,1)
.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
[/code]
