Some of Our Sources
- BoingBoing
- Team Treehouse
- Joshua Blankenship
- Spoon Graphics
- Smashing Magazine
- Reencoded
- Android Dissected
- Android Headlines
- Daily Now
- Hashedout
Help Webnuz
Referal links:
November 27, 2021 01:06 pm GMT
Original Link: https://dev.to/robsonmuniz16/simple-dropdown-menu-bar-html-css-2bjo
Simple Dropdown Menu Bar | HTML & CSS
Lets 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; }}Original Link: https://dev.to/robsonmuniz16/simple-dropdown-menu-bar-html-css-2bjo
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To