CSS Navbar
CSS Navbar
A CSS navbar is a navigational menu, arranged horizontally or vertically, that directs users to different sections of a website. A well-structured navbar enhances user navigation and SEO by guiding users and aiding search engines in indexing key pages. For a brief moment, here's a step-by-step guide to constructing a simple, SEO-optimized CSS navbar.
Here's an in-depth overview of different CSS navbar styles, complete with illustrative examples.The examples provided feature standard code, free from any copyrighted material.
1. Horizontal Navbar
A horizontal navbar arranges navigation links in a single line across the page.
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 displays navigation links in a column format.
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 remains visible at the top of the viewport while scrolling.
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 dynamically adapts to various screen sizes, commonly transforming into a collapsible menu on smaller devices.
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 features expandable menus that appear when users hover over or click a parent link.
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>