Let’s create from from scratch, a Simple Dropdown Menu Bar using just HTML & CSS, step-by-step from scratch!
VIDEO
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>
Enter fullscreen mode
Exit fullscreen mode
@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 ;
}
}
Enter fullscreen mode
Exit fullscreen mode
Top comments (2)
merci
De rien.
Je suis heureux que vous ayez aimé.