DEV Community

Ahtsham Ajus
Ahtsham Ajus

Posted on

Today I learned to Create a Animation Navigation

Today I have learned to make animated navigation in "50 projects in 50 Days" of Udemy using HTML CSS and JavaScript.

This is a great way to handle a responsive menu. With just a little JavaScript, you’ll get a menu that stacks items into a dropdown when they overflow.

Here's My Html code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>Animated Navigation</title>
</head>
<body>
    <nav class="active" id="nav">
        <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Works</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <button class="icon" id="toggle">
        <div class="line line1"></div>
        <div class="line line2"></div>
    </button>
    </nav>
    <script src="./script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Here's my CSS code

@import url('https://fonts.googleapis.com/css?family=Ubuntu');


*{
    box-sizing: border-box;
}

body {
    background-color: #d8fcc9;
    background-image: linear-gradient(to bottom, #f1d558 0%, #d8fcc9 50%, #f734dd 50%, #0287af 100% );
    font-family:'Ubuntu', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

nav {
    background-color: #fff;
    padding: 20px;
    width: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    box-shadow:0 2px 5px rgba(0, 0, 0, 0.3);
    transition: width 0.6s linear;
}

nav.active {
    width: 350px;
}

nav ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 0;
    transition: width 0.6s linear;
}

nav.active ul {
    width: 100%;
}

nav ul li {
    transform: rotate(0deg);
    opacity: 0;
    transition: transform 0.6s linear, opacity 0.6s linear;
}

nav.active ul li {
    opacity: 1;
    transform: rotateY(360deg);
}

nav ul a {
    position: relative;
    color: #000;
    text-decoration: none;
    margin: 0 10px;
}

.icon {
    background-color: #fff;
    border: 0;
    cursor: pointer;
    padding: 0;
    position: relative;
    height: 30px;
    width: 30px;
}

.icon:focus {
    outline: 0;
}

.icon .line {
    background-color: #5290f9;
    height: 2px;
    width: 20px;
    position: absolute;
    top: 10px;
    left: 5px;
    transition: transform 0.6s linear;
}

.icon .line2 {
    top: auto;
    bottom: 10px;
}

nav.active .icon .line1 {
    transform: rotate(-765deg) translateY(5.5px);
}

nav.active .icon .line2 {
    transform: rotate(765deg) translateY(-5.5px);
}
Enter fullscreen mode Exit fullscreen mode

Here's My JAVASCRIPT code

const toggle = document.getElementById('toggle')
const nav= document.getElementById('nav')

toggle.addEventListener('click', () => nav.classList.toggle('active'))
Enter fullscreen mode Exit fullscreen mode

Here's Ouput

Top comments (2)

Collapse
 
commdao profile image
commdao

Looks pretty clean! Are those your favorite colors?

Collapse
 
ahtshamajus profile image
Ahtsham Ajus

yes