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; } }
Top comments (2)
merci
De rien.
Je suis heureux que vous ayez aimé.