×
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
2321    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.
Sri Sri Ramakrishna Paramahamsa
Have love for everyone, no one is other than you.
Sri Sri Ramakrishna Paramahamsa
2123
44.94
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     36731
01/01/2018     34923
28/06/2017     32403
02/08/2017     30468
25/06/2018     30213
15/05/2017     25401
01/08/2017     24701
06/07/2017     24612
14/07/2017     20225
21/04/2018     19839
softetechnologies