CSS Navigation Bar
A navigation bar (navbar) is a crucial element in web design that helps users navigate through your website. In this chapter, we will cover how to create a basic navigation bar using HTML and CSS.
1. Basic Navigation Bar
To create a basic navigation bar, you need to use a combination of HTML for the structure and CSS for styling.
Example:
<!-- HTML -->
<div class="navbar">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<!-- CSS -->
<style>
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #4caf50;
color: white;
}
</style>
2. Horizontal Navigation Bar
Creating a horizontal navigation bar involves setting the display property to inline-block and floating the links to the left.
Example:
<!-- HTML -->
<div class="navbar">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<!-- CSS -->
<style>
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #4caf50;
color: white;
}
</style>
3. Vertical Navigation Bar
A vertical navigation bar can be created by not floating the links and setting the width of the container.
Example:
<!-- HTML -->
<div class="navbar vertical">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<!-- CSS -->
<style>
.navbar.vertical {
width: 200px;
}
.navbar.vertical a {
float: none;
display: block;
}
</style>
4. Responsive Navigation Bar
To make the navigation bar responsive, use media queries to adjust the layout based on the screen size.
Example:
<!-- HTML -->
<div class="navbar">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
</div>
<!-- CSS -->
<style>
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #ddd;
color: black;
}
.navbar a.active {
background-color: #4caf50;
color: white;
}
@media screen and (max-width: 600px) {
.navbar a {
float: none;
width: 100%;
}
}
</style>
Conclusion
Creating a navigation bar with CSS involves understanding how to use floats, inline-block elements, and media queries. By mastering these techniques, you can create responsive and visually appealing navigation bars for your website.