Home > Article > Web Front-end > How to create a vertical navigation bar using HTML and CSS?
How to create a vertical navigation bar using HTML and CSS?
- WBOYforward
- 2023-09-24 19:49:031607browse
The navigation bar is a graphical feature that allows users to navigate a website or application. It is usually presented as a list of links at the top or side of the screen and helps users navigate to various areas or pages within the website. HTML and CSS can be used to build horizontal or vertical navigation bars.
HTML is used to specify the structure and content of the navigation bar, while CSS is used to design and make the navigation bar look attractive. You can improve the overall user experience and make it easier for users to find what they're looking for on your site by adding a navigation bar.
method
There are many ways to build a navigation bar using HTML and CSS, some of them are as follows -
Use unordered list (UL)
Use navigation tags
Now let us understand each method in detail with examples.
Use unordered list (UL)
The first way to build a vertical navigation bar using HTML and CSS is to use an unordered list (UL). You can make a navigation bar in HTML using Unordered Lists (UL) and List Items (LI) and decorating them with CSS.
Example
The following is an example of creating a vertical navigation bar using an unordered list (UL) in HTML and CSS.
<!DOCTYPE html>
<html>
<head>
<style>
.navbar {
background-color: #333;
width: 200px;
height: 100%;
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
.navbar li {
display: block;
}
.navbar a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover {
background-color: #111;
}
</style>
</head>
<body>
<div class="navbar">
<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>
</div>
</body>
</html>
Use navigation tags
The second way to build a vertical navigation bar using HTML and CSS is to use navigation tags. HTML5 adds the
Example
The following is an example of creating a vertical navigation bar using navigation tags in HTML and CSS.
<!DOCTYPE html>
<html>
<head>
<style>
nav {
width: 200px;
height: 100%;
background-color: #333;
float: left;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: block;
}
a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
a:hover {
background-color: #111;
}
</style>
</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="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
in conclusion
Creating a vertical navigation bar using HTML and CSS is a simple process that can be done in a variety of ways. The most common method is to use an unordered list (
- ) or
The above is the detailed content of How to create a vertical navigation bar using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!