CSS Navbar
CSS Navbar
A CSS navbar (navigation bar) is a horizontal or vertical menu that provides navigation links for a website. A well-designed navbar is essential for user experience and SEO because it helps users navigate easily and allows search engines to crawl important pages. Below is an explanation of how to create a simple, SEO-friendly CSS navbar.
Below is a detailed explanation of various types of CSS navigation bars (navbars) along with examples. These examples use generic code, ensuring no copyrighted content is included.
1. Horizontal Navbar
A horizontal navbar places navigation links side by side, forming a horizontal row.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Topfreecourse Horizontal Navbar</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.navbar {
display: flex;
background-color: #333;
padding: 10px;
}
.navbar a {
color: white;
text-decoration: none;
padding: 10px 15px;
}
.navbar a:hover {
background-color: #575757;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</body>
</html>
2. Vertical Navbar
A vertical navbar stacks navigation links on top of each other.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Topfreecourse Vertical Navbar</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.navbar {
width: 200px;
background-color: #333;
height: 100vh;
display: flex;
flex-direction: column;
}
.navbar a {
color: white;
text-decoration: none;
padding: 15px;
text-align: center;
}
.navbar a:hover {
background-color: #575757;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
</body>
</html>
3. Fixed Navbar
A fixed navbar stays at the top of the page when the user scrolls.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Topfreecourse Fixed Navbar</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.navbar {
position: fixed;
top: 0;
width: 100%;
background-color: #333;
display: flex;
padding: 10px;
}
.navbar a {
color: white;
text-decoration: none;
padding: 10px 15px;
}
.navbar a:hover {
background-color: #575757;
}
.content {
margin-top: 50px;
padding: 20px;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
<div class="content">
<p>Scroll down to see the fixed navbar in action.</p>
<p>Content goes here...</p>
</div>
</body>
</html>
4. Responsive Navbar
A responsive navbar adjusts its layout for different screen sizes, often collapsing into a "hamburger menu" on smaller screens.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Topfreecourse Responsive Navbar</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.navbar {
display: flex;
background-color: #333;
padding: 10px;
}
.navbar a {
color: white;
text-decoration: none;
padding: 10px 15px;
}
.navbar a:hover {
background-color: #575757;
}
.hamburger {
display: none;
cursor: pointer;
color: white;
font-size: 20px;
}
@media (max-width: 600px) {
.navbar {
flex-direction: column;
align-items: flex-start;
}
.navbar a {
display: none;
width: 100%;
}
.navbar a.active {
display: block;
}
.hamburger {
display: block;
}
}
</style>
</head>
<body>
<div class="navbar">
<span class="hamburger" onclick="toggleMenu()">☰</span>
<a href="#" class="active">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</div>
<script>
function toggleMenu() {
const links = document.querySelectorAll('.navbar a');
links.forEach(link => link.classList.toggle('active'));
}
</script>
</body>
</html>
5. Dropdown Navbar
A dropdown navbar includes menus that expand when hovered or clicked.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Topfreecourse Dropdown Navbar</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.navbar {
display: flex;
background-color: #333;
padding: 10px;
}
.navbar a {
color: white;
text-decoration: none;
padding: 10px 15px;
position: relative;
}
.navbar a:hover {
background-color: #575757;
}
.dropdown {
position: relative;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #575757;
top: 100%;
left: 0;
}
.dropdown-content a {
display: block;
padding:
10px 15px;
text-decoration: none;
color: white;
}
.dropdown-content a:hover {
background-color: #777;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="navbar">
<a href="#">Home</a>
<div class="dropdown">
<a href="#">Services</a>
<div class="dropdown-content">
<a href="#">Web Development</a>
<a href="#">App Development</a>
<a href="#">SEO Services</a>
</div>
</div>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</body>
</html>