JSFiddle - React, Tailwind, and code Playground

by Wagner Viana

HTML

<div id="nav-content">
		<header class="main-header">	
			<!-- Todo = Transformar logo em texto -->	
			<a href="" class="logo" target="_blank"><img src="" height="30" width="auto" alt="Logo"></a>
			<nav class="nav-main" role="navigation">
				<a href="">		
					<canvas id="menu-nav-third" width="50" height="50"></canvas>
					<canvas id="menu-nav-second" width="50" height="50"></canvas>
					<canvas id="menu-nav-first" width="50" height="50"></canvas>					
				</a>	
			</nav>
						
		</header><!-- <header class="main-header"> -->
			
	</div>

CSS

@CHARSET "UTF-8";

*{
	margin: 0;
	padding: 0;
}

header{
	width: 100%;
	height: 50px;
	background-color: #7C7A90;
	filter:alpha(opacity=80); /* IE */
	-moz-opacity:0.8; /* Mozilla */
	opacity: 0.8; /* CSS3 */
	z-index: 2;
}

.logo{
	width: 150px;	
	height: 50px;
	margin: 0;	
	float:left;
	display:block;	
}
.logo img{
	margin: 7px 30px;		
}

.nav-main{	
	width: 50px;
	height: 50px;
	display:inline-block;
	border-left: 1px solid #FFF;
	border-right: 1px solid #FFF;	
}

/*
* Canvas
*/

#menu-nav-first{
	width:50px;
	height:50px;
	position:relative;	
	float:left;	
	margin-top: -50px;
	z-index: 10;	
}

#menu-nav-second{
	width:50px;
	height:50px;
	position:absolute;
	float:left;
	margin-left:-50px;
	z-index: 5;			
}

#menu-nav-third{
	width:50px;
	height:50px;
	position:relative;
	float:left;
	z-index: 2;
}

JavaScript

var diamondFirst = function (x, y){
	var canvas = document.getElementById("menu-nav-first");
	var context = canvas.getContext("2d");
	
	context.beginPath();
    context.moveTo(25, 10);   
    context.lineTo(40, 20);
    context.lineTo(25, 30);
    context.lineTo(10, 20);
    
    context.lineWidth = 0;
    context.fillStyle = "#FFFFFF";     
    
    context.closePath();
        
    context.fill();           
    
}

var diamondSecond = function(x, y){
	
	var canvas = document.getElementById("menu-nav-second");
	var context = canvas.getContext("2d");
	
	context.beginPath();
    context.moveTo(25, 15);   
    context.lineTo(40, 25);
    context.lineTo(25, 35);
    context.lineTo(10, 25);     
    
    context.lineWidth = 0;
    context.fillStyle = "#F2673D";     
    
    context.closePath(); 
    
    context.fill();    
}

var diamondThird = function(x, y){
	
	var canvas = document.getElementById("menu-nav-third");
	var context = canvas.getContext("2d");
	
	context.beginPath();
    context.moveTo(25, 20);   
    context.lineTo(40, 30);
    context.lineTo(25, 40);
    context.lineTo(10, 30);     
    
    context.lineWidth = 0;
    context.fillStyle = "#483852";     
    
    context.closePath();    
    
    context.fill();     
    
}



diamondFirst();
diamondSecond();
diamondThird();


$(document).ready(function() {	
	
	$("#menu-nav-first").append("#menu-nav-third").append("#menu-nav-second");	

		$("#menu-nav-first").hover(function() {
			$(this).stop().animate({ marginTop: "-44px" }, 200);
			$(this).parent().find("#menu-nav-third").stop().animate({ marginTop: "-3px" }, 200);			
		},function(){
			$(this).stop().animate({ marginTop: "-50px" }, 300);
			$(this).parent().find("#menu-nav-third").stop().animate({ marginTop: "0" }, 200);			
		});	
		
});