🎥Simple Dropdown Menu Bar | HTML & CSS🙌

#html #css #beginners #webdev

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;
    }
}

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More