Menu w/ Transition & hotArea

index.html

<div id="hotArea"></div>

<div id="wrapperMain" class="wrapperMain">
	<div class="icon settings">
		<svg width="50px" heigth="50px" id="Setup" x="0px" y="0px" viewBox="0 0 234 234">
			<path style="fill: rgb(147, 62, 197);" d="M7.5,42.571h39.235c3.327,12.646,14.856,22,28.531,22s25.204-9.354,28.531-22H226.5c4.142,0,7.5-3.358,7.5-7.5s-3.358-7.5-7.5-7.5H103.796c-3.327-12.646-14.856-22-28.531-22s-25.204,9.354-28.531,22H7.5c-4.142,0-7.5,3.358-7.5,7.5S3.358,42.571,7.5,42.571z M75.266,20.571c7.995,0,14.5,6.505,14.5,14.5s-6.505,14.5-14.5,14.5c-7.995,0-14.5-6.505-14.5-14.5S67.271,20.571,75.266,20.571z"></path>
			<path style="fill: rgb(147, 62, 197);" d="M226.5,109.5h-49.99c-3.327-12.646-14.856-22-28.531-22c-13.675,0-25.204,9.354-28.531,22H7.5c-4.142,0-7.5,3.358-7.5,7.5s3.358,7.5,7.5,7.5h111.949c3.327,12.645,14.856,22,28.531,22c13.675,0,25.204-9.355,28.531-22h49.99c4.142,0,7.5-3.358,7.5-7.5S230.642,109.5,226.5,109.5z M147.98,131.5c-7.995,0-14.5-6.505-14.5-14.5s6.505-14.5,14.5-14.5c7.995,0,14.5,6.505,14.5,14.5S155.975,131.5,147.98,131.5z"></path>
			<path style="fill: rgb(147, 62, 197);" d="M226.5,191.429H103.796c-3.327-12.645-14.856-22-28.531-22s-25.204,9.355-28.531,22H7.5c-4.142,0-7.5,3.358-7.5,7.5c0,4.142,3.358,7.5,7.5,7.5h39.235c3.327,12.646,14.856,22,28.531,22s25.204-9.354,28.531-22H226.5c4.142,0,7.5-3.358,7.5-7.5C234,194.787,230.642,191.429,226.5,191.429z M75.266,213.429c-7.995,0-14.5-6.505-14.5-14.5s6.505-14.5,14.5-14.5c7.995,0,14.5,6.505,14.5,14.5S83.261,213.429,75.266,213.429z"></path>
		</svg>
	</div>

	<div class="icon mail">A	</div>

	<div class="icon phone">B</div>

	<div class="icon mail">C</div>

	<div class="icon phone">
		<svg width="50px" heigth="50px" id="Rank" x="0px" y="0px" viewBox="0 0 512 512">
			<path d="M76.513,196.891c-1.094,0-1.988,0.398-2.684,0.994l-11.73,8.946c-1.59,0.993-2.485,2.882-2.485,4.673c0,2.584,1.69,5.169,4.175,5.169c0.696,0,1.591-0.2,2.385-0.895l3.181-3.18v53.081c0.001,2.685,3.182,4.075,6.462,4.075c3.181,0,6.461-1.391,6.461-4.075v-64.612C82.279,198.481,79.198,196.891,76.513,196.891z" style="fill: rgb(255, 218, 68);"></path>
			<path d="M278.052,331.385h-27.634v-2.385c0-10.339,31.512-17.297,31.512-38.768c0-12.624-10.736-20.178-22.266-20.178c-11.034,0-21.372,6.959-21.372,18.29c0,5.368,2.485,6.959,5.864,6.959c4.275,0,6.76-2.386,6.76-4.773c0-6.163,3.976-8.747,8.847-8.747c6.561,0,9.245,4.771,9.245,8.846c-0.002,14.016-32.01,22.466-32.01,38.37v9.642    c0,2.485,3.379,4.076,5.666,4.076h35.388c2.188,0,4.075-2.785,4.075-5.767C282.127,333.968,280.239,331.385,278.052,331.385z" style="fill: rgb(255, 218, 68);"></path>
			<path d="M452.247,374.042c4.87-2.287,7.753-8.648,7.753-16.501c0-13.222-8.946-17.794-20.973-17.794c-16.8,0-21.77,10.239-21.77,17.297c0,4.176,0.894,5.566,6.66,5.566c4.771,0,6.163-1.988,6.163-4.97c0-3.975,2.386-6.66,8.847-6.66c5.367,0,8.748,2.187,8.748,8.748c0,8.549-4.175,9.742-9.145,9.742c-2.882,0-3.876,2.585-3.876,5.069c0,2.585,0.994,5.071,3.876,5.071c6.361,0,10.934,2.087,10.934,9.442v1.889c0,7.555-3.181,10.737-10.636,10.737c-6.361,0-10.339-2.784-10.339-7.258c0-3.18-1.392-4.572-6.661-4.572c-4.473,0-6.163,1.094-6.163,5.07c0,8.049,6.561,18.089,22.864,18.089c13.121,0,23.857-6.063,23.857-22.067v-1.889C462.386,380.8,458.112,376.328,452.247,374.042z" style="fill: rgb(255, 218, 68);"></path>
			<path d="M138.231,147.034H59.615c-4.262,0-7.718,3.454-7.718,7.718c0,4.263,3.455,7.718,7.718,7.718h70.898v318.28H15.435V154.752c0-4.263-3.455-7.718-7.718-7.718c-4.262,0-7.718,3.454-7.718,7.718v333.715c0,4.263,3.455,7.718,7.718,7.718h130.513c4.262,0,7.718-3.454,7.718-7.718V154.752C145.948,150.489,142.494,147.034,138.231,147.034z" style="fill: rgb(255, 218, 68);"></path>
			<path d="M324.82,212.755h-83.595c-4.262,0-7.718,3.454-7.718,7.718c0,4.263,3.455,7.718,7.718,7.718h75.878v252.559H202.023V220.472c0-4.263-3.455-7.718-7.718-7.718c-4.262,0-7.718,3.454-7.718,7.718v267.995c0,4.263,3.455,7.718,7.718,7.718H324.82c4.262,0,7.718-3.454,7.718-7.718V220.472C332.538,216.209,329.082,212.755,324.82,212.755z" style="fill: rgb(255, 218, 68);"></path>

			<path d="M504.282,281.761H373.769c-4.262,0-7.718,3.454-7.718,7.718v198.987c0,4.263,3.455,7.718,7.718,7.718h130.513c4.262,0,7.718-3.454,7.718-7.718V289.479C512,285.217,508.546,281.761,504.282,281.761z M496.565,480.748H381.487V297.197h115.078V480.748z" style="fill: rgb(255, 218, 68);"></path>
			<path d="M439.026,152.996H267.281V23.533c0-4.263-3.455-7.718-7.718-7.718H82.279c-4.262,0-7.718,3.454-7.718,7.718v89.104c0,4.263,3.455,7.718,7.718,7.718c4.262,0,7.718-3.454,7.718-7.718V31.251h161.849v129.462c0,4.263,3.455,7.718,7.718,7.718h171.746v84.447c0,4.263,3.455,7.718,7.718,7.718c4.262,0,7.718-3.454,7.718-7.718v-92.165C446.744,156.45,443.289,152.996,439.026,152.996z" style="fill: rgb(255, 218, 68);"></path>
		</svg>
	</div>

	<div class="icon" id="camera">
		<svg width="50px" heigth="50px" id="Camera" x="0px" y="0px" viewBox="0 0 32 32" >
			<path style="fill: rgb(216, 0, 39);" d="M30,6h-0.887c-0.525,0-1.029,0.207-1.404,0.576L25,9.248V8c0-1.657-1.344-3-3-3H3C1.346,5,0,6.345,0,8v6.972V24c0,1.656,1.343,3,3,3h19c1.656,0,3-1.344,3-3v-1.221l2.709,2.672c0.375,0.369,0.879,0.576,1.404,0.576H30c1.104,0,2-0.895,2-2V8C32,6.895,31.104,6,30,6z M3,25c-0.552,0-1-0.449-1-1V8c0-0.553,0.447-1,1-1h19c0.551,0,1,0.448,1,1v16c0,0.551-0.449,1-1,1H3z M30,24.027h-0.887H29l-4-4V20l-1-1v-6l5-5h0.113H30V24.027z">		
			</path>
		</svg>
	</div>
	<div class="icon phone">D</div>
	<div class="icon phone">E</div>
