<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="menu_btn" role="button"><a href="#" title="open menu">Menu</a></div>
<nav class="navigation" role="navigation">
<div class="panel panel--left">
<ul class="menu">
<li><a href="#" title="drinks"><span class="litem">Drinks</span></a>
<i class="line"></i>
</li>
<li><a href="#" title="food"><span class="litem">food</span></a>
<ul class="sub-menu">
<li><a href="#" title="Breakfast"><span class="litem">Breakfast</span></a></li>
<li><a href="#" title="Lunch"><span class="litem">Lunch</span></a></li>
<li><a href="#" title="Dinner"><span class="litem">Dinner</span></a></li>
</ul>
<i class="line"></i>
</li>
<li><a href="#" title="events"><span class="litem">events</span></a>
<i class="line"></i>
</li>
</ul>
<footer class="footer">
<span class="footer__gredits">developed by <a href="#" title="">Lynn</a></span>
<span class="footer__social"><a href="#" title="facebook">facebook</a> - <a href="#" title="instagram">instagram</a></span>
</footer>
</div>
<div class="panel panel--right">
<div class="close_btn"><a href="#">close</a></div>
<div class="data">
<div class="data__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas egestas, nulla id tincidunt dignissim, magna magna imperdiet metus</div>
<div class="data__sub">"Nvagelis"</div>
</div>
</div>
</nav>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
body {
line-height: 1.4;
background-color: #292a2e;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.menu_btn {
position: relative;
visibility: visible;
opacity: 1;
z-index: 20;
}
.menu_btn a {
font-size: 2em;
padding: 20px 15px;
display: inline-block;
letter-spacing: 3px;
transition: color ease-in-out 0.4s;
color: #fff;
}
.menu_btn a:hover, .menu_btn a:focus, .menu_btn a:focus-within {
color: tomato;
}
nav {
display: block;
}
.panel {
position: absolute;
top: 0;
width: 0;
height: 100%;
overflow: hidden;
width: 0%;
}
.panel--left {
display: flex;
flex-direction: column;
align-items: center;
background-color: #292b2f;
right: 50%;
}
.panel--right {
display: flex;
align-items: center;
justify-content: center;
background-color: #2f3135;
right: 0;
}
.line {
display: block;
position: absolute;
left: 0;
top: 1em;
width: 28px;
height: 1px;
background: rgba(130, 130, 130, 0.6);
opacity: 0;
}
.navigation ul li,
.navigation ul li a,
.navigation ul li a span {
position: relative;
display: block;
}
.navigation {
width: 100%;
height: 100%;
position: fixed;
top: 0;
z-index: 10;
}
.navigation .menu {
display: flex;
flex: 8;
flex-direction: column;
justify-content: center;
text-align: left;
transform: translate(-100%, 0);
}
.navigation .menu > li {
font-size: 20px;
padding: 0.4em 0 0.4em 42px;
margin: 0.2em 0;
text-align: left;
float: left;
clear: both;
}
.navigation .menu > li > a {
color: #fff;
text-decoration: none;
overflow: hidden;
transition: color ease-in-out 0.4s;
}
.navigation .menu > li > a:hover, .navigation .menu > li > a:focus, .navigation .menu > li > a:focus-within {
color: tomato;
}
.navigation .menu > li > a > span {
top: 0;
text-transform: capitalize;
}
.navigation .sub-menu > li {
display: block;
float: left;
clear: both;
line-height: 30px;
font-size: 14px;
padding: 0;
margin: 0;
}
.navigation .sub-menu > li > a {
color: #828282;
text-transform: none;
overflow: hidden;
transition: color ease-in-out 0.4s;
}
.navigation .sub-menu > li > a:hover, .navigation .sub-menu > li > a:focus, .navigation .sub-menu > li > a:focus-within {
color: tomato;
}
.litem {
transform: translate(0, -100%);
}
.footer {
display: flex;
align-items: center;
flex-direction: row;
justify-content: space-between;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: 32px 70px;
opacity: 0;
font-size: 12px;
}
.footer__gredits, .footer__social {
display: block;
color: #828282;
}
.footer__gredits > a, .footer__social > a {
color: #828282;
margin: 0 5px;
text-decoration: none;
transition: color ease-in-out 0.4s;
}
.footer__gredits > a:hover, .footer__gredits > a:focus, .footer__gredits > a:focus-within, .footer__social > a:hover, .footer__social > a:focus, .footer__social > a:focus-within {
color: tomato;
}
.close_btn {
position: absolute;
top: 10px;
right: 10px;
}
.close_btn a {
font-size: 1em;
padding: 20px 15px;
display: inline-block;
letter-spacing: 3px;
transition: color ease-in-out 0.4s;
color: #fff;
}
.close_btn a:hover, .close_btn a:focus, .close_btn a:focus-within {
color: tomato;
}
.data {
padding: 0 20%;
}
.data__content {
color: #828282;
text-align: justify;
opacity: 0;
transform: translate(0, 50px);
}
@media (max-width: 680px) {
.data__content {
font-size: 16px;
font-size: 1em;
font-size: 1rem;
line-height: 18px;
}
}
.data__sub {
color: #fff;
float: left;
margin-top: 2%;
font-size: 11px;
opacity: 0;
transform: translate(0, 50px);
}
$(document).ready(function (){
var open_btn = $('.menu_btn');
var close_btn = $('.close_btn');
var panels = $('.panel');
var links = $('.litem');
var lines = $('.line');
var data_content = $('.data__content');
var data_sub = $('.data__sub');
var footer = $('.footer');
var tl = new TimelineLite({paused:true});
tl.to(panels, 0.5, {width: '50%'})
.to(open_btn, 0.5, {opacity: 0, visibility: 'hidden', 'z-index':0}, "-=0.5")
.to(data_content, 0.5, {y:0, opacity: 1})
.to(data_sub, 0.5, {y:0, opacity: 1}, "-=0.25")
.staggerTo(links, 0.3, {y:0}, 0.05, "-=0.75")
.to(lines, 0.5, {opacity: 1})
.to(footer, 0.5, {opacity: 1}, "-=0.5");
open_btn.on('click', function (e){
e.preventDefault();
tl.play();
});
close_btn.on('click', function (e){
e.preventDefault();
tl.reverse();
});
});
