Gooey Menu - CSS Only

gooey-menu-css-only.markdown

Gooey Menu - CSS Only

Gooey Menu animation is done purely with css.

The inspiration comes from Soheil's post on Material Up called "Material In a Liquid State".

A Pen by Matthew Sechrest on CodePen.

License.

index.html

<div class="container-fluid">
	<div class="row">
		<div class="col-xs-12">
			<div class="ms-nav-container">
				<ul class="ms-nav">
					<input type="checkbox" id="ms-menu" class="ms-menu-toggle" name="ms-menu-toggle" />
					<div class="bg-change"></div>
					<li class="ms-li ms-li3 ms-li-last">
						<a href="javascript:void(0)">
							<span class="fa fa-search"></span>
						</a>
					</li>
					<li class="ms-li ms-li2">
						<a href="javascript:void(0)">
							<span class="fa fa-flask"></span>
						</a>
					</li>
					<li class="ms-li ms-li1 ms-li-first">
						<a href="javascript:void(0)">
							<span class="fa fa-fort-awesome"></span>
						</a>
					</li>
					<li class="ms-main">
						<a href="javascript:void(0)">
							<label class="ms-menu-toggle-lbl" for="ms-menu">
								<span class="fa fa-plus"></span>
							</label>
						</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</div>

style.css

body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	background: #29313e;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
a {
	outline: none !important;
}
.ms-nav-container {
	position: relative;
	width: 100%;
	height: 100vh;
}
#ms-menu {
	display: none;
}
.bg-change {
	position: absolute;
	bottom: -75px;
	right: -90px;
	width: 1px;
	height: 1px;
	border-radius: 100% 0% 0% 0%;
	background: #2D394D;
	transition: all .25s ease;
}
.ms-nav .ms-menu-toggle:checked ~ .bg-change {
	width: 3000px;
	height: 3000px;
	transition: all .5s ease;
}
.ms-nav {
	position: absolute;
	bottom: 75px;
	right: 75px;
}
.ms-nav > .ms-main {
	position: relative;
}