</div>

<div id="wrapperCamera" class="wrapperCamera">
	<div class="icon phone">1</div>
	<div class="icon phone">2</div>
	<div class="icon phone">3</div>
	<div class="icon phone">4</div>
	<div class="icon phone">5</div>
	<div class="icon phone">F</div>	
	<div id="closeCamera" class="icon phone">X</div>		
</div>

menu-w-transition-hotarea.markdown

Menu w/ Transition & hotArea

A Pen by Giuseppe Canale on CodePen.

License.

script.js

let cameraMenuIsOpen = false;
document.getElementById("hotArea").addEventListener( "mouseover", function(){
	document.getElementById("wrapperMain").style.margin = "10px auto";
	if ( cameraMenuIsOpen == true ){
		document.getElementById("wrapperCamera").style.margin = "140px auto";
	};
});

document.getElementById("wrapperMain").addEventListener( "mouseleave", function(){
	document.getElementById("wrapperMain").style.margin = "-170px auto";
	if ( cameraMenuIsOpen == true ){
		document.getElementById("wrapperCamera").style.margin = "10px auto";
	};
});

let icons = document.getElementsByClassName("icon");
for( let i = 0; i < icons.length; i++ ){
	icons[i].addEventListener( "mouseover", function(){
		this.style.transform = "scale(1.1)";
	});

	icons[i].addEventListener( "mouseleave", function(){
		this.style.transform = "scale(1)";
	});	

};

