Menu - Animated - example

by Lio Fleishman

HTML

<div class="addMenu">
	<div class="addMenu__addBtn closed" id="addMenuBtn">+
	</div>
	<div class="addMenu__container inactive">
		<div class="btnAdd btnAdd--crew">crew</div>
		<div class="btnAdd btnAdd--alloc">crew allocation</div>
		<div class="btnAdd btnAdd--na">NA</div>
	</div>
</div>

SCSS

$plusBtnColor: #ff4545;
$myColor: #4585ff;
$secColor: #fff;
.addMenu {
		position:absolute;
    &__addBtn {
    		display: inline-block;
        width: 50px;
				height:50px;
				background: $plusBtnColor;
				color: #fff;
				border-radius: 50%;
				font-size: 32px;
				font-weight:200;
				text-align: center;
    		line-height: 48px;
				cursor:pointer;
				transition: all .5s ease;
				&.closed {
					transform: rotate(360deg);
				}
    }

    &__container {
        /* CSS declarations for `.block--modifier` */
				border: 1px solid #ccc;
				width: 210px;
				position: absolute;
				z-index: -1;
				top: 30px;
				left: 23px;
				border-radius: 4px;
				background: $secColor;
				transition: all .3s ease;
				transform-origin: 0 0;
				&.inactive {
					transform: scale(0,0);
				}
				
    }
}

.btnAdd {
	font-family: arial;
	text-align: center;
	background-color: $myColor;
	padding: 9px;
	margin: 5px;
	border-radius: 4px;
	color: #fff;
	&:hover {
		cursor:pointer;
		background: orange;
	}
}

JavaScript

var addBtn = document.getElementById('addMenuBtn');
var menu = document.getElementsByClassName('addMenu__container');

var animMenu = function(){
addBtn.classList.toggle('closed');
for(var i = 0; i < menu.length; i++){
	menu[i].classList.toggle("inactive");
}	
}

addBtn.addEventListener('click', animMenu , false);