DEV Community

Cover image for Animated Navigation
Beginner Developer
Beginner Developer

Posted on • Originally published at

Animated Navigation

HTML and Javascript

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Animated Navigation</title>
    <nav id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact Us</a></li>
        <li><a href="#">Blog</a></li>
      <button class="icon" id="toggle">
        <div class="line line1"></div>
        <div class="line line2"></div>
        const toggle = document.getElementById('toggle')
        const nav = document.getElementById('nav')

        toggle.addEventListener('click', () => nav.classList.toggle('active'))

    <!-- Dribbble link: -->
Enter fullscreen mode Exit fullscreen mode


body {
    background: #9796f0;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to top, #fbc7d4, #9796f0);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to top, #fbc7d4, #9796f0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    height: 100vh;
    float: right;
    font-family: system-ui;

  nav {
    background-color: #fff;
    padding: 10px;
    width: 50px;
    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;
    overflow-x: hidden;
  } {
    width: 350px;
    padding: 20px

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

  nav ul li {
    transform: rotateY(0deg);
    opacity: 0;
    transition: transform 0.6s linear, opacity 0.6s linear;
  } 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;
    position: relative;

  .icon:focus {
    outline: 0;

  .icon .line {
    background-color: #5290f9;
    height: 2px;
    width: 30px;
    transition: transform 0.6s linear;

  .icon .line2 {
    margin-top: 10px;
  } .icon .line1 {
    transform: rotate(-765deg) translateY(5.5px);
  } .icon .line2 {
    transform: rotate(765deg) translateY(-5.5px);
    margin-top: 5px;
Enter fullscreen mode Exit fullscreen mode


Animated Navigation.

My Blog:- Beginner Developer Blog

Top comments (1)

johnkazer profile image
John Kazer

This may well be a great snippet but it really needs some explanatory text to show how and why it works, maybe provide some context about when and why to use or how it's better than alternatives.