Burger To Close

Developer
Chung Man Chau
Size
2,491 Kb
Views
6,072
  1. Burger To Close Previews
  2. Burger To Close HTML Codes
  3. Burger To Close CSS Codes
  4. Burger To Close JS Codes

How do I make an burger to close?

What is a burger to close? How do you make a burger to close? This script and codes were developed by Chung Man Chau on 15 January 2023, Sunday.

Burger To Close Previews
IQ Test

Burger To Close - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Burger To Close</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="nav"> <i></i> <i></i> <i></i>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Burger To Close - Script Codes CSS Codes

body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background: #333;
}
.nav { width: 50px; height: 40px; cursor: pointer;
}
.nav i { content: ''; display: block; width: 100%; height: 8px; background-color: #FFF; border-radius: 4px;
}
.nav i:nth-child(1) { animation: outT 0.8s forwards;
}
.nav i:nth-child(2) { margin: 8px 0; animation: outM 0.8s forwards;
}
.nav i:nth-child(3) { animation: outB 0.8s forwards;
}
.nav.active i:nth-child(1) { animation: inT 0.8s reverse forwards;
}
.nav.active i:nth-child(2) { animation: inM 0.8s reverse forwards;
}
.nav.active i:nth-child(3) { animation: inB 0.8s reverse forwards;
}
@keyframes inT { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(16px) rotate(0deg); } 100% { transform: translateY(16px) rotate(135deg); }
}
@keyframes inM { 50% { transform: rotate(0deg); } 100% { transform: rotate(45deg); }
}
@keyframes inB { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-16px) rotate(0deg); } 100% { transform: translateY(-16px) rotate(135deg); }
}
@keyframes outT { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(16px) rotate(0deg); } 100% { transform: translateY(16px) rotate(135deg); }
}
@keyframes outM { 50% { transform: rotate(0deg); } 100% { transform: rotate(45deg); }
}
@keyframes outB { 0% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-16px) rotate(0deg); } 100% { transform: translateY(-16px) rotate(135deg); }
}

Burger To Close - Script Codes JS Codes

$('.nav').click(function(){ $(this).toggleClass('active');
});
Burger To Close - Script Codes
Burger To Close - Script Codes
Home Page Home
Developer Chung Man Chau
Username chungman93
Uploaded January 15, 2023
Rating 3
Size 2,491 Kb
Views 6,072
Do you need developer help for Burger To Close?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chung Man Chau (chungman93) Script Codes
Name
Menu Transformation
Time Zone Mock Up - WIP
Grid with Flex Fallback
Google Plus Button
Color Variables
Animated Gradient Text
Holy Grail Layout - CSS Grid
Rolling Word Hover
CSS Masking Button Hovers
Fixed Background Image - No Repaint
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!