<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="frame">
<div class="center">
<div class="menu-bar inactive">
<div class="line-top"></div>
<div class="yoda"></div>
<div class="line-bottom"></div>
<div class="vader"></div>
</div>
<div class="menu-items">
<ul>
<li>Live</li>
<li>Work</li>
<li>Create</li>
<li>Deploy</li>
</ul>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
background: #ad5389;
/* fallback for old browsers */
/* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #3c1053, #ad5389);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
color: #333;
font-family: 'Open Sans', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.center {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.menu-bar {
position: absolute;
width: 50px;
height: 25px;
top: -25px;
left: -25px;
cursor: pointer;
}
.menu-bar .line-top {
position: absolute;
width: 50px;
height: 10px;
background: #ddd;
}
.menu-bar .yoda {
position: absolute;
width: 0px;
height: 8px;
top: -19px;
left: -50px;
border-radius: 25px;
background: lime;
-webkit-filter: blur(1px);
filter: blur(1px);
transition: all 1s ease-out;
}
.menu-bar .line-bottom {
position: absolute;
width: 50px;
height: 10px;
top: initial;
bottom: 0;
background: #ddd;
}
.menu-bar .vader {
position: absolute;
width: 0px;
height: 8px;
top: 36px;
right: -49px;
border-radius: 25px;
background: #FF1744;
-webkit-filter: blur(1px);
filter: blur(1px);
transition: all 1s ease-out;
}
.menu-bar.active {
pointer-events: all;
}
.menu-bar.active .line-top {
-webkit-animation: line-top-open 3s ease both;
animation: line-top-open 3s ease both;
}
.menu-bar.active .yoda {
-webkit-animation: lightsaber-open .8s ease-in 3s both;
animation: lightsaber-open .8s ease-in 3s both;
}
.menu-bar.active .line-bottom {
-webkit-animation: line-bottom-open 3s ease both;
animation: line-bottom-open 3s ease both;
}
.menu-bar.active .vader {
-webkit-animation: lightsaber-open .8s ease-in 3s both;
animation: lightsaber-open .8s ease-in 3s both;
}
.menu-bar.inactive {
pointer-events: all;
}
.menu-bar.inactive .line-top {
-webkit-animation: line-top-close 3s ease 1s both;
animation: line-top-close 3s ease 1s both;
}
.menu-bar.inactive .yoda {
-webkit-animation: lightsaber-close .5s ease;
animation: lightsaber-close .5s ease;
}
.menu-bar.inactive .line-bottom {
-webkit-animation: line-bottom-close 3s ease 1s both;
animation: line-bottom-close 3s ease 1s both;
}
.menu-bar.inactive .vader {
-webkit-animation: lightsaber-close .5s ease;
animation: lightsaber-close .5s ease;
}
.menu-items {
position: absolute;
width: 300px;
height: 20px;
top: -30px;
left: -170px;
padding: 5px 10px;
opacity: 0;
pointer-events: none;
transition: all 2s ease-in-out;
}
.menu-items.active {
opacity: 1;
pointer-events: all;
transition: all 2s ease-in 2s;
}
.menu-items ul {
list-style: none;
line-height: 20px;
font-weight: 600;
color: #fff;
text-transform: uppercase;
width: 280px;
display: flex;
justify-content: space-between;
align-items: center;
}
.menu-items ul li {
position: relative;
display: block;
flex: 0 1 auto;
cursor: pointer;
transition: all .5s ease-in;
}
.menu-items ul li:hover {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
@-webkit-keyframes line-top-open {
0% {
-webkit-transform: translateY(0px) translateX(0px);
transform: translateY(0px) translateX(0px);
}
20% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
-webkit-transform: translateX(-100px) translateY(-20px);
transform: translateX(-100px) translateY(-20px);
}
}
@keyframes line-top-open {
0% {
-webkit-transform: translateY(0px) translateX(0px);
transform: translateY(0px) translateX(0px);
}
20% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
-webkit-transform: translateX(-100px) translateY(-20px);
transform: translateX(-100px) translateY(-20px);
}
}
@-webkit-keyframes line-top-close {
0% {
-webkit-transform: translateX(-100px) translateY(-20px);
transform: translateX(-100px) translateY(-20px);
}
20% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
-webkit-transform: translateX(0px) translateY(0px);
transform: translateX(0px) translateY(0px);
}
}
@keyframes line-top-close {
0% {
-webkit-transform: translateX(-100px) translateY(-20px);
transform: translateX(-100px) translateY(-20px);
}
20% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
}
100% {
-webkit-transform: translateX(0px) translateY(0px);
transform: translateX(0px) translateY(0px);
}
}
@-webkit-keyframes line-bottom-open {
0% {
-webkit-transform: translateY(0px) translateX(0px);
transform: translateY(0px) translateX(0px);
}
20% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
-webkit-transform: translateX(100px) translateY(20px);
transform: translateX(100px) translateY(20px);
}
}
@keyframes line-bottom-open {
0% {
-webkit-transform: translateY(0px) translateX(0px);
transform: translateY(0px) translateX(0px);
}
20% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
-webkit-transform: translateX(100px) translateY(20px);
transform: translateX(100px) translateY(20px);
}
}
@-webkit-keyframes line-bottom-close {
0% {
-webkit-transform: translateX(100px) translateY(20px);
transform: translateX(100px) translateY(20px);
}
20% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
-webkit-transform: translateX(0px) translateY(0px);
transform: translateX(0px) translateY(0px);
}
}
@keyframes line-bottom-close {
0% {
-webkit-transform: translateX(100px) translateY(20px);
transform: translateX(100px) translateY(20px);
}
20% {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
-webkit-transform: translateX(0px) translateY(0px);
transform: translateX(0px) translateY(0px);
}
}
@-webkit-keyframes lightsaber-open {
0% {
width: 0px;
}
100% {
width: 202px;
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.7);
}
}
@keyframes lightsaber-open {
0% {
width: 0px;
}
100% {
width: 202px;
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.7);
}
}
@-webkit-keyframes lightsaber-close {
0% {
width: 202px;
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.7);
}
100% {
width: 0px;
}
}
@keyframes lightsaber-close {
0% {
width: 202px;
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.7);
}
100% {
width: 0px;
}
}
// jQuery v3.3.1 is supported
lightsaber = document.querySelector('.menu-bar');
menu = document.querySelector('.menu-items');
lightsaber.addEventListener('click', function() {
setTimeout(lightsaberToggle,200);
menuToggle();
})
menu.addEventListener('click', function() {
setTimeout(lightsaberToggle,200);
menuToggle();
})
function lightsaberToggle() {
if(lightsaber.classList.contains('inactive') === true) {
lightsaber.classList.remove('inactive');
lightsaber.classList.add('active');
} else {
lightsaber.classList.remove('active');
lightsaber.classList.add('inactive');
}
}
function menuToggle() {
// if(!menu.classList.contains('active')) {
// menu.classList.add('active');
// } else {
// menu.classList.remove('active');
// }
menu.classList.toggle('active');
}