document.getElementById("camera").addEventListener( "click", function(){
	document.getElementById("wrapperMain").style.margin = "-170px auto";
	document.getElementById("wrapperCamera").style.margin = "10px auto";
	cameraMenuIsOpen = true;
});

document.getElementById("closeCamera").addEventListener( "click", function(){
	document.getElementById("wrapperCamera").style.margin = "-170px auto";
	cameraMenuIsOpen = false;
});

style.css

@import url('https://fonts.googleapis.com/css?family=Montserrat');

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background-color: #2b2b2b;
}

#hotArea {
	position: absolute;
	width: 900px;
	height: 50px;
	margin: 0px auto;
	left: 0;
	right: 0;		
	background: rgba(255, 0, 0, 0);
	padding: 0;
}

.wrapperMain {
	position: absolute;
	display: flex;
	width: 900px;
	height: 110px;
	margin: -170px auto;
	left: 0;
	right: 0;	
	background: rgba(255, 255, 255, 0.3);
	border-radius: 18px;
	padding: 0;
	transition: margin .5s;
}

.wrapperCamera {
	position: absolute;
	display: flex;
	width: 800px;
	height: 110px;
	margin: -170px auto;
	left: 0;
	right: 0;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 18px;
	padding: 0;
	transition: margin .5s;
}

.icon {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	width: 80px;
	height: 80px;
	margin: 15px;
	border-radius: 50%;
	transition: transform .4s;
	font-family: 'Montserrat', sans-serif;
	font-size: 55px;
	color: #fff;
}

.phone {
	background: rgba(255, 255, 255, 0.3);
}

.mail {
	background: rgba(55, 55, 225, 0.3);
}

#camera {
	background: rgba(55, 55, 225, 0.3);
}

.settings{
	background-color: #a542fd;
}

.ff57c6