CSS Navigation Bar
CSS-Navigation-Bar:
Creating a navigation bar in CSS involves styling a list of links (typically in an unordered list <ul>) to create a menu that users can navigate through. Here's a step-by-step guide on how to create a simple horizontal navigation bar using CSS:
HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Navigation Bar</title>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
CSS (styles.css):
<style>
/* Reset some default styles and style the body */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
/* Style the navigation bar */
nav {
background-color: #333;
}
/* Style the unordered list and remove list styling */
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden; /* Hides overflowing content */
}
/* Style list items (menu items) */
nav li {
float: left; /* Float the list items to create a horizontal menu */
}
/* Style the links */
nav a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change link color on hover */
nav a:hover {
background-color: #ddd;
color: black;
}
</style>
In this example:
We start with a basic HTML structure containing an unordered list inside a <nav> element. Each list item contains an anchor <a> element for a menu item.
We use CSS to remove default styles (e.g., bullet points) from the list and style the navigation bar background and text colors.
We use the float: left; property on list items to make them appear horizontally.
The links are styled with padding, colors, and text alignment. On hover, we change the background and text color to provide visual feedback to users.
