Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
VLrwGp
.menu
span.menuTitle menu
ul
li
a(href="#") shows
li
a(href="#") media
li
a(href="#") about
li
a(href="#") merch
var $menu = $('.menu');
var $menuUl = $('.menu ul');
var $menuTitle = $('.menuTitle');
var count = 0;
$menu.click(function(){
count++;
if (count%2 == 1) {
var tl = new TimelineLite();
tl.to($menu, 0.5, {css:{
width: 750,
background: "transparent",
borderRadius: 0,
borderTop: "1px solid #D8D8D8"
}, ease:Expo.easeInOut})
tl.to($menuTitle, 0.25, {x:0, y:-130, color:"#fff"});
setTimeout(function(){
$menuUl.fadeIn(250);
}, 200);
} else {
$(this).css({borderRadius: "100%"})
TweenMax.set($menu, {clearProps:"all"});
TweenMax.set($menuTitle, {clearProps:"all"});
$menuUl.hide();
};
})
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.1/TweenMax.min.js"></script>
@import url(http://fonts.googleapis.com/css?family=Inconsolata:400,700);
$white: #D8D8D8;
$cubic: cubic-bezier(.55,0,.1,1);
body {
background: #000;
color: $white;
}
* {
& li {
list-style: none;
}
& a {
text-decoration: none;
color: $white
}
}
.menu {
width: 150px;
height: 150px;
display: block;
position: relative;
margin: 150px auto;
background: $white;
border-radius: 100%;
border: 1px solid $white;
cursor: pointer;
& ul {
padding: 0;
width: 100%;
display: none;
position: relative;
text-align: center;
top: -120px;
& li {
display: inline-block;
position: relative;
font-family: Inconsolata;
font-size: 25px;
margin-right: 25px;
box-sizing: border-box;
width: 125px;
letter-spacing: 3px;
text-align: center;
line-height: 50px;
&:last-child {
margin-right: 0;
}&:hover {
background: $white;
& a {
color: #000;
}
}
}
}
.menuTitle {
line-height: 150px;
color: #000;
text-transform: uppercase;
font-size: 40px;
width: 100%;
text-align: center;
letter-spacing: 8px;
display: block;
padding-left: 5px;
font-family: Inconsolata;
-webkit-user-select: none;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment