Weekly Code Quickies

Create Amazing Web Dev Projects Without Using JavaScript

Listen Later

In this tutorial, we will create a responsive and animated navigation bar using HTML and CSS. This navigation bar will be mobile-friendly and will have a hamburger menu that transforms into a close icon when clicked.

HTML Structure

First, let’s look at the HTML structure of our navigation bar.

Animated Nav Bar

  • Home
  • About
  • Services
  • Contact

    • Explanation

    *

    : This is the container for our navigation bar.

    * : This checkbox will be used to toggle the visibility of the menu.

    * : This label acts as a button for the checkbox.

    *

    : These divs inside the label create the hamburger icon.

    *

      : This unordered list contains the navigation links.

      CSS Styling

      Now, let’s style our navigation bar using CSS.

      body {

    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    }
    nav#mobile-menu {
    background-color: #333;
    position: relative;
    }
    nav#mobile-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    display: none;
    }
    nav#mobile-menu ul li {
    display: block;
    }
    nav#mobile-menu ul li a {
    color: white;
    text-decoration: none;
    padding: 15px 20px;
    display: block;
    }
    nav#mobile-menu ul li a:hover {
    background-color: #555;
    }
    .menu-btn {
    display: block;
    cursor: pointer;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 15px;
    right: 20px;
    }
    .menu-btn div {
    width: 100%;
    height: 4px;
    background-color: black;
    margin: 6px 0;
    transition: 0.3s;
    }
    /* Alternative */
    .menu-btn {
    display: block;
    cursor: pointer;
    width: 30px;
    height: 30px;
    position: absolute;
    top: 15px;
    right: 20px;
    & div {
    width: 100%;
    height: 4px;
    background-color: white;
    margin: 6px 0;
    transition: 0.3s;
    }
    }
    /* ---------------------------------------- */
    #menu-toggle {
    display: none;
    }
    #menu-toggle:checked + .menu-btn div:nth-child(1) {
    transform: rotate(-45deg) translate(-9px, 5px);
    background-color: white;
    }
    #menu-toggle:checked + .menu-btn div:nth-child(2) {
    opacity: 0;
    }
    #menu-toggle:checked + .menu-btn div:nth-child(3) {
    transform: rotate(45deg) translate(-9px, -5px);
    background-color: white;
    }
    #menu-toggle:checked ~ ul {
    display: flex;
    }
    /* Alternative */
    #menu-toggle {
    display: none;
    &:checked + .menu-btn div:nth-child(1) {
    transform: rotate(-45deg) translate(-9px, 5px);
    }
    &:checked + .menu-btn div:nth-child(2) {
    opacity: 0;
    }
    &:checked + .menu-btn div:nth-child(3) {
    transform: rotate(45deg) translate(-9px, -5px);
    }
    &:checked ~ ul {
    display: flex;
    }
    }
    /* ---------------------------------------- */
    @media screen and (min-width: 768px) {
    nav#mobile-menu ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    }
    nav#mobile-menu ul li {
    display: inline-block;
    }
    nav#mobile-menu ul li a {
    padding: 15px 20px;
    }
    .menu-btn {
    display: none;
    }
    }
    /* Alternative */
    @media screen and (min-width: 768px) {
    nav#mobile-menu ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    & li {
    display: inline-block;
    & a {
    padding: 15px 20px;
    }
    }
    }
    .menu-btn {
    display: none;
    }
    }

    Explanation

    * body: Sets the font family, margin, and padding for the entire page.

    * nav#mobile-menu: Styles the navigation bar container with a background color and relative positioning.

    * nav#mobile-menu ul: Styles the unordered list inside the navigation bar. It hides the list by default and aligns the items in a column.

    * nav#mobile-menu ul li: Styles the list items to be displayed as blocks.

    * nav#mobile-menu ul li a: Styles the links inside the list items with color, padding, and display properties.

    * nav#mobile-menu ul li a:hover: Changes the background color of the links when hovered.

    * .menu-btn: Styles the hamburger menu button with dimensions, cursor, and positioning.

    * .menu-btn div: Styles the individual bars of the hamburger menu with dimensions, background color, margin, and transition.

    * #menu-toggle: Hides the checkbox input.

    * #menu-toggle:checked + .menu-btn div:nth-child(1): Rotates and changes the color of the first bar when the checkbox is checked.

    * #menu-toggle:checked + .menu-btn div:nth-child(2): Hides the second bar when the checkbox is checked.

    * #menu-toggle:checked + .menu-btn div:nth-child(3): Rotates and changes the color of the third bar when the checkbox is checked.

    * #menu-toggle:checked ~ ul: Displays the menu when the checkbox is checked.

    * @media screen and (min-width: 768px): Media query to style the navigation bar for larger screens. It displays the menu items in a row and hides the hamburger menu button.

    Conclusion

    With this HTML and CSS code, you have created a responsive and animated navigation bar. The hamburger menu transforms into a close icon when clicked, and the menu items are displayed in a column on smaller screens and in a row on larger screens. Feel free to customize the styles to match your website’s design.



    Get full access to Norbert’s Web Dev School at norbertbmwebdev.substack.com/subscribe
    ...more
    View all episodesView all episodes
    Download on the App Store
    Weekly Code QuickiesBy Norbert B.M.