Modern Animated Menu Toggle Button using Html CSS & Javascript ·

 

# To create a Modern Animated Menu Toggle Button Select Menu using JavaScript, you can use a combination of HTML, CSS, and JavaScript to create a Modern Animated Menu Toggle Button Select Menu and apply a tilt effect to it. Here's an example:

1. First, create a container element in HTML for the Menu Toggle:

                
<div class="block">
    <div class="cta">
        <div class="toggle-btn type1"></div>
    </div>
</div>
            

2. Next, add some CSS to create a Menu Toggle and position the container in the center:

                
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.block {
    height: 60px;
    width: 60px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(134deg, #ff006a, #ff8d00);
    box-shadow: 6px 13px 20px #ff2d008a;
    transition: all 1s ease;
}
.block .cta {
    height: 50px;
    width: 50px;
    cursor: pointer;
}
.toggle-btn {
    width: 38px;
    height: 4px;
    background: #fff;
    position: relative;
    top: 50%;
    left: 0;
    margin: auto;
    transition: all 0.3s ease-in-out;
    border-radius: 6px;
}
.toggle-btn::before{
    content: "";
    height: 4px;
    width: 25px;
    box-shadow: 0 -10px 0 0 #fff;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease-in-out;
    border-radius: 6px;
}
.toggle-btn::after{
    content: "";
    height: 4px;
    width: 19px;
    box-shadow: 0 10px 0 0 #fff;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease-in-out;
    border-radius: 6px;
}
.active .toggle-btn{
    background: transparent;
    transition: all 0.2s ease-in-out;
}
.active .toggle-btn::before,
.active .toggle-btn::after{
    top: 0;
    transition: all 0.3s ease-in-out;
}
.active .type1::before{
    left: 8px;
    transform: translateY(6px) rotate(-45deg);
    width: 36px;
}
.active .type1::after{
    left: 8px;
    transform: translateY(-8px) rotate(45deg);
    width: 36px;
}
            

3. And, Add a Icon javascript in HTML for the Menu Toggle:

                
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script >

            

4. Use JavaScript to create a Menu Toggle Animation element inside the container:

                
$(document).ready(function () {
    $(document).on('click', '.cta', function () {
        $(this).toggleClass('active')
    })
 }); 
            

# Animated Menu Toggle Button in JavaScript HTML and CSS For Full Code 👇

 

Download Full Code

 

* Hello buddy, I hope you are doing great and creating awesome projects. Today I have brought a useful project for you. In this project, you will learn to create `Modern Animated Menu Toggle Button Select Menu` using HTML CSS, and JavaScript. Yeah, HTML also provides us a select menu with the dropdown feature, but we will you will learn to make it more beautiful and fascinating.