menu bar in hmtl and css || menu bar in html || menu bar js
Welcome to our educational YouTube channel! Here, you'll find comprehensive tutorials on creating menu bars using HTML, CSS, and JavaScript. Whether you're a beginner or looking to enhance your web development skills, you've come to the right place. Subscribe now to stay updated with our latest videos and become a menu bar pro!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Button nav-bar</title>
</head>
<body>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
CSS
body
{
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: lightyellow;
}
ul{
padding: 0;
list-style-type:none ;
}
a{
text-decoration: none;
color: black;
}
li{
font-size: 25px;
width: 8em;
height: 2em;
text-align: center;
line-height: 2em;
font-family: sans-serif;
text-transform: capitalize;
position: relative;
transition: 0.5s;
margin: 0.8em;
}
li::before,
li::after
{
content:'';
position: absolute;
width: 0.6em;
height: 0.6em;
background-color: gainsboro;
transition: 0.5s cubic-bezier(0.5, -0.5, 0.25, 1.5);
top: calc(50% - 0.6em / 2);
}
li::before{left: 0; z-index: -1;}
li::after{right: 0; z-index: -2;}
li:hover
{
color: white;
}
li:hover::before,
li:hover::after
{
width: 100%;
height: 100%;
border-radius: 0;
background-color: dodgerblue;
}
li:hover::before
{
top:0;
}
li:hover::after
{
right: -0.4em;
filter: brightness(0.8);
}
Just copy it on your project
And Don't forget to Subscribe To my youtube channel link
Subscribe me
Tags:
navbar
