Morphing tab button with list

index.html

<div class="m-dropdown">
	<div class="e-button open">
		Click Me
		<div class="e-burger">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</div>
	</div>
	<ul class="e-list">
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
		<li><a href="#">Item 4</a></li>
		<li><a href="#">Item 5</a></li>
	</ul>
</div>

morphing-tab-button-with-list.markdown

Morphing tab button with list

Morphing button with a dropdown list beneath it

A Pen by Colin Horn on CodePen.

License.

script.js

$(".e-list").slideUp(function() {
	$(".e-button").removeClass("open");
});

$(".e-button").on("click", function() {
	if ($(this).hasClass("open")) {
		$(".e-list").slideUp(function() {
			$(".e-button").removeClass("open");
		});
	} else {
		$(this).addClass("open");
		setTimeout(function() {
			$(".e-list").stop().slideDown();
		}, 200);
	}
});

scripts

<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://use.fontawesome.com/b5bf1bd49e.js"></script>

style.scss

$f-title:'Roboto', sans-serif;
$f-body:'Open Sans', sans-serif;

@mixin centre($axis: "both") {
	position: absolute;
	@if $axis == "y" {
		top: 50%;
		-webkit-transform: translateY(-50%);
		-moz-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	@if $axis == "x" {
		left: 50%;
		-webkit-transform: translateX(-50%);
		-moz-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	@if $axis == "both" {
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-51%, -50%);
		-moz-transform: translate(-51%, -50%);
		-ms-transform: translate(-51%, -50%);
		-o-transform: translate(-51%, -50%);
		transform: translate(-51%, -50%);
	}
}
@mixin font-size($sizeValue: 1.6, $lineHeight: 2.4) {
  font-size: ($sizeValue * 10) + px;
  font-size: $sizeValue + rem;
  line-height: ($lineHeight * 10) + px;
}
@mixin transition($property) {
	-webkit-transition: $property;
	-moz-transition: $property;
	-ms-transition: $property;
	-o-transition: $property;
	transition: $property;
}
@mixin border-radius($radius) {
	border-radius:$radius;
	-moz-border-radius:$radius;
	-webkit-border-radius:$radius;
	-ms-border-radius: $radius;
}

html {
  font-size: 62.5%;
}

body{
	@include font-size(1.6, 2.2);
	margin:0;
	padding:0;
	font-family:$f-body;
	background:#333;
}

.m-dropdown{
	margin:50px auto;
	width:300px;
	display:block;
	
	.e-button{
		@include transition(all .3s ease-in-out);
		@include border-radius(20px);
		@include font-size(1.4, 2);
		padding: 8px 40px 8px 15px;
		z-index: 900;
		color: #fff;;
		font-weight: 900;
		position: relative;
		border: 2px solid transparent;
		margin-top: 2px;
		font-family: $f-body;
		z-index: 5;
		display:block;
		width:100px;
		margin:0 auto;
		background:#1b1b1b;
		
		&:hover{
			cursor:pointer;
			box-shadow:0 3px 6px rgba(0,0,0,0.2);
			color:#669999;
			
			.e-burger{
				span{
					background:#669999;
				}
			}
		}

		&:after,
		&:before {
			display: block;
			content: " ";
			position: absolute;
			top: 2px;
			height: 100%;
			width: 20px;
			background: #333;
			z-index: 0;
		}

		&:after {
			left: 100%;
			margin-left: 2px;
			border-bottom-left-radius: 10px;
		}
		&:before {
			right: 100%;
			margin-right: 2px;
			border-bottom-right-radius: 10px;
		}

		.e-burger {
			@include transition(all .3s ease-in-out);
			@include centre(y);
			right: 15px;
			width: 15px;
			height: 14px;
			transform-origin: center;
			z-index: -1;
			span {
				@include transition(all .2s ease-in-out);
				@include centre(y);
				@include border-radius(2px);
				width: 100%;
				height: 2px;
				background: #fff;
				display: block;
				left: 0;
				transform-origin: center;

				&:first-child {
					top: 0;
					transform: none;
				}

				&:last-child {
					top: auto;
					bottom: 0;
					transform: none;
				}
			}

			&:after {
				@include transition(height .3s ease-in-out);
				content: " ";
				display: block;
				position: absolute;
				top: 12px;
				right: -37px;
				height: 0;
				width: 199px;
				left: auto;
				z-index: -2;
				background: #1b1b1b;
				opacity: 0;
			}
		}

		&.open {
			border-color: transparent;
			background: #1b1b1b;
			border-bottom-left-radius: 0px;
			border-bottom-right-radius: 0px;
			color:#669999;


			.e-burger {
				span {
					background:#669999;

					&:first-child {
						opacity: 0;
					}
					&:nth-child(2) {
						transform: translateY(-50%) rotate(-45deg);
					}
					&:nth-child(3) {
						transform: translateY(-50%) rotate(45deg);
					}

					&:last-child {
						opacity: 0;
					}
				}

				&:after {
					height: 15px;
					opacity: 1;				
				}
			}
		}
	}
	.e-list{
		@include border-radius(5px);
		box-shadow:0 3px 6px rgba(0,0,0,0.2);
		position:relative;
		width:100%;
		margin:0;
		padding:0;
		list-style:none;
		background:#1b1b1b;
		float:left;
		overflow:hidden;
		z-index:999;
		
		li{
			display:block;
			width:100%;
			float:left;
			border-bottom:1px solid rgba(255,255,255,0.01);
			box-sizing:border-box;
			
			&:last-child{
				border:none;
			}

			a{
				@include transition(all .3s ease-in-out);
				padding:15px;
				float:left;
				width:100%;
				text-decoration:none;
				color:#fff;
				font-weight:600;
				box-sizing:border-box;
				
				&:hover{
					background:#fff;
					color:#111;
				}
			}
		}
	}
}