Website Navigation Bar Using Flexbox. Today in this blog , we gonna learn about Website Navigation Bar Using Flexbox.
Website Navigation Bar Using Flexbox
Hi Friends!
Today in this blog, we gonna learn about Website Navigation Bar Using Flexbox. Button Border Animations, Button Neon Effects, and Button Hover Effects are one of the best attractive and clickable parts of the website. I already uploaded some Menu Hover effects if you're a beginner let's go and learn it.
This Website Navigation Bar is nice to see on websites. In the previous blog, we will learn about CSS Battery Animation if you're a beginner I will recommend to learn that battery animation first. If you've learned that and this blog will help you to learn about Website Navigation Bar Using Flexbox. In this blog, I will give my video tutorial and source codes to download. if you have any doubts ask me in the comment section.
HTML file
[
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu&display=swap" rel="stylesheet">
<title>Navigation Bar</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<nav>
<span>Navigation Bar</span>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
]
You can copy this HTML file. and paste it into your HTML file. Now you will learn it clearly. and don't forget to save the file with the extension .HTML . This extension is more important to create a website page.
CSS file
[
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Ubuntu', sans-serif;
}
body{
background-image: url(background.jpg);
background-repeat: no-repeat;
background-size: cover;
}
nav{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 20px 10px;
}
nav span{
font-size: 30px;
font-weight: bold;
color: lime;
margin: auto 20px;
text-shadow: 1px 1px 40px lime,
1px 1px 40px lime;
cursor: default;
}
ul{
display: flex;
justify-content: space-around;
align-items: center;
list-style: none;
}
ul li a{
position: relative;
margin: auto 30px;
padding: 5px 15px;
text-decoration: none;
font-size: 20px;
font-weight: 700;
color: white;
}
ul li a::after{
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 10%;
transition: 0.5s;
background-color: limegreen;
border-radius: 10px;
opacity: 0;
z-index: -1;
}
ul li a:hover::after{
width: 100%;
opacity: 1;
}
]
Secondly, you can copy this CSS file. and paste it into your CSS file. and remember the file extension called .CSS . This will help you to design your webpage. If you want more clarity on this topic you can watch my video tutorial and If you have any doubts ask me in the comment section.
Video Tutorial
Watch this video fully and learn the all Menu Hover effects to develop your skills. repeat the code for your practice this will help you to learn this Website Navigation Bar Using Flexbox and This video is also helpful to learn faster. The website Navigation Bar is an important part of websites. I hope this tutorial will be helpful for learning the Menu Hover effect for beginners. I will give you Source Code and you can download it.
COMMENTS