• HTML
• CSS

HTML

<nav x-data="{open:false}" :class="{'active':open}">
	<div class="menu-left">
		<a class="title">Artisan</a>
		<div class="btn" @click="open=!open" :class="{'icon-menu':!open,'icon-cancel-1':open}"></div>
	</div>
	<div class="menu-right">
		<ul>
			<li><a href="#">Inicio</a></li>
			<li><a href="#">Desarrollo Web</a></li>		
			<li><a href="#">Consultoría</a></li>
			<li><a href="#">Soporte</a></li>
			<li><a href="#">Contactar</a></li>
		</ul>
	</div>	
</nav>

CSS

body{
	font-family:sans-serif;
}

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

.menu-left{
    background:#e74c3c;
	color:white;
	position:relative;
	z-index:1;
}
.menu-left .title{
	font-weight:600 1.5rem;
	font-size:1.5rem;
	padding:2rem 1rem;
	display:block;
}
.menu-left .btn{
	position:absolute;
	right:1rem;
	top:1.7rem;
	font-size:2rem;
	cursor:pointer;
}
.menu-right{
    position:absolute;
    width:100%;
	background:#f2f3f4;
	border-bottom:2px solid #e5e7e9;
	transition:0.5s all;
	margin-top:-100%;
}
.menu-right ul li a{
	display:block;
	text-decoration:none;
	padding:1rem;
	color:#283747;
}
.menu-right ul li a:hover{
	background:#e5e7e9;
}

nav.active .menu-right{
  margin-top:0rem;  
}