Learnerslesson
   JAVA   
  SPRING  
  SPRINGBOOT  
 HIBERNATE 
  HADOOP  
   HIVE   
   ALGORITHMS   
   PYTHON   
   GO   
   KOTLIN   
   C#   
   RUBY   
   C++   
   HTML   
   CSS   
   JAVA SCRIPT   
   JQUERY   
JAVA SPRING SPRINGBOOT HIBERNATE HADOOP HIVE ALGORITHMS PYTHON GO KOTLIN C# RUBY C++ HTML CSS JAVA SCRIPT JQUERY


❮❮ PREV NEXT ❯❯


CSS - Navbar


A Navbar or Navigation bar in CSS is usually used to navigate from one HTML page to another.


There are two types of Navbars those are widely used :


  1. Vertical Navbar

  2. Horizontal Navbar


Let us understand them in detail.


Vertical Navbar in CSS


Since, a Navbar in CSS is a list of links put together, we can have the list element(Or the <li> element) to represent a Navbar.


However, we have to apply CSS styles on the list elements to make it look like a visually appealing navbar.


Let us see it with the below example.


Example : 



<html>
<head>
<style>
	ul {
  		list-style-type: none;
  		padding: 0;
  		width: 180px;
  		background-color: LightGray;
	}

	li a {
  		display: block;
  		color: black;
  		padding: 12px 20px;
  		text-decoration: none;
	}

	li a.home {
  		background-color: Tomato;
  		color: white;
	}

	li a:hover {
  		background-color: Tomato;
  		color: white;
	}
</style>
</head>
<body>
	<ul>
  		<li><a class="home" href="#home">Home</a></li>
  		<li><a href="#services">Services</a></li>
  		<li><a href="#about">About</a></li>
  		<li><a href="#projects">Projects</a></li>
  		<li><a href="#contact">Contact</a></li>
	</ul>
</body>
</html>


Output :



 

So, in the above example, we have designed a vertical navbar using list elements(i.e. <li> elements).


<ul>
	<li><a class="home" href="#home">Home</a></li>
	<li><a href="#services">Services</a></li>
	<li><a href="#about">About</a></li>
	<li><a href="#projects">Projects</a></li>
	<li><a href="#contact">Contact</a></li>
</ul>

Then we have used the following CSS properties to apply styles on the list elements :


  1. The list elements represents black bullets by default.


    To get rid of that we have used list-style-type: none;. Similarly, we have used padding: 0; to avoid extra spaces provided by the list elements.


    ul {
	list-style-type: none;
	padding: 0;
	width: 180px;
	background-color: LightGray;
}

  2. To make the entire area of the list element clickable, we have used 'display: block;'.


    Without display: block;, only the texts in the list elements would be clickable. Also display: block; lets us define padding: 12px 20px;.


    The next property text-decoration: none; lets us get rid of the underline from the texts of the list elements.


    li a {
	display: block;
	color: black;
	padding: 12px 20px;
	text-decoration: none;
}

  3. Then for the list element with class 'home', 


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


    We have provided the background color and color in the CSS property.


    li a.home {
	background-color: Tomato;
	color: white;
}

  4. Finally, we have provided the background color and color in the CSS property when we hover over the '<li> element'.


Horizontal Navbar in CSS


Just like the vertical navbar, we can have a horizontal navbar with the CSS properties applied on the list elements.


Let us see it with the below example.


Example : 



<html>
<head>
<style>
	ul {
  		list-style-type: none;
  		padding: 0;
  		overflow: hidden;
  		background-color: LightGray;
	}
    
    li {
  		float: left;
	}

	li a {
  		display: block;
  		color: black;
  		padding: 20px;
  		text-decoration: none;
	}

	li a.home {
  		background-color: Tomato;
  		color: white;
	}

	li a:hover {
  		background-color: Tomato;
  		color: white;
	}
</style>
</head>
<body>
	<ul>
  		<li><a class="home" href="#home">Home</a></li>
  		<li><a href="#services">Services</a></li>
  		<li><a href="#about">About</a></li>
  		<li><a href="#projects">Projects</a></li>
  		<li><a href="#contact">Contact</a></li>
	</ul>
</body>
</html>


Output :



 

So, in the above example, we have designed a horizontal navbar using list elements(i.e. <li> elements).


<ul>
	<li><a class="home" href="#home">Home</a></li>
	<li><a href="#services">Services</a></li>
	<li><a href="#about">About</a></li>
	<li><a href="#projects">Projects</a></li>
	<li><a href="#contact">Contact</a></li>
</ul>

The CSS properties used in the above example are almost similar to the ones used in the Vertical Navbar example.


The only new CSS properties used are : 


li {
	float: left;
}

This lets all the <li> elements to be placed side by side resulting a horizontal navbar.


Similarly, if you want all the <li> elements to float towards the right, you can use float: right;.


li {
	float: right;
}

You can try it yourself and see how it works.


Separator for Horizontal Navbar in CSS


We can use the border-right property to draw a separator for the Horizontal Navbar in CSS.


Example : 



<html>
<head>
<style>
	ul {
  		list-style-type: none;
  		padding: 0;
  		overflow: hidden;
  		background-color: LightGray;
	}
    
    li {
  		float: left;
        border-right: 2px solid white;
	}

	li a {
  		display: block;
  		color: black;
  		padding: 20px;
  		text-decoration: none;
	}

	li a.home {
  		background-color: Tomato;
  		color: white;
	}

	li a:hover {
  		background-color: Tomato;
  		color: white;
	}
</style>
</head>
<body>
	<ul>
  		<li><a class="home" href="#home">Home</a></li>
  		<li><a href="#services">Services</a></li>
  		<li><a href="#about">About</a></li>
  		<li><a href="#projects">Projects</a></li>
  		<li><a href="#contact">Contact</a></li>
	</ul>
</body>
</html>


Output :



 

So, in the above example, we have used the border-right property to draw a separator for the Horizontal Navbar in CSS.


li {
	float: left;
	border-right: 2px solid white;
}

Rest of the code is exactly same as the Horizontal Navbar.



❮❮ PREV NEXT ❯❯