Make a 3D Menu Effect Using HTML , CSS and JavaScript

 


In this tutorial, I will show you how to make a Cool 3d Menu Animation Using HTML, CSS and JavaScript 


HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Navigation Menu</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div id="menu" class="navigation_menu">
        <ul>
            <li><a href="#">About Me</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">My Work</a></li>
            <li><a href="#">Contact Me</a></li>
        </ul>
    </div>
    <span id="btn" class="menu_btn"></span>

    <div  id="container" class="main_container">
        <span class="overall"></span>
        <div class="content">
            <h1>This is My Cool Menu</h1>
            <p>this is a very simple responsive menu with a cool animation made in HTML, CSS and Javascript</p>
        </div>
    </div>


    <script src="main.js" type="text/javascript"></script>

</body>
</html>



CSS Code: 

@import url('https://fonts.googleapis.com/css2?family=Halant:wght@500;700&family=Tajawal:wght@400;800&display=swap');

*{
    margin: 0;
    padding: 0;
    outline: 0;
}
body{
    z-index: -2;
    /*background-color: #e3f2fd;*/
    background-color: #536dfe;
    overflow: hidden;
    perspective: 800px;
}

.main_container{
    overflow: hidden;
    z-index: 0;
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #64b6ac;
    transition: 0.4s;
    background: url(res/bg3.jpgno-repeat center;
    background-size: cover;
}

.overall{
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0,0,0,.5);
}
.content{
    position: relative;
    z-index: 2;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    color: white;
    font-size: 2rem;
    font-family: 'Halant'serif;
    width: 50%;
}
.menu_btn{
    z-index: 100;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 30px;
    left: 30px;
    background-image: url(res/menu_btn.png);
    background-size: cover;
    filter: grayscale();
}

.navigation_menu{
    position: absolute;
    z-index: 0;
    height: 100vh;
    width: 30%;
    
}
.navigation_menu ul{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    list-style: none;
}
.navigation_menu ul li{
    padding: 20px 0;
}
.navigation_menu ul li a{
    color: #fff;
    font-size: 2rem;
    transition: .4s;
    text-decoration: none;
    font-family: "Tajawal"sans-serif;
}
.navigation_menu ul li a:hover{
    color: #000;
}

.active{
    overflow: hidden;
    z-index: 0;
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #64b6ac;
    transition: 0.4s;
    
    background-size: cover;
    border-radius: 25px;
    
    transform: scale(0.9translateX(30%rotate3D(0,1,0,-20deg);
   
    box-shadow:  0 2px 8px rgba(30,30,30,0.3);

    
}
@media screen and (max-width:425px){
    *{
        font-size: 0.8em;
    }



JavaScript Code:

//getting the button
var button = document.getElementById("btn");
var container = document.getElementById("container");
var menu = document.getElementById("menu")
var close = true;
button.addEventListener("click" ,function(){
    //alert("hello")
    //container.classList.remove("main_container");
    container.classList.add("active");
    if(close){
        container.classList.add("active");
        menu.style.zIndex = "0";
        close = false
    }else{
        close = true;
        container.classList.remove("active");
        menu.style.zIndex = "-1";
    }
});






















Make a 3D Menu Effect Using HTML , CSS and JavaScript Make a 3D Menu Effect Using HTML , CSS and JavaScript Reviewed by Medics on December 20, 2020 Rating: 5

4 comments:

-->
Powered by Blogger.