Bouncy floating menu

bouncy-floating-menu.markdown

Bouncy floating menu

Pen inspired on https://codepen.io/dhanishgajjar/pen/NyeqvL by @dhanishgajjar

A Pen by Luis Adame on CodePen.

License.

index.pug

.container
	input(type="checkbox" id="toggle")
	.menu__toggle
		label(for="toggle" class="menu__button")
			.menu__bar
			.menu__bar
			.menu__bar
	.menu
		.menu__item
			i.fa.fa-share
		.menu__item
			i.fa.fa-star
		.menu__item
			i.fa.fa-pen-square

style.scss

body {
	height: 100vh;
	background: radial-gradient(at 0 0, #323232, #101010);
	display: flex;
	align-items: center;
	justify-content: center;
}


.container {
	width: 45vmin; height: 80vmin;
	background: white;
	position: relative;
}

@mixin bubble() {
	color: white;
	padding: 1em;
	width: $d;
	height: $d;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

#toggle {
	position: absolute;
	opacity: 0;
	visibility: hidden;
	
	&:checked + .menu__toggle > .menu__button {
		.menu__bar:nth-child(1) {			
			transform: rotate(45deg) translate3d(2px, -4px, 0);
		}
		.menu__bar:nth-child(2) {
			transform: translate3d(-10px, 0, 0);
			opacity: 0;
		}
		.menu__bar:nth-child(3) {			
			transform: rotate(-45deg) translate3d(1px, 4px, 0);
		}
	}
	
	&:checked ~ .menu .menu__item {
		&:nth-child(1) {
			transition: all 250ms cubic-bezier(.04,.76,.67,1.2);
			transform: translate3d(0, -5em, 0);
		}
		&:nth-child(2) {
			transition: all 250ms 100ms cubic-bezier(.04,.76,.67,1.2);
			transform: translate3d(-3.5em, -3.5em, 0);
		}
		&:nth-child(3) {
			transition: all 250ms 200ms cubic-bezier(.04,.76,.67,1.2);
			transform: translate3d(-5em, 0, 0);
		}
	}
}
$md: 25px;
.menu__button {
	--d: 25px;		
	width: var(--d);
	height: var(--d);
	background: crimson;
	border-radius: 50%;
	position: absolute;
	bottom: calc(#{$md} / 2);
	right: calc(#{$md} / 2);
	padding: 1em;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	cursor: pointer;
	transition: all 100ms ease;
	z-index: 2;
	&:hover {
		--d: 30px;
		bottom: calc((#{$md} / 2) - 2.5px);
		right: calc((#{$md} / 2) - 2.5px);
	}
	
	// Bars
	.menu__bar {
		height: 3px;
		width: 100%;
		background: #fff;
		border-radius: 5px;
		transition: all 200ms ease;
		transform-origin: left center;
	}
}

$d: 20px;

.menu {
	width: 50px; height: 50px;
	position: absolute;
	bottom: calc(35px / 2);
	right: calc(35px / 2);
	z-index: 1;
}
.menu__item {
	@include bubble();
	position: absolute;
	transition: all 250ms;
	//opacity: 0;
	&:nth-child(1) {
		background: #a639c8;
	}
	&:nth-child(2) {
		background: #5e45c1;
	}
	&:nth-child(3) {
		background: #6f006c;
	}
}

styles

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet" />