Slide-in Menu v4

In this example below you will see how to do a Slide-in Menu v4 with some HTML / CSS and Javascript

Simple menu that slides in and out.Bubble with delay, 4 sides available.Container is minified so that all four are easier to view together. Just delete "b" div to view in its natural habitat.

Thumbnail
This awesome code was written by xiell, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright xiell ©
  • HTML
  • CSS
  • JavaScript
    <div class="b">
	<div class="container">
		<input type="checkbox" id="menu" class="menu">
		<label for="menu">
		</label>
		<div class="menu__block">
			<div class="menu__button menu__button--1 fa fa-home">
				<a href="javascript:void(0);" class="link"></a>
			</div>
			<div class="menu__button menu__button--2 fa fa-wrench">
				<a href="javascript:void(0);" class="link"></a>
			</div>
			<div class="menu__button menu__button--3 fa fa-sign-out">
				<a href="javascript:void(0);" class="link"></a>
			</div>
		</div>
	</div>

	<div class="container container--topright">
		<input type="checkbox" id="menu--2" class="menu">
		<label for="menu--2">
		</label>
		<div class="menu__block">
			<div class="menu__button menu__button--1 fa fa-home">
				<a href="javascript:void(0);" class="link"></a>
			</div>
			<div class="menu__button menu__button--2 fa fa-wrench">
				<a href="javascript:void(0);" class="link"></a>
			</div>
			<div class="menu__button menu__button--3 fa fa-sign-out">
				<a href="javascript:void(0);" class="link"></a>
			</div>
		</div>
	</div>

	<div class="container container--bottomleft">
		<input type="checkbox" id="menu--3" class="menu">
		<label for="menu--3">
		</label>
		<div class="menu__block">
			<div class="menu__button menu__button--1 fa fa-home">
				<a href="javascript:void(0);" class="link"></a>
			</div>
			<div class="menu__button menu__button--2 fa fa-wrench">
				<a href="javascript:void(0);" class="link"></a>
			</div>
			<div class="menu__button menu__button--3 fa fa-sign-out">
				<a href="javascript:void(0);" class="link"></a>
			</div>
		</div>
	</div>

	<div class="container container--bottomright">
		<input type="checkbox" id="menu--4" class="menu">
		<label for="menu--4">
		</label>
		<div class="menu__block">
			<div class="menu__button menu__button--1 fa fa-home">
				<a href="javascript:void(0);" class="link"></a>
			</div>
			<div class="menu__button menu__button--2 fa fa-wrench">
				<a href="javascript:void(0);" class="link"></a>
			</div>
			<div class="menu__button menu__button--3 fa fa-sign-out">
				<a href="javascript:void(0);" class="link"></a>
			</div>
		</div>
	</div>
</div>

/*Downloaded from https://www.codeseek.co/xiell/slide-in-menu-v4-YrooaK */
    html, body
{
	margin: 0;
	padding: 0;
	background: #dedede;
}
.b
{
	position: relative;
	width: 360px;
	height: 360px;
	margin: auto;
	background: #ffffff;
}
.container
{
	position: absolute;
	top: 10px;
	left: 10px;
	display: block;
	width: 200px;
	height: 200px;
	overflow: hidden
}
.container--topright
{
	left: initial;
	right: 10px;
}
.container--bottomleft
{
	top: initial;
	bottom: 10px;
}
.container--bottomright
{
	top: initial;
	bottom: 10px;
	left: initial;
	right: 10px;
}
.menu
{
	display: none
}
.menu ~ label
{
	position: absolute;
	display: block;
	width: 60px;
	height: 60px;
	background: #31c5ff;
	box-sizing: border-box;
	box-shadow: 
		inset 6px 6px rgba(0,0,0,0), 
		2px 2px rgba(0,0,0,0.12);
	border: 2px solid #fff;
	border-radius: 50%;
	cursor: pointer;
	transition: 0.12s ease-out;
	z-index: 9;
	&:before
	{
		position: absolute;
		height: 2px;
		width: 30px;
		top: 18px;
		left: 13px;
		content: "";
		background-color: #ffffff;
		box-shadow: 
			0 8px #ffffff,
			0 16px #ffffff;
		z-index: 3;
	}
}
.container--topright .menu ~ label
{
	left: initial;
	right: 0;
}
.container--bottomleft .menu ~ label
{
	top: initial;
	bottom: 0;
}
.container--bottomright .menu ~ label
{
	top: initial;
	bottom: 0;
	left: initial;
	right: 0;
}
.menu:active ~ label
{
	box-shadow: 
		inset 6px 6px rgba(0,0,0,0.12), 
		2px 2px rgba(0,0,0,0);
}
.menu__button
{
	position: absolute;
	height: 40px;
	width: 100%;	
	max-width: 0px;
	top: 10px;
	left: 30px;
	transform-origin: center left;	
	transform: rotate(0deg);
	transition: 0.2s ease-in-out;
	z-index: 1;
	overflow: hidden;
	
	&:before
	{
		position: absolute;
		width: 40px;
		height: 40px;
		right: 0;
		top: 0px;
		font-size: 20px;
		line-height: 40px;
		text-align: center;
		color: #ffffff;
		z-index: 3;
	}
	&:after
	{
		position: absolute;
		width: 40px;
		height: 40px;
		right: 0;
		content: "";
		border-radius: 50%;
		background-color: #22d9ff;
		z-index: 2;
	}
}
.container--topright .menu__button
{
	left: initial;
	right: 30px;
	transform-origin: right center;
	&:before, &:after
	{
		right: initial;
		left: 0;
	}
}
.container--bottomleft .menu__button
{
	top: initial;
	bottom: 10px;
}
.container--bottomright .menu__button
{
	left: initial;
	right: 30px;
	top: initial;
	bottom: 10px;
	transform-origin: right center;
	&:before, &:after
	{
		right: initial;
		left: 0;
	}
}
.menu:checked ~ .menu__block .menu__button
{
	max-width: 120px;
}
.menu ~ .menu__block .menu__button--2
{
	transition: 0.2s 0.1s ease-in-out;
	transform: rotate(45deg);
	&:before
	{
		transform: rotate(-45deg)
	}
}
.menu ~ .menu__block .menu__button--3
{
	transition: 0.2s 0.2s ease-in-out;
	transform: rotate(90deg);
	&:before
	{
		transform: rotate(-90deg)
	}
}
.container--topright .menu ~ .menu__block .menu__button--2
{
	transition: 0.2s 0.1s ease-in-out;
	transform: rotate(-45deg);
	&:before
	{
		transform: rotate(-45deg)
	}
}
.container--topright .menu ~ .menu__block .menu__button--3
{
	transition: 0.2s 0.2s ease-in-out;
	transform: rotate(-90deg);
	&:before
	{
		transform: rotate(-90deg)
	}
}
.container--bottomleft .menu ~ .menu__block .menu__button--2
{
	transition: 0.2s 0.1s ease-in-out;
	transform: rotate(-45deg);
	&:before
	{
		transform: rotate(-45deg)
	}
}
.container--bottomleft .menu ~ .menu__block .menu__button--3
{
	transition: 0.2s 0.2s ease-in-out;
	transform: rotate(-90deg);
	&:before
	{
		transform: rotate(-90deg)
	}
}

.link
{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 40px;
	height: 40px;
	cursor: pointer;
	z-index: 99;
}
.container--topright .link, .container--bottomright .link
{
	left: 0;
	right: initial;
}


/*Downloaded from https://www.codeseek.co/xiell/slide-in-menu-v4-YrooaK */
    

Comments