Navigation Bar = List of Links:

  • A navigation bar is mostly displayed on the top of the page in the form of a horizontal list of links. 
  • It can be placed below the logo or the header, but it should always be placed before the main content of the webpage. 
  • It is important for a website to have easy-to-use navigation. It plays an important role in the website as it allows the visitors to visit any section quickly.

❖ Horizontal Navigation Bar:

  • The horizontal navigation bar is the horizontal list of links, which is generally on the top of the page.
Example:
  •  In this example, we are adding the overflow: hidden property that prevents the li elements from going outside of the list, display: block property displays the links as the block elements and makes the entire link area clickable. 
  • We are also adding the float: left property, which uses float for getting the block elements to slide them next to each other.  If we want the full-width background color then we have to add the background-color property to <ul> rather than the <a> element.


<html>

<head>

<style>

ul

{

list-style-type: none;

margin: 0;

padding: 0px;

overflow: hidden;

background-color: lightgray;

}

li

{

float: left;

}

li a

{

display: block;

color: blue;

font-size:20px;

text-align: center;

padding: 10px 20px;

text-decoration: none;

}

.active

{

background-color: gray;

color: white;

}

li a:hover

{

background-color: orange;

color: white;

}

</style>

</head>

<body>

<ul>

<li><a class="active" href="#home">Home</a></li>

<li><a href="#">Java</a></li>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

</ul>

</body>

</html>


Vertical Navigation bar:


<html>

<head>

<style>

ul

{

list-style-type: none;

margin: 0;

padding: 0;

width: 200px;

background-color: lightblue;

}

li a

{

display: block;

color: blue;

font-size:20px;

padding: 8px 16px;

text-decoration: none;

border-bottom: 1px solid blue;

}

.active

{

background-color: orange;

color: white;

}

li a:hover

{

background-color: orange;

color: white;

}

</style>

</head>

<body>

<h2>Vertical Navigation Bar</h2>

<ul>

<li><a href="#" class = "active">Home</a></li>

<li><a href = "#">Java</a></li>

<li><a href = "#">CSS</a></li>

<li><a href = "#">HTML</a></li>

<li><a href = "#">Bootstrap</a></li>

</ul>

</body>

</html>