How to create a vertical navigation bar using HTML and CSS?-HTML Tutorial-php.cn

How to create a vertical navigation bar using HTML and CSS?

WBOY

Release： 2023-09-24 19:49:03

forward

1604 people have browsed it

How to create a vertical navigation bar using HTML and CSS?

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>

Copy after login

Use navigation tags

The second way to build a vertical navigation bar using HTML and CSS is to use navigation tags. HTML5 adds the

tag, which is specifically used for navigation. You can create a navigation bar using the

tag and style it using CSS.

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>

Copy after login

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 (

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!