Hamburger Animation
Hello Coder! Welcome to Codewithshobhit Blog. Today we are going to Create Hamburger Animation Using HTML CSS And JS
Project Folder Structure:
- Create a file called index.html to serve as the main file.
- Create a file called style.css for the CSS code.
- Create a file called script.js for the JavaScript code.
Hamburger Animation HTML CODE
<div class="header nav">
<!-- hamburger togglemenu menu with 3 spans -->
<a id="btnHamburger"class="header__togglemenu" href="#">
<!-- hide-for-desktop to hide te hamburger togglemenu in desktop view -->
<span></span>
<span></span>
<span></span>
</a>
</div>
<!--
<div class="second nav2">
<a id="btnHamburger"class="second__togglemenu" href="#">
<!-- hide-for-desktop to hide te hamburger togglemenu in desktop view -->
<!-- <span></span>
<span></span>
<span></span>
</a>
</div>
-->
Explanation Of HTML CODE
This HTML code represents a hamburger menu with three spans inside an anchor (<a>) element. The spans will be styled and animated using CSS.
Hamburger Animation CSS CODE
$darkBlue: black;
$brightCyan: hsl(192, 70%, 51%);
body{
// display: flex;
background-color: black;
}
.nav {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
// position: relative;
// width: 50px;
// height: 50px;
/* Center vertically and horizontally */
// background-color: yellow;
}
.header{
&__togglemenu {
> span { //this "> "is a child selector& selects the span element
display: block;
width: 8rem;
height: 1rem;
background-color: $darkBlue;
transition: all 300ms ease-in; // for open class
transform-origin: 18px 8px;// for open class
box-shadow: 0px 3px 15px white;
//to add space between the span but the last one use not selector and mention last child
&:not(:last-child) {
margin-bottom: 1rem;
}
}
}
&.open {
//select the child elements a or span whatever the child element is
.header__togglemenu{
> span:first-child {
transform: rotate(45deg);
}
> span:nth-child(2) {
opacity: 0;
}
> span:last-child {
transform: rotate(-45deg);
}
}
}
}
// Second Hamnurger menu
// .second{
// backgroud-color: lightgreen;
// &__togglemenu {
// > span { //this "> "is a child selector& selects the span element
// display: block;
// width: 7rem;
// height: 1rem;
// background-color: $darkBlue;
// transition: all 300ms ease-in; // for open class
// transform-origin: 18px 8px;// for open class
// &:not(:last-child) {
// margin-bottom: 1rem;
// }
// }
// .second__togglemenu{
// > span:first-child {
// transform: rotate(45deg);
// }
// > span:nth-child(2) {
// opacity: 0;
// }
// > span:last-child {
// transform: rotate(-45deg);
// }
// }
// }
// }
// .nav2 {
// display: flex;
// justify-content: ;
// // align-content:
// margin: 10rem; /*10px;*/
// padding: 2px;
// }
Explanation Of CSS CODE
In the SCSS code, variables like $darkBlue and $brightCyan are defined for colors. The styles for the hamburger menu and its animation are structured using SCSS nesting. The & symbol refers to the parent selector.
Hamburger Animation JS CODE
// how to add a functionality for the a hamburger menu in JS
// class open is only for JS functionality no need to add in HTML
// ID btnHamburger need to be added in HTML to access the class in css
// Step 1 create a var/const in JS
const btnHamburger = document.querySelector('#btnHamburger');
// step 2 use btnHamburger to add and event listner
const header = document.querySelector('.header');
// later beacuse moving the open class in the header elements not the header menu
// we will have to rename const btnHamburger to const header and select class header
//steps to add overlay class
const overlay = document.querySelector('.overlay');
btnHamburger.addEventListener('click', function(){
console.log('Click Hamburger'); // just to check or test the function in browser
// add a class that it releates to
// if statement usage to make the functionality work
// if the btnHamburger contains open class remove open class else add open class
if (header.classList.contains('open')) {
header.classList.remove('open'); // close menu
//steps to add fade out to overlay class on closing
} else { //open menu
header.classList.add('open');
//steps to add fade in to overlay class on clicking menu
}
});
Explanation Of JS CODE
In the JavaScript code, it selects the hamburger button and the header element. When the hamburger button is clicked, it toggles the 'open' class on the header. If the header already has the 'open' class, it removes it (closing the menu), and if not, it adds it (opening the menu). The actual styling and animation of the menu are handled by the corresponding SCSS styles based on the presence of the 'open' class.
Live Preview Of Hamburger Animation
See the Pen Hamburger Animation by Codewithshobhit (@Codewithshobhit) on CodePen.
Conclusion
In conclusion, the provided code snippets illustrate the implementation of a hamburger menu animation using HTML, SCSS (Sass), and JavaScript. The HTML structure defines a toggle button with three spans inside a container. SCSS is employed to style the elements and manage the animation, utilizing variables for colors and nesting to enhance code organization. The JavaScript code adds interactivity by toggling the 'open' class on the header element when the hamburger button is clicked, triggering corresponding styling changes in the SCSS. This approach provides a clear and modular structure for creating a visually appealing and functional hamburger menu animation on a webpage.
How to run this Html Css and Js Project in Our Browser?
first, you need a code editor either you can use VS code studio or notepad and then copy the html,css, and javascript code, create separate or different files for coding then combine them, after creating file just click .html file or run from VS Code studio and you can project preview.
Which Code Editor do you use to create those projects?
I am using VS Code Studio.
is this project responsive or not?
Yes! this project is a responsive project.
If you enjoyed reading this post and found it useful, please share it with your friends and follow me on Instagram.
Thanks for reading!
Author: Shobhit 😊
No comments:
Post a Comment