How to Create a Navigation Bar in HTML/CSS

Submitted by rinvizle on Monday, December 21, 2020 - 14:52.

This simple tutorial will teach you how to make a Navigation Bar through CSS script in horizontal and vertical postion. A navigation bar is a user interface element within a webpage that contains links to other sections of the website. In most cases, the navigation bar is part of the main website template, which means it is displayed on most, if not all, pages within the website. This means that no matter what page you are viewing, you can use the navigation bar to visit other sections of the website.

Sample Code

Creating Horizontal Navigation Bar

HTML:

  1. <h1>HORIZONTAL NAVIGATION BAR</h1>
  2. <nav class="navbar navbar-default " role="navigation">
  3.   <div class="container-fluid">
  4.     <div class="navbar-header">
  5. 	  	<div class="horizontal-menu">
  6.         <ul>
  7.             <li><a href="#" class="active">HOME</a></li>
  8.             <li><a href="#">ABOUT US</a></li>
  9.             <li><a href="#">LOGIN</a></li>
  10.         </ul>
  11.     </div>
  12.     </div>
  13.   </div>
  14. </nav>

CSS Script:

  1. /*Horizontal Navigation Bar*/
  2. /*Removing the list style of the list eg[Bullets] and adding some design*/
  3. .horizontal-menu ul {
  4.     list-style-type: none;
  5.     margin: 0;
  6.     padding: 0;
  7.     overflow: hidden;
  8.     background-color: #0018c3;
  9. }
  10. /* Navigation link Simple Default Design */
  11. .horizontal-menu li a {
  12.     display: block;
  13.     color: white;
  14.     text-align: center;
  15.     padding: 14px 16px;
  16.     text-decoration: none;
  17. }
  18. /* Navigation Link Design if active */
  19. .horizontal-menu .active {
  20. 	background-color: #1cbb09;
  21.     color: white;
  22. }
  23. /* Displaying the list items horizontally and adding border to the right serve as the divider of each items */
  24. .horizontal-menu li {
  25.     float: left;
  26.     border-right: 1px solid #bbb;
  27. }
  28. /*Removing the right border of the list last item*/
  29. .horizontal-menu li:last-child {
  30.     border-right: none;
  31. }
  32. /* Changing the background color of the link when hovered. */
  33. .horizontal-menu li a:hover {
  34.     background-color: #111;
  35. }

Result:

Result

Vertical Navigation Bar

HTML:

  1. <h1>VERTICAL NAVIGATION BAR</h1>
  2. <nav class="navbar navbar-default " role="navigation">
  3.   <div class="container-fluid">
  4.     <div class="navbar-header">
  5. 	  	<div class="vertical-menu">
  6.         <ul>
  7.             <li><a href="#">HOME</a></li>
  8.             <li><a href="#" class="active">ABOUT US</a></li>
  9.             <li><a href="#">LOGIN</a></li>
  10.         </ul>
  11.     </div>
  12.     </div>
  13.   </div>
  14. </nav>

CSS Script:

  1. /*Vertical Navigation Bar*/
  2. /*Removing the list style of the list eg[Bullets] and adding some design*/
  3. .vertical-menu ul {
  4.     list-style-type: none;
  5.     margin: 0;
  6.     padding: 0;
  7.     width: 200px;
  8.     background-color: #0018c3;
  9.     border: 1px solid #555;
  10. }
  11. /* Designing the link items */
  12. .vertical-menu li a {
  13.     display: block;
  14.     color: #fff;
  15.     padding: 8px 0 8px 16px;
  16.     text-decoration: none;
  17. }
  18. /* Changing the background and font color of the link when hovered. */
  19. .vertical-menu li a:hover {
  20.     background-color: #111;
  21. }
  22. /* Adding border bottom each list items as divider and aligning the text */
  23. .vertical-menu li {
  24.     text-align: center;
  25.     border-bottom: 1px solid #555;
  26. }
  27. /*Removing the right border of the list last item*/
  28. .vertical-menu li:last-child {
  29.     border-bottom: none;
  30. }
  31. /*Changing the background color of the active link item */
  32. .vertical-menu .active {
  33.     background-color: #1cbb09;
  34. }

Result:

Result

DEMO

But guys notice that developers often refer to the navigation bar as the "navbar". Just download the source code below and enjoy coding.

Thanks.

For More HTML/CSS Tutorial visit the page below:

Tags

Add new comment

About text formats
  • 7397 views