Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Star Wars Menu Icon
<div id="container">
<div id="burger">
<div class="bun top"></div>
<div class="filling"></div>
<div class="bun bottom"></div>
</div>
</div>
<nav>
<ul>
<li>
<a href="#">Home</a>
</li>
<li class="green">
<a href="#">Jedi</a>
</li>
<li class="red">
<a href="#">Sith</a>
</li>
<li class="yellow">
<a href="#">Sentinel</a>
</li>
<li class="purple">
<a href="#">Samuel L. Jackson</a>
</li>
</ul>
</nav>
$("#burger").click(function() {
$(this).toggleClass("active");
$("nav").toggleClass("show");
});
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Star Wars Menu Icon

A tad different from the one from the official website, although heavily inspired by it. I just didn't like how one of the light sabers disappeared

A Pen by Adam Dorling on CodePen.

License.

$icon-size:80px;
$w: 300px;
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@mixin lightsaber($color){
background:mix($color,#fff,10%);
box-shadow:$color 0px 0px 0px 2px;
&:hover {
box-shadow:$color 0px 0px 20px 2px;
text-shadow:$color 0px 0px 6px,$color 0px 0px 10px;
}
}
html, body {
background:#222;
}
* {
box-sizing:border-box;
}
#container {
width: $icon-size;
height:$icon-size;
position:absolute;
top:0%;
left:0%;
}
#burger {
cursor:pointer;
opacity:0;
animation:fadein 0.2s ease 1s forwards;
overflow:hidden;
position:relative;
width:100%;
height:100%;
%burgersection {
display:block;
position:absolute;
left:50%;
transform:translate(-50%,-50%) rotate(0deg);
height:10%;
width:70%;
transform-origin:50% 50%;
transition: top 0.4s ease 0.4s,
transform 0.4s ease 0.4s;
&:before, &:after {
content:"";
display:block;
height:40%;
background:white;
position:absolute;
top:50%;
transform:translate(0%,-45%);
transition:background 0.2s ease,
box-shadow 0.2s ease;
}
&:before {
left:0;
width:calc(-1px + 75%);
border-radius:10px 0px 0px 10px;
}
&:after {
right:0;
width:calc(-1px + 25%);
}
}
&:hover {
.bun {
&.top:before {
background:#FEE;
box-shadow:#F00 0px 0px 10px 1px;
}
&.bottom:before {
background:#DFF;
box-shadow:#0FF 0px 0px 10px 1px;
}
}
.filling {
&:before {
background:#EFE;
box-shadow:#0F0 0px 0px 10px 1px;
}
}
}
.bun {
@extend %burgersection;
&.top {
top:25%;
}
&.bottom {
top:75%;
}
}
.filling {
@extend %burgersection;
top:50%;
transform:translate(-50%,-50%) rotate(180deg);
animation:green-ls-out 0.8s ease forwards;
}
&.active {
.bun {
border-radius: 3px;
top:50%;
transition: top 0.4s ease,
transform 0.4s ease;
&.top {
transform:translate(-50%,-50%) rotate(-225deg);
}
&.bottom {
transform:translate(-50%,-50%) rotate(405deg);
}
}
.filling {
transform: translate(-50%,-50%) rotate(-90deg);
animation:green-ls-in 0.8s ease forwards;
}
}
}
nav {
&.show {
transform:translatex(0%);
}
font-family:Open Sans;
color:white;
background:#111;
position:absolute;
transform:translatex(-100%);
transition:transform 0.2s ease;
top:$icon-size;
bottom:0px;
padding-right:16px;
width:$w;
ul {
list-style:none;
padding:0;
margin:0;
//font-weight:bolder;
li {
@include lightsaber(#4df);
font-size:1.75em;
line-height:1.25em;
padding:0px;
padding-left:0px;
margin:16px 0px;
width:0;
border-radius:0px 100px 100px 0px;
transition:width 0.2s ease,
padding 0.2s ease,
color 0.2s ease,
text-shadow 0.2s ease;
&:hover {
width:100%;
padding:0px 16px 0px 0px;
color:black;
}
a {
display:block;
text-decoration:none;
width:$w;
color:inherit;
padding-left:16px;
}
&.green {
@include lightsaber(#0F0);
}
&.red {
@include lightsaber(#F00);
}
&.purple {
@include lightsaber(#c0c);
}
&.yellow {
@include lightsaber(#FF0);
}
}
}
}
@keyframes green-ls-in {
0% {
transform: translate(-50%,-50%) rotate(180deg); }
50% {
transform: translate(-50%,-50%) rotate(-90deg); }
100% {
transform: translate(-50%,-50%) rotate(-90deg) translate(200%,0%);}
}
@keyframes green-ls-out {
0% {
transform: translate(-50%,-200%) rotate(-90deg);}
50% {
transform: translate(-50%,-50%) rotate(-90deg); }
100% {
transform: translate(-50%,-50%) rotate(180deg); }
}
@keyframes fadein {
from {
Opacity:0;
}
to {
Opacity:1;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.