Embark on a creative journey into web design as we guide you through the process of crafting a stylish and functional navigation bar using HTML and CSS. In this project, you’ll learn the art of creating an elegant and user-friendly navigation menu for your website.
Whether you’re a beginner seeking to understand web development or a designer looking to enhance your skills, this step-by-step guide will provide you with the fundamentals of HTML and CSS to build an impressive navigation bar. Join us in exploring the world of web navigation, where form meets function in an eye-catching display!
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple Menu Bar</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<nav>
<label for="" class="logo">Ideasorblogs.</label>
<ul>
<li><a href="#" class="active">Home</a></li>
<li><a href="#">Blogs</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About us</a></li>
</ul>
</nav>
</body>
</html>
Style.css
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
}
body {
background-image: url("bg.jpg");
background-repeat: no-repeat;
background-size: cover;
}
nav {
background-color: #333;
height: 80px;
padding: 0 5%;
}
label.logo {
color: #fff;
font-size: 35px;
font-weight: bold;
margin: 0 100px;
cursor: pointer;
line-height: 80px;
}
nav ul {
float: right;
margin-right: 40px;
}
nav ul li {
display: inline-block;
margin: 0 20px;
line-height: 80px;
}
nav ul li a {
color: #fff;
font-size: 18px;
padding: 7px;
text-align: center;
border-radius: 3px;
text-transform: uppercase;
position: relative;
transition: 0.8s;
}
nav ul li a::before {
position: absolute;
left: 0;
bottom: 0;
content: "";
width: 0;
height: 3px;
transition: 0.8s;
}
a:hover::before,
a.active::before {
content: "";
width: 100%;
height: 3px;
background-color: #fff;
}
a:hover,
a.active {
background-color: #666;
}
Publisher @ideasorblogs
Latest posts by Publisher (see all)
- Age calculator using Javascript, HTML & CSS - October 28, 2023
- Navigation bar using HTML & CSS - October 26, 2023
- Calculator using HTML, CSS & JS - October 26, 2023
