.hero__wrapper
	h1.hero__header Mobile Menu Concept
	.hero__phone
		button.menu__button
			div
				div
			| Quick Menu
		section.menu__body(hidden)
			.menu__header
				label 
					div
				p Quick Navigation
				button(title="Close")
					div
			.menu__links
				a(href="#0") About Us
				a(href="#0") Services
				a(href="#0") Pricing
				a(href="#0") Blog
				a(href="#0") Contact
			.menu__contact
				a(href="#0") 
					svg(xmlns='http://www.w3.org/2000/svg', fill='#000000', height='24', viewbox='0 0 24 24', width='24')
						path(d='M0 0h24v24H0z', fill='none')
						path(d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z')

					span Call
				a(href="#0")
					svg(xmlns='http://www.w3.org/2000/svg', fill='#000000', height='24', viewbox='0 0 24 24', width='24')
						path(d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z')
						path(d='M0 0h24v24H0z', fill='none')
					span Email

				a(href="#0") 
					svg(xmlns='http://www.w3.org/2000/svg', fill='#000000', height='24', viewbox='0 0 24 24', width='24')
						path(d='M21.71 11.29l-9-9c-.39-.39-1.02-.39-1.41 0l-9 9c-.39.39-.39 1.02 0 1.41l9 9c.39.39 1.02.39 1.41 0l9-9c.39-.38.39-1.01 0-1.41zM14 14.5V12h-4v3H8v-4c0-.55.45-1 1-1h5V7.5l3.5 3.5-3.5 3.5z')
						path(d='M0 0h24v24H0z', fill='none')
					span Directions
		.menu__overlay(hidden)
View Compiled
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:700');

:root {
	--dark: #333;
	--light: #fff;
	--neutral: #f6f6f6;
	--neutral-dark: #d1d1d1;
	--color: #5607d7;
	--color-light: #941ed2;
	--color-dark: #2719cd;
	--font-stack: 'Josefin Sans', 'Montserrat', 'sans-serif';
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	background: url('data:image/svg+xml,%3Csvg width="300" height="300" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M8 16c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zm33.414-6l5.95-5.95L45.95.636 40 6.586 34.05.636 32.636 2.05 38.586 8l-5.95 5.95 1.414 1.414L40 9.414l5.95 5.95 1.414-1.414L41.414 8zM40 48c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8 3.582 8 8 8zm0-2c3.314 0 6-2.686 6-6s-2.686-6-6-6-6 2.686-6 6 2.686 6 6 6zM9.414 40l5.95-5.95-1.414-1.414L8 38.586l-5.95-5.95L.636 34.05 6.586 40l-5.95 5.95 1.414 1.414L8 41.414l5.95 5.95 1.414-1.414L9.414 40z" fill="%239C92AC" fill-opacity="0.1" fill-rule="evenodd"/%3E%3C/svg%3E') fixed;
	font-family: var(--font-stack);
	&:before {
		content: '';
		width: 400px;
		height: 400px;
		background: linear-gradient(135deg, orange, orangered);
		border-radius: 50%;
		position: fixed;
		top: -50px;
		left: 10vw;
		z-index: -1;
	}
	&:after {
		content: '';
		width: 300px;
		height: 300px;
		background: linear-gradient(135deg, cyan, blue);
		border-radius: 50%;
		position: fixed;
		bottom: -50px;
		right: -5vw;
		z-index: -1;
	}
}

.hero__wrapper {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	flex-wrap: wrap;
	&:before {
		content: '';
		width: 150px;
		height: 150px;
		background: linear-gradient(135deg, var(--color-light), var(--color-dark));
		border-radius: 50%;
		position: fixed;
		bottom: 50px;
		left: 10px;
		z-index: -1;
	}
	> * {
		margin: 15px;
	}
}

.hero__header {
	flex: 0 1 1px;
	padding-right: 50px;
	color: var(--dark);
	font-size: 8vmax;
}

.hero__phone {
	width: 300px;
	height: 630px;
	background: var(--light);
	background-color: #ffffff;
background: #fff url('https://codepenworldsfair.com/images/small-worlds-fair.png') center/250px no-repeat;
	border: 12px solid var(--dark);
	border-radius: 36px;
	position: relative;
	overflow: hidden;
	&:before {
		content: '';
		width: 175px;
		height: 25px;
		background: var(--dark);
		border-bottom-right-radius: 20px;
		border-bottom-left-radius: 20px;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translatex(-50%);
		z-index: 1000;
	}
	&:after {
		content: '';
		width: 100px;
		height: 5px;
		background: var(--dark);
		border-radius: 2px;
		position: absolute;
		bottom: 6px;
		left: 50%;
		transform: translatex(-50%);
		z-index: 1000;
	}
}

.menu__button {
	--x: -50%;
	--y: 0;
	--z: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: linear-gradient(to right, var(--color-light), var(--color-dark));
	padding: 10px 20px;
	border-radius: 28px;
	box-shadow: 0 2px 40px -10px var(--color);
	color: var(--light);
	font-size: 16px;
	white-space: nowrap;
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translate3d(var(--x), var(--y), var(--z));
	cursor: pointer;
	z-index: 105;
	transition: .15s cubic-bezier(.33,1,.53,1);
	&[hidden] {
		--y: 200%;
	}
	div {
		display: flex;
		align-items: center;
		width: 12px;
		height: 12px;
		margin-right: 20px;
		div {
			display: table;
			height: 1px;
			background: var(--light);
			box-shadow: 0 4px 0 var(--light), 0 -4px 0 var(--light);
		}
	}
}

.menu__overlay {
		width: 100%;
		height: 100%;
		background: rgba(#000, .1);
		position: absolute;
		z-index: 100;
}

.menu__body {
	--x: 0;
	--y: 0;
	--z: 0;
	display: block;
	width: 100%;
	background: var(--light);
	padding-bottom: 15px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	box-shadow: 0px -9px 50px -30px black;
	font-family: 'Montserrat', sans-serif;
	position: absolute;
	bottom: 0;
	z-index: 105;
	transform: translate3d(var(--x), var(--y), var(--z));
	transition: .2s cubic-bezier(.33,1,.53,1);
	&[hidden] {
		--y: 150%;
	}
	> *:not(:last-child) {
		border-bottom: 2px solid var(--neutral);
	}
}

.menu__header {
	display: flex;
	justify-content: space-between;
	padding: 15px 20px;
	label {
		div {
			width: 15px;
			height: 15px;
			border: 2px solid var(--dark);
			border-radius: 50%;
			position: relative;
			transform: rotate(5.5rad);
			&:after {
				content: '';
				width: 2px;
				height: 10px;
				background: var(--dark);
				position: absolute;
				top: 100%;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}
	p {
		font-size: 18px;
		font-weight: bold;
		vertical-align: center;
		white-space: nowrap;
	}
	h3 {
		font-weight: normal;
	}
	button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 25px;
		height: 25px;
		background: var(--neutral-dark);
		border-radius: 50%;
		cursor: pointer;
		div {
			width: 15px;
			height: 3px;
			background: var(--light);
			position: relative;
			transform: rotate(5.5rad);
			&:before {
				content: '';
				width: 3px;
				height: 15px;
				background: var(--light);
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}
}

.menu__links {
	display: flex;
	padding: 10px 15px;
	font-weight: bold;
	overflow-x: auto;
	a {
		flex: 1 1 1px;
		padding: 10px 8px;
		color: var(--dark);
		text-decoration: none;
		white-space: nowrap;
	}
}

.menu__contact {
	display: flex;
	padding: 8px;
	svg {
		width: 100%;
		fill: var(--color);
	}
	a {
		flex: 1 1 30%;
		padding: 5px;
		margin: 5px;
		border-radius: 8px;
		background: var(--neutral);
		color: var(--color);
		text-align: center;
		font-size: 14px;
		font-weight: bold;
	}
}
View Compiled
const button = document.querySelector('.menu__button');
const menu = document.querySelector('.menu__body');
const close = document.querySelector('.menu__header button');
const overlay = document.querySelector('.menu__overlay');

function showMenu () {
	button.setAttribute('hidden', '');
	menu.removeAttribute('hidden');
	overlay.removeAttribute('hidden');
};

function hideMenu () {
	menu.setAttribute('hidden', '');
	overlay.setAttribute('hidden', '');
	button.removeAttribute('hidden');
};

button.addEventListener('click', showMenu);
close.addEventListener('click', hideMenu);
overlay.addEventListener('click', hideMenu);
View Compiled

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/1173082/reset.css

External JavaScript

This Pen doesn't use any external JavaScript resources.