Pully navigation concept

index.html

<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>

Pully navigation concept.markdown

Pully navigation concept

A concept I came up with for a navigation that you can pull out.

A Pen by Lewi Hussey on CodePen.

License.

script.js

/*

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();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

style.scss

@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;
	}
}