.ms-nav > .ms-li {
	position: absolute;
	bottom: 0;
	right: 8px;
	transition: bottom .5s ease;
	z-index: 1;
}
.ms-nav .ms-menu-toggle:checked ~ .ms-li a {
	box-shadow: 0px 5px 10px #333333;
}
	.ms-nav .ms-menu-toggle:checked ~ .ms-li1 {
		bottom: 150%;
		transition: bottom .5s ease;
	}
	.ms-nav .ms-menu-toggle:checked ~ .ms-li1 a span {
		opacity: 1;
		transition: opacity .5s ease .1s;
	}
		.ms-nav .ms-menu-toggle:checked ~ .ms-main:after {
			animation: big-border-bottom-animation .5s ease .1s;
		}
		.ms-nav .ms-menu-toggle:checked ~ .ms-li1:before {
			animation: border-top-animation .5s ease .2s;
		}
		.ms-nav .ms-menu-toggle:checked ~ .ms-li1:after {
			animation: border-bottom-animation .5s ease .2s;
		}
	.ms-nav .ms-menu-toggle:checked ~ .ms-li2 {
		bottom: 265%;
		transition: bottom .6s ease;
	}
	.ms-nav .ms-menu-toggle:checked ~ .ms-li2 a span {
		opacity: 1;
		transition: opacity .6s ease .2s;
	}
		.ms-nav .ms-menu-toggle:checked ~ .ms-li2:before {
			animation: border-top-animation .5s ease .2s;
		}
		.ms-nav .ms-menu-toggle:checked ~ .ms-li2:after {
			animation: border-bottom-animation .5s ease .3s;
		}
	.ms-nav .ms-menu-toggle:checked ~ .ms-li3 {
		bottom: 380%;
		transition: bottom .7s ease;
	}
	.ms-nav .ms-menu-toggle:checked ~ .ms-li3 a span {
		opacity: 1;
		transition: opacity .7s ease .3s;
	}
		.ms-nav .ms-menu-toggle:checked ~ .ms-li3:before {
			animation: border-top-animation .5s ease .3s;
		}
		.ms-nav .ms-menu-toggle:checked ~ .ms-li3:after {
			animation: border-bottom-animation .5s ease .4s;
		}
	.ms-nav .ms-menu-toggle:checked ~ .ms-li4 {
		bottom: 495%;
		transition: bottom .8s ease;
	}
	.ms-nav .ms-menu-toggle:checked ~ .ms-li4 a span {
		opacity: 1;
		transition: opacity .8s ease .4s;
	}
		.ms-nav .ms-menu-toggle:checked ~ .ms-li4:before {
			animation: border-top-animation .5s ease .4s;
		}
	
		.ms-nav .ms-menu-toggle ~ .ms-li:before {
			content: '';
			width: 45px;
			display: block;
			position: absolute;
			bottom: -5px;
			left: 0;
			right: 0;
			margin: auto;
			border-left: 20px solid transparent;
			border-right: 20px solid transparent;
			border-top: 0px solid #337ab7;
		}
		.ms-nav .ms-menu-toggle ~ .ms-li:before {
			content: '';
			width: 45px;
			display: block;
			position: absolute;
			bottom: -5px;
			left: 0;
			right: 0;
			margin: auto;
			border-left: 20px solid transparent;
			border-right: 20px solid transparent;
			border-top: 0px solid #337ab7;
		}
		.ms-nav .ms-menu-toggle:checked ~ .ms-li:before {
			content: '';
			width: 45px;
			display: block;
			position: absolute;
			bottom: 0px;
			left: 0;
			right: 0;
			margin: auto;
			border-left: 24px solid transparent;
			border-right: 24px solid transparent;
			border-top: 25px solid #337ab7;
			z-index: 11;
		}
		.ms-nav .ms-menu-toggle:checked ~ .ms-li:after {
			content: '';
			width: 45px;
			display: block;
			position: absolute;
			top: 0px;
			left: 0;
			right: 0;
			margin: auto;
			border-left: 24px solid transparent;
			border-right: 24px solid transparent;
			border-bottom: 25px solid #337ab7;
			transition: border-bottom .3s ease;
			z-index: 11;
		}

		.ms-nav .ms-menu-toggle:checked ~ .ms-main:after {
			content: '';
			width: 60px;
			display: block;
			position: absolute;
			top: 0px;
			left: 0;
			right: 0;
			margin: auto;
			border-left: 24px solid transparent;
			border-right: 24px solid transparent;
			border-bottom: 45px solid #337ab7;
			transition: border-bottom .3s ease;
			z-index: 11;
		}
		.ms-nav .ms-menu-toggle:checked ~ .ms-li-last:after {
			content: '';
			width: 45px;
			display: block;
			position: absolute;
			top: -5px;
			left: 0;
			right: 0;
			margin: auto;
			border-left: 0px solid transparent;
			border-right: 0px solid transparent;
			border-bottom: 0px solid #337ab7;
		}

.ms-nav .ms-menu-toggle:checked ~ .ms-main span {
	transform: rotate(-45deg);
	transition: transform .35s ease;
}
.ms-nav .ms-menu-toggle ~ .ms-main span {
	transition: transform .35s ease;
	opacity: 1;
}
.ms-nav > .ms-main > a {
	box-shadow: 0px 5px 10px #333333;
}
.ms-nav > li a {
	font-size: 30px;
	color: #FFFFFF;
	background: #337ab7;
	width: 60px;
	height: 60px;
	display: block;
	border-radius: 100%;
	position: relative;
	text-align: center;
}

	.ms-nav > .ms-main a,
	.ms-nav > .ms-main > a > label {
		font-size: 30px;
		color: #FFFFFF;
		background: #337ab7;
		width: 75px;
    	height: 75px;
		display: block;
		border-radius: 100%;
		position: relative;
		text-align: center;
		z-index: 19;
	}
		.ms-nav > li > a span {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			height: 30px;
			width: 30px;
			opacity: 0;
			z-index: 12;
		}
@keyframes border-top-animation {
  0% {
    bottom: 0px;
  }
  50% {
    bottom: -14px;
  }
  100% {
    bottom: 0px;
  }
}
@keyframes border-bottom-animation {
  0% {
    top: 0px;
  }
  50% {
    top: -13px;
  }
  100% {
    top: 0px;
  }
}
@keyframes big-border-bottom-animation {
  0% {
    top: 0px;
  }
  50% {
    top: -30px;
  }
  100% {
    top: 0px;
  }
}