🎥Simple Dropdown Menu Bar | HTML & CSS🙌

This content originally appeared on DEV Community and was authored by Robson Muniz

Let’s create from from scratch, a Simple Dropdown Menu Bar using just HTML & CSS, step-by-step from scratch!

Source 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">
  <title>Simple Dropdown Menu</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <nav class="nav">
    <ul class="nav__list">
      <li class="nav__listlogo"><img src="/img/logo.png" alt=""></li>
      <li class="nav__listitem"><a href="#">About
          <ul class="nav__listitemdrop">
            <li><a href="#">Our Team</a></li>
            <li><a href="#">Our Process</a></li>
            <li><a href="#">History</a></li>
          </ul>
        </a></li>
      <li class="nav__listitem"><a href="#">Work
          <ul class="nav__listitemdrop">
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Showcase</a></li>
          </ul>
        </a></li>
      <li class="nav__listitem"><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>

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

/*   color variables */
$clr-primary: #3700b3;
$clr-primary-dark: #283593;
$clr-hover: #bb8cfc;
$clr-hover-darker: #6200b3;
$clr-gray300: #c5cae9;

/*   border radius */
$radius: 0.2rem;

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    height: 100vh;
    background: url(img/bg.jpg);
    background-size: cover;
    background-position: center;
    font-family: "Montserrat", sans-serif;
}

.nav {
    background-color: $clr-primary;
    position: fixed;
    width: 100vw;
    box-sizing: 0 0 10px $clr-gray300;

    &__list {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 2rem;
        margin: 0 2rem;

        &logo {
            list-style: none;
            margin-right: auto;
            cursor: pointer;

            img {
                width: 80px;
                height: auto;
                padding: 3px;
            }
        }
        &item {
            list-style: none;
            font-weight: bold;
            position: relative;
            padding: 1.5rem 1rem;
            cursor: pointer;

            &::after {
                content: "";
                width: 0;
                height: .3rem;
                border-radius: $radius;
                position: absolute;
                left: 1rem;
                bottom: .8rem;
                background-color: $clr-hover;
                transition: width 200ms ease-in-out;
            }

            &:hover::after,
            &:focus::after {
                width: 70%;
            }

            &:hover ul,
            &:focus ul {
                opacity: 1;
                visibility: visible;
            }

            &drop {
                position: absolute;
                top: 4rem;
                left: -1rem;
                box-shadow: 0 0 5px $clr-gray300;
                background-color: $clr-primary-dark;
                border-radius: $radius;
                width: 12rem;
                padding: .75rem;
                display: flex;
                flex-direction: column;
                gap: .5rem;
                opacity: 0;
                visibility: hidden;
                transition: opacity 200ms ease-in-out;

                li {
                    list-style: none;
                    padding: .5rem 1rem;
                    border-radius: $radius;
                    transition: background-color 200ms ease-in-out;

                    &:hover,
                    &:focus {
                        background-color: $clr-hover;
                    }
                }
            }
        }
    }

    a {
        color: #fff;
        text-decoration: none;
    }
}

This content originally appeared on DEV Community and was authored by Robson Muniz

Print Share Comment Cite Upload Translate Updates

APA

Robson Muniz | Sciencx (2021-11-27T13:06:28+00:00) 🎥Simple Dropdown Menu Bar | HTML & CSS🙌. Retrieved from https://www.scien.cx/2021/11/27/%f0%9f%8e%a5simple-dropdown-menu-bar-html-css%f0%9f%99%8c/

MLA

" » 🎥Simple Dropdown Menu Bar | HTML & CSS🙌." Robson Muniz | Sciencx - Saturday November 27, 2021, https://www.scien.cx/2021/11/27/%f0%9f%8e%a5simple-dropdown-menu-bar-html-css%f0%9f%99%8c/

HARVARD

Robson Muniz | Sciencx Saturday November 27, 2021 » 🎥Simple Dropdown Menu Bar | HTML & CSS🙌., viewed ,<https://www.scien.cx/2021/11/27/%f0%9f%8e%a5simple-dropdown-menu-bar-html-css%f0%9f%99%8c/>

VANCOUVER

Robson Muniz | Sciencx - » 🎥Simple Dropdown Menu Bar | HTML & CSS🙌. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/27/%f0%9f%8e%a5simple-dropdown-menu-bar-html-css%f0%9f%99%8c/

CHICAGO

" » 🎥Simple Dropdown Menu Bar | HTML & CSS🙌." Robson Muniz | Sciencx - Accessed . https://www.scien.cx/2021/11/27/%f0%9f%8e%a5simple-dropdown-menu-bar-html-css%f0%9f%99%8c/

IEEE

" » 🎥Simple Dropdown Menu Bar | HTML & CSS🙌." Robson Muniz | Sciencx [Online]. Available: https://www.scien.cx/2021/11/27/%f0%9f%8e%a5simple-dropdown-menu-bar-html-css%f0%9f%99%8c/. [Accessed: ]

rf:citation

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Let’s create from from scratch, a Simple Dropdown Menu Bar using just HTML & CSS, step-by-step from scratch!

Source Code:

Related Posts