Horizontal Navigation Bar Creation using CSS and HTML
13-05-2017    180 times
Horizontal Navigation Bar

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>

Tutorial at home

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>

Tutorial at home

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

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.
    Related Post
  Query About the post