Responsive Animated Navigation Menu Bar using HTML & CSS

Responsive Animated Navigation Menu Bar using HTML & CSS


Hello developers, today in this blog you'll learn how to create a Responsive Animated Navigation Menu Bar using HTML & CSS.

The Menu Bar or Navigation Bar (Navbar) is significant for any website. Many websites have a responsive navbar. The navigation bar aims to directly redirect into the actual page by clicking on the hyperlinks they have. The navigation bar should perfectly fit all screen devices.

In this blog (Responsive Animated Navigation Menu Bar) the navigation menu is present at the top where the brand and some of the hyperlinks exist which are named as Dashboard, Project, and Posts with its icons respectively. The hover effect has been used in every hyperlink. While hovering over the hyperlink, the background color of the hyperlink changes.

When this page is viewed on a smaller screen all hyperlinks disappear except the brand and horizontal bar that appears on the top right side of the web page. Click the bar to see all the hyperlinks, that smoothly slide from top-right as a sidebar. CSS media query property has been used to make the page responsive.

The source code of this responsive animated navigation menu bar is given below, if you want the source code of this program, you can copy it. You can use this responsive animated navigation menu bar code with your creativity and can take this project to the next level.

Responsive Animated Navigation Menu Bar [Source Code]

To make this webpage, you would like to make two files: an HTML file and a CSS file. First, create an HTML file with the name of index.html and remember, you've to make a file with a .html extension.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Animated navbar || Learning robo</title> <link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <header> <div class="logo"> <i class="fa fa-leaf"></i> </div> <input type="checkbox" class="toggle" id="nav-toggle"> <label for="nav-toggle" id="nav-toggle-label"> <div class="bar"></div> <div class="bar"></div> <div class="bar"></div> </label> <nav> <ul> <li> <a href="#"><i class="fa fa-home"></i>Dashboard</a> </li> <li> <a href="#"><i class="fa fa-edit"></i>Projects</a> </li> <li> <a href="#"><i class="fa fa-envelope-open"></i>Posts</a> </li> </ul> </nav> </header> <main> Make viewport smaller and see what happens to the navbar.<br><br> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </main> </body> </html>
CSS provides style to an HTML page. To form the page attractive and page responsive create a CSS file with the name style.css and remember that you've got to make a file with a .css extension.


:root {
    --fg-color: rgba(255, 255, 255, 0.9);
    --bg-color: #12192c;
    --highlight-primary: #FBAB7E;
    --gradient: 
    linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);  
    --nav-height: 3rem;
    --transition: 250ms ease-out;  
    --transition-long: 500ms ease-out; 
  }
  html {
    font-family: "Nunito", sans-serif;
    font-size: 18px;
    font-weight: 100;
  }
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  body {
    display: flex;
    justify-content: center;
    padding-top: var(--nav-height);
    min-height: 100vh;
    background-color: #FBAB7E;
    background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
    color: var(--fg-color);
  }
  main {
    display: grid;
    place-content: flex-start center;
    padding: 3rem;
  }
  .artwork {
    width: 40vmin;
    filter: grayscale(1) opacity(0.2);
  }
  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-height);
    font-size: 1.5rem;
    background: var(--bg-color);
    color: var(--fg-color);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    box-shadow: -2px 2px 8px 0px rgb(0 0 0 / 80%);
    border-bottom: 1px solid var(--highlight-primary);
    z-index: 1;
  }
  .logo {
    display: grid;
    place-content: center;
    padding: 0rem 1rem;
    color: var(--highlight-primary);
  }
  .logo > i {
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    padding: 0.25rem;
    background: var(--highlight-primary);
    color: var(--bg-color);
  }
  header ul {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-template-rows: 1fr;
    gap: 0.5rem;
    padding: 0rem 1.5rem;
    list-style-type: none;
  }
  header ul > li {
    display: grid;
    padding: 0.5rem;
  }
  header a {
    display: flex;
    align-items: center;
    padding: 0rem 1.5rem;
    border-radius: 0.25rem;
    color: var(--fg-color);
    background-color: rgba(0, 0, 0, 0.1);
    text-decoration: none;
    transition: background-color var(--transition);
  }
  header a > i {
    margin-right: 0.5rem;
    color: var(--highlight-primary);
    font-size: 1rem;
    transition: color var(--transition);
  }
  header a:hover {
    background-color: var(--highlight-primary);
  }
  header a:hover > i {
    color: var(--bg-color);
    transition: color var(--transition);
  }
  #nav-toggle-label {
    display: none;
    cursor: pointer;
  }
  #nav-toggle {
    display: none;
  }
  @media screen and (max-width: 768px) {
    header {
      justify-content: space-between;
      align-items: center;
    }
    header nav {
      position: fixed;
      top: 0;
      bottom: 0;
      width: 24rem;
      right: 0rem;
      padding-top: var(--nav-height);
      clip-path: circle(
          calc(var(--nav-height) / 3)
          at 
          calc(100% - var(--nav-height) / 2) 
          calc(0% + var(--nav-height) / 2)
      );
      background: var(--gradient);
      box-shadow: -2px 2px 8px 0px rgb(0 0 0 / 80%);
      transition: clip-path var(--transition-long), 
        background-color var(--transition-long);
    }
    header ul {
      grid-auto-flow: row;
      grid-template-columns: 1fr;
      grid-template-rows: none;
      grid-auto-rows: max-content;
      gap: 0.5rem;
      padding: 0;
    }
    header a {
      place-content: flex-start;
      padding: 0.5rem 1.5rem;
    }
    header a > i {
      color: var(--bg-color);
    }
    header a:hover {
      background-color: var(--bg-color);
    }
    header a:hover > i {
      color: var(--highlight-primary);
    }
    #nav-toggle:checked + * + nav {
      clip-path: circle(150vmax at 100% 0%);
      background-color: var(--bg-color);
    }
    #nav-toggle-label {
      --size: calc(var(--nav-height) / 3);
      --bar-height: 2px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex-basis: auto;
      width: var(--size);
      height: var(--size);
      margin-right: calc(var(--nav-height) / 3);
      z-index: 2;
    }
    #nav-toggle-label .bar {
      display: inline-block;
      height: var(--bar-height);
      width: 100%;
      background-color: var(--bg-color);
      transition: transform 250ms ease-out;
    }
    #nav-toggle:checked + #nav-toggle-label > .bar:nth-child(1) {
      transform: 
        translate(0, calc(var(--size) / 2 - var(--bar-height) / 2)) 
        rotate(225deg);
    }
    #nav-toggle:checked + #nav-toggle-label > .bar:nth-child(2) {
      transform: scaleX(0);
    }
    #nav-toggle:checked + #nav-toggle-label > .bar:nth-child(3) {
      transform: 
        translate(0, calc(-1 * var(--size) / 2 + var(--bar-height) / 2)) 
        rotate(135deg);
    }
  }
  .credit{
    text-align: center;
    color: #000;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  }
  .credit a{
    text-decoration: none;
    color:#000;
    font-weight: bold;
  } 
We hope you would like this Responsive Animated Navigation Menu Bar using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating this Responsive Animated Navigation Menu Bar using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome