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

WBOY
Release: 2023-09-24 19:49:03
forward
1616 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

Related labels:
source:tutorialspoint.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template