Navigation Bars
Navigation Bars
Navigation bars are an important part of many websites and can be implemented in CSS in a variety of ways. Here’s an example of how to create a simple horizontal navigation bar using CSS:
HTML:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
CSS:
nav {
background-color: #333;
height: 50px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
In this example, we create a navigation bar using an HTML nav element and a ul list. We use CSS to style the navigation bar with a dark background color and a fixed height. We remove the default list style and margins from the ul element and set overflow: hidden to prevent the list items from wrapping.
We then use the float property to float each list item to the left. We style the links with a block display, white color, centered text alignment, and padding. We remove the default text decoration and add a hover effect to highlight the links when the mouse is over them.
This is a very basic example of a navigation bar in CSS, and there are many ways to customize and enhance this basic structure to create more complex and visually appealing navigation menus.