×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Vertical Navigation Bar Creation using CSS and HTML. Transparent Menu Creation & use of Icons from awesome Font
Horizontal Navigation Bar Creation using CSS and HTML - CSS 3.0
1314    Arnab De    13/05/2017

Horizontal Navigation Bar Creation using CSS

Navigation bar is a important part of 90% website. using this nav bar we can easily access the whole website easily. Navbar may create We can convert a normal list of HTML into an interactive navigation Bar using little bit CSS code. Here we demonstrate how can we create a simple horizontal menu.A simple HTML code to display a list in the browser

<!DOCTYPE html>
<html>
	<head>
		<title>Vertical menu Demo</title>
	</head>
	<body>
		<ol>
			<li><a href="#">Menu1</a></li>
			<li><a href="#">Menu2</a></li>
			<li><a href="#">Menu3</a></li>
			<li><a href="#">Menu4</a></li>
		</ol>
	</body>
</html>
softetechnologies

This code will generate the following output

Menu Without CSS
Menu Without CSS

 

Horizontal Navigation

Now for display a horizontal menu, we use the following code

<!DOCTYPE html>
<html>
	<head>
		<title>Horizontal menu Demo</title>
		<link href="menu.css" rel="stylesheet" type="text/css">
	</head>
	<body>
		<ol class=”hmenu”>
			<li><a href="#">Menu1</a></li>
			<li><a href="#">Menu2</a>
			</li><li><a href="#">Menu3</a></li>
			<li><a href="#">Menu4</a></li>
		</ol>
	</body>
</html>
softetechnologies

And write the following code in menu.css file

.hmenu{
      width: 99%;
      padding: 15px;
      margin-right: auto;
      margin-left: auto;
      background-color:#9CC;
      position: relative;
      left:-10px;
}
.hmenu li{
      display:inline;
      list-style:none;
      padding:15px;
      background-color:#9CC;
      margin-left:0px;
      left:-10px;
      font-weight:bold;
}
.hmenu li a{
      text-decoration:none;
      color:#FF0;
}
.hmenu li a:hover{
      background-color:#000000;
      color:#ffffff;
}
.hmenu li:hover{
		background-color:#000000;
}
Menu With CSS
Menu With CSS

Video Tutorials

Vertical Navigation Bar Creation using CSS and HTML. Transparent Menu Creation & use of Icons from awesome Font
softetechnologies
Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
Enter New Comment
Comment History
No Comment Found Yet.
Albert Einstein
I have no special talent. I am only passionately curious.
Albert Einstein
925
27.09
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     32016
28/06/2017     27107
02/08/2017     24056
26/05/2018     22400
15/05/2017     20704
06/07/2017     19660
01/08/2017     17964
21/04/2018     17537
01/07/2017     15044
25/04/2018     14306
softetechnologies