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.
<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--> |
.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 |
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |