Created
July 3, 2018 06:52
Menu - #CodePenChallenge
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<nav class="menu js-menu-items-wrapper"> | |
<ol class="js-menu-items-list"> | |
<li class="menu-item js-menu-item is-active" data-morph="M 418.1,159.8 C 460.9,222.9 497,321.5 452.4,383.4 417.2,432.4 371.2,405.6 271.3,420.3 137.2,440 90.45,500.6 42.16,442.8 -9.572,381 86.33,289.1 117.7,215.5 144.3,153.4 145.7,54.21 212.7,36.25 290.3,15.36 373.9,94.6 418.1,159.8 Z"><a href="#0">Home</a></li> | |
<li class="menu-item js-menu-item" data-morph="M 402.7,215.5 C 433.9,280.4 488.1,367.2 447.7,426.8 410.1,482.2 316.7,460.2 249.7,460.6 182.8,461.1 88.08,485.5 51.26,429.5 10.29,367.3 73.19,279.4 106.9,213 141.8,144 176.6,33.65 253.9,33.7 332.2,33.75 368.8,144.9 402.7,215.5 Z"><a href="#0">About</a></li> | |
<li class="menu-item js-menu-item" data-morph="M 451.5,185.8 C 441.5,266.2 339.6,305 272.3,350.2 207.7,393.6 226.7,444.7 182.6,447.9 132.8,451.4 83.97,399.9 66.37,353.1 34.6,268.4 41.16,141.8 112,85.44 186.1,26.329999999999984 313.8,54.099999999999994 396,101.4 425.2,118.2 455.6,152.4 451.5,185.8 Z"> | |
<a href="#0">Widgets</a> | |
<ol class="sub-menu"> | |
<li class="menu-item"><a href="#0">Big Widgets</a></li> | |
<li class="menu-item"><a href="#0">Bigger Widgets</a></li> | |
<li class="menu-item"><a href="#0">Huge Widgets</a></li> | |
</ol> | |
</li> | |
<li class="menu-item js-menu-item" data-morph="M 378.1,121.2 C 408.4,150 417.2,197.9 411,245.8 404.8,293.7 383.5,341.7 353.4,370.7 303.2,419.1 198.7,427.7 144.5,383.8 86.18,336.5 67.13,221.3 111.9,161 138.6,125 188.9,99.62 240.7,90.92 292.4,82.24 345.6,90.32 378.1,121.2 Z"> | |
<a href="#0">Kabobs</a> | |
<ol class="sub-menu"> | |
<li class="menu-item"><a href="#0">Shishkabobs</a></li> | |
<li class="menu-item"><a href="#0">BBQ kabobs</a></li> | |
<li class="menu-item"><a href="#0">Summer kabobs</a></li> | |
</ol> | |
</li> | |
<li class="menu-item js-menu-item" data-morph="M 189,80.37 C 232.6,46.67 352.5,67.06 350.9,124.1 349.5,173.4 311.7,168 312.4,248.1 312.9,301.1 382.5,319.2 368.5,379.1 349.4,460.6 137.7,467.5 117.6,386.3 98.68,309.7 171.5,292.2 183.6,240.1 195.7,188.2 123.8,130.7 189,80.37 Z"><a href="#0">Contact</a></li> | |
</ol> | |
<div class="menu-shape js-shape"> | |
<svg id="circle" viewBox="0 0 500 500"> | |
<defs> | |
<linearGradient id="main-gradient" x1="0%" y1="0%" x2="100%" y2="0%"> | |
<stop offset="10%" style="stop-color:#6426CB;"/> | |
<stop offset="100%" style="stop-color:#F34EA4;"/> | |
</linearGradient> | |
</defs> | |
<path id="object" class="js-items-shape-path" fill="url(#main-gradient)" | |
d="M 418.1,159.8 C 460.9,222.9 497,321.5 452.4,383.4 417.2,432.4 371.2,405.6 271.3,420.3 137.2,440 90.45,500.6 42.16,442.8 -9.572,381 86.33,289.1 117.7,215.5 144.3,153.4 145.7,54.21 212.7,36.25 290.3,15.36 373.9,94.6 418.1,159.8 Z"></path> | |
</svg> | |
</div> | |
</nav> | |
<p class="info js-info">Please refresh your page...</p> | |
<div class="link"> | |
<a href="https://codepen.io/microfront/pens/public/" target="_blank"> <span class="fa fa-codepen"></span>my other Pens</a> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function hoverAnimation() { | |
var menuItemsShape = $(".js-shape"), | |
linksWrapper = $(".js-menu-items-wrapper"), | |
linksItems = $(".js-menu-item"), | |
activeItem = $(".js-menu-item.is-active"), | |
activeItemPosition = activeItem.position().top, | |
menuItemsShapePath = $(".js-items-shape-path"), | |
info = $(".js-info"); | |
TweenMax.set(menuItemsShape, { | |
y: activeItemPosition | |
}); | |
linksItems.on({ | |
mouseenter: function() { | |
_self = $(this); | |
var selfParent = _self.closest(linksWrapper), | |
targetCircle = selfParent.find(menuItemsShape), | |
circlePosition; | |
if ($(window).width() < 800) { | |
circlePosition = _self.position().top; | |
TweenMax.to(targetCircle, 0.6, { | |
y: circlePosition, | |
ease: Power2.easeOut | |
}); | |
} else { | |
circlePosition = _self.position().left; | |
TweenMax.to(targetCircle, 0.6, { | |
x: circlePosition, | |
ease: Power2.easeOut | |
}); | |
} | |
TweenMax.to(menuItemsShapePath, 1, { morphSVG: this.dataset.morph }); | |
} | |
}); | |
linksWrapper.on({ | |
mouseleave: function() { | |
_self = $(this); | |
var selfParent = _self.closest(linksWrapper), | |
activeLink = selfParent.find(activeItem), | |
targetCircle = selfParent.find(menuItemsShape), | |
activeLinkPosition = activeLink.position().top; | |
if ($(window).width() < 800) { | |
TweenMax.to(targetCircle, 0.6, { | |
y: activeLinkPosition, | |
ease: Power2.easeOut | |
}); | |
} else { | |
TweenMax.to(targetCircle, 0.6, { | |
x: activeLinkPosition - 32, | |
ease: Power2.easeOut | |
}); | |
} | |
TweenMax.to(menuItemsShapePath, 1, { morphSVG: menuItemsShapePath }); | |
} | |
}); | |
$(window).resize(function() { | |
info.show(); | |
}); | |
} | |
hoverAnimation(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script> | |
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
font-family: "Montserrat", sans-serif; | |
position: fixed; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
background-color: #000; | |
@media only screen and (max-width: 800px) { | |
justify-content: left; | |
padding-left:50px; | |
} | |
} | |
* { | |
outline: none; | |
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); | |
} | |
*, | |
:after, | |
:before { | |
box-sizing: border-box; | |
} | |
.menu { | |
position: relative; | |
padding: 30px 0; | |
> ol { | |
display: flex; | |
@media only screen and (max-width: 800px) { | |
display: block; | |
} | |
> .menu-item { | |
display: inline-block; | |
position: relative; | |
@media only screen and (max-width: 800px) { | |
display: block; | |
} | |
&:hover { | |
.sub-menu { | |
opacity: 1; | |
li { | |
@for $i from 1 through 3 { | |
&:nth-child(#{$i}) { | |
animation-name: subMenuAnimation; | |
animation-duration: 300ms; | |
animation-delay: (100ms * $i); | |
animation-timing-function: ease-in-out; | |
animation-fill-mode: forwards; | |
} | |
} | |
} | |
} | |
} | |
> a { | |
color: #fff; | |
text-decoration: none; | |
font-size: 2.5vw; | |
font-weight: 700; | |
letter-spacing: 1px; | |
margin: 0 25px; | |
display: block; | |
@media only screen and (max-width: 800px) { | |
margin: 30px 0; | |
font-size:30px; | |
} | |
} | |
.sub-menu { | |
padding: 28px 25px 0; | |
position: absolute; | |
left: 0; | |
opacity: 0; | |
@media only screen and (max-width: 800px) { | |
left: 100%; | |
top: -32px; | |
} | |
li { | |
opacity: 0; | |
a { | |
color: #fff; | |
text-decoration: none; | |
font-size: 1vw; | |
font-weight: 400; | |
letter-spacing: 1px; | |
margin: 12px 0; | |
display: block; | |
white-space: nowrap; | |
text-transform: uppercase; | |
transition: color 0.3s cubic-bezier(0.13, 1.07, 0.84, 1); | |
@media only screen and (max-width: 1080px) { | |
font-size:13px; | |
} | |
&:hover { | |
color: #f34ea4; | |
} | |
} | |
} | |
} | |
} | |
} | |
.menu-shape { | |
position: absolute; | |
left: -62px; | |
top: -55px; | |
z-index: -1; | |
@media only screen and (max-width: 1440px) { | |
left: -32px; | |
} | |
@media only screen and (max-width: 1180px) { | |
left: -15px; | |
top: -62px; | |
} | |
@media only screen and (max-width: 800px) { | |
left: -35px; | |
} | |
svg { | |
position: relative; | |
display: block; | |
width: 10vw; | |
height: 10vh; | |
min-height: 150px; | |
margin: 0 auto; | |
@media only screen and (max-width: 800px) { | |
width: 80px; | |
height: 80px; | |
} | |
} | |
} | |
} | |
@keyframes subMenuAnimation { | |
0% { | |
opacity: 0; | |
transform: translateX(-30px); | |
//filter: blur(5px); | |
} | |
100% { | |
opacity: 1; | |
transform: translateX(0px); | |
} | |
} | |
.info{ | |
position:absolute; | |
left:0; | |
bottom:0; | |
color:#fff; | |
text-align:center; | |
width:100%; | |
padding-bottom:30px; | |
font-size:20px; | |
display:none; | |
} | |
.link { | |
position: absolute; | |
left: 0; | |
bottom: 0; | |
padding: 20px; | |
z-index: 9999; | |
a { | |
display: flex; | |
align-items: center; | |
text-decoration: none; | |
color: #fff; | |
} | |
.fa { | |
font-size: 28px; | |
margin-right: 8px; | |
color: #fff; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment