A concept I came up with for a navigation that you can pull out.
A Pen by Lewi Hussey on CodePen.
<nav class="navigation"> | |
<ul> | |
<li> | |
<a href="#">home</a> | |
</li> | |
<li> | |
<a href="#">opening hours</a> | |
</li> | |
<li> | |
<a href="#">menu</a> | |
</li> | |
<li> | |
<a href="#">reserve a table</a> | |
</li> | |
</ul> | |
<button class="close-btn" data-close></button> | |
</nav> | |
<h1>hold</h1> | |
<footer> | |
by <a href="http://twitter.com/lewitje" target="_blank">@lewitje</a> | |
</footer> |
/* | |
This is my concept for a drag to open navigation, I thought it was quite a simple, fun idea. | |
Have fun with it! | |
@lewitje on Twitter | |
*/ | |
var navigation = (function(){ | |
var navigationTimer; | |
var dragXStartPos = 0; | |
var dragYStartPos = 0; | |
var currentXPos = 0; | |
var currentYPos = 0; | |
var isNavOpen = false; | |
function init(){ | |
$('body').on('mousedown', function(e){ | |
if(!isNavOpen){ | |
setTimer(function(){ | |
$('body').off('mouseup'); | |
addCircle(e); | |
$('body').on('mouseup', function(){ | |
destroyCircle(); | |
}); | |
$('body').on('mousemove', function(e){ | |
calculateCircleSize(e, function(x){ | |
adjustCircleSize(x); | |
}); | |
}); | |
}); | |
$('body').on('mouseup', function(){ | |
clearTimer(); | |
$('body').off('mouseup'); | |
}); | |
} | |
}); | |
$('[data-close]').on('click', function(){ | |
console.log('click'); | |
closeNavigation(); | |
}); | |
} | |
function setTimer(callback){ | |
console.log('timer waiting'); | |
navigationTimer = setTimeout(function(){ | |
console.log('timer set'); | |
callback(); | |
}, 250); | |
} | |
function clearTimer(){ | |
console.log('timer cleared'); | |
clearTimeout(navigationTimer); | |
} | |
function destroyCircle(){ | |
$('body').off('mousemove mouseup'); | |
$('.circle-outer').remove(); | |
} | |
function addCircle(e){ | |
console.log('created circle'); | |
dragXStartPos = e.clientX; | |
dragYStartPos = e.clientY; | |
$('body').append( | |
'<div class="circle-outer" style="top:' + | |
dragYStartPos + | |
'px; left:' + | |
dragXStartPos + | |
'px">' + | |
'<div class="circle-inner"></div></div>' + | |
'</div>' | |
); | |
} | |
function calculateCircleSize(e, callback){ | |
currentXPos = e.clientX; | |
currentYPos = e.clientY; | |
var newCircleSize = 0; | |
var XDistance = Math.abs(currentXPos - dragXStartPos) * 2; | |
var YDistance = Math.abs(currentYPos - dragYStartPos) * 2; | |
(XDistance > YDistance) ? newCircleSize = XDistance : newCircleSize = YDistance; | |
if (newCircleSize >= 400){ | |
showNavigation(); | |
destroyCircle(); | |
}; | |
callback(newCircleSize); | |
} | |
function adjustCircleSize(x){ | |
$('.circle-inner').css({ | |
'width': x + 'px', | |
'height': x + 'px' | |
}); | |
} | |
function showNavigation(){ | |
isNavOpen = true; | |
$('body').append( | |
'<div class="navigation-circle" style="top:' + | |
dragYStartPos + | |
'px; left:' + | |
dragXStartPos + | |
'px;"></div>' | |
); | |
$('.navigation').addClass('open'); | |
} | |
function closeNavigation(){ | |
console.log('close nav'); | |
isNavOpen = false; | |
$('.navigation-circle').remove(); | |
$('.navigation').removeClass('open'); | |
} | |
return{ | |
init: init | |
}; | |
}()); | |
navigation.init(); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> |
@import url(https://fonts.googleapis.com/css?family=Lato:300); | |
$blue: rgb(50, 180, 250); | |
$green: rgb(50, 220, 200); | |
*, | |
*:before, | |
*:after { | |
box-sizing: border-box; | |
margin: 0; | |
padding: 0; | |
} | |
body { | |
background-color: $green; | |
font-family: 'Lato', sans-serif; | |
height: 100vh; | |
user-select: none; | |
} | |
h1{ | |
position: fixed; | |
top: calc(50% - 20px); | |
font-size: 40px; | |
line-height: 40px; | |
width: 100%; | |
text-align: center; | |
opacity: .15; | |
} | |
footer{ | |
position: fixed; | |
bottom: 0; | |
left: 0; | |
width: 100%; | |
padding: 20px; | |
text-align: center; | |
z-index: 10; | |
a{ | |
color: black; | |
text-decoration: none; | |
} | |
} | |
.circle-outer { | |
position: fixed; | |
width: 0; | |
height: 0; | |
background-color: rgba(0, 0, 0, .05); | |
transform: translate(-50%, -50%); | |
border-radius: 50%; | |
animation: grow-outer-circle .5s cubic-bezier(.1, 1.5, .3, 1) forwards; | |
overflow: hidden; | |
.circle-inner { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
width: 0; | |
height: 0; | |
border-radius: 50%; | |
background-color: $blue; | |
transform: translate(-50%, -50%); | |
} | |
} | |
.navigation-circle { | |
position: fixed; | |
width: 400px; | |
height: 400px; | |
border-radius: 50%; | |
background-color: rgba(0, 0, 0, .2); | |
transform: translate(-50%, -50%); | |
animation: grow-navigation .4s linear forwards; | |
} | |
.navigation { | |
position: fixed; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background-color: $blue; | |
display: flex; | |
align-items: center; | |
z-index: 8; | |
top: -150vh; | |
transition: top 0s .5s; | |
user-select: none; | |
>ul { | |
width: 60vw; | |
text-align: center; | |
user-select: none; | |
margin: 0 auto; | |
display: block; | |
>li { | |
display: block; | |
user-select: none; | |
text-align: left; | |
opacity: 0; | |
transform: translateY(20px); | |
transition: all 1s; | |
&:nth-child(1) { | |
transition-delay: .5s; | |
} | |
&:nth-child(2) { | |
transition-delay: .6s; | |
} | |
&:nth-child(3) { | |
transition-delay: .7s; | |
} | |
&:nth-child(4) { | |
transition-delay: .8s; | |
} | |
a { | |
display: inline-block; | |
color: white; | |
padding: 10px 0 10px 0; | |
margin-bottom: 5px; | |
user-select: none; | |
font-size: 30px; | |
border-bottom: 1px solid transparent; | |
text-decoration: none; | |
transition: all .2s; | |
&:hover { | |
border-color: white; | |
} | |
} | |
} | |
} | |
.close-btn { | |
background-color: transparent; | |
opacity: 0; | |
position: absolute; | |
appearance: none; | |
box-shadow: none; | |
outline: 0; | |
top: calc(50% - 20px); | |
right: 20vw; | |
width: 40px; | |
height: 40px; | |
border: 1px solid white; | |
border-radius: 50%; | |
transition: transform .4s .6s, opacity .4s .6s, background-color .25s 0s; | |
cursor: pointer; | |
&:before, | |
&:after{ | |
position: absolute; | |
content: ""; | |
width: 20px; | |
height: 1px; | |
top: 19px; | |
left: 9px; | |
background-color: white; | |
transition: all .25s; | |
} | |
&:before{ | |
transform: rotate(45deg); | |
} | |
&:after{ | |
transform: rotate(-45deg); | |
} | |
&:hover{ | |
background-color: white; | |
&:before, | |
&:after{ | |
background-color: $blue; | |
} | |
} | |
} | |
&.open { | |
transition: top 0s .5s; | |
top: 0; | |
> ul > li { | |
opacity: 1; | |
transform: translateY(0); | |
} | |
.close-btn { | |
opacity: 1; | |
} | |
} | |
} | |
@keyframes grow-outer-circle{ | |
0%{ | |
width: 0; | |
height: 0; | |
} | |
100%{ | |
width: 400px; | |
height: 400px; | |
} | |
} | |
@keyframes grow-navigation{ | |
0%{ | |
width: 400px; | |
height: 400px; | |
background-color: rgba(0, 0, 0, .2); | |
} | |
100%{ | |
width: 6000px; | |
height: 6000px; | |
background-color: $blue; | |
} | |
} |