Vertical Navigation Bar Creation using CSS and HTML.
12-05-2017    717 times
Vertical Navigation Bar

Vertical 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 vertical 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

Simple HTML Menu
Simple HTML Menu

Vertical Navigation Bar 

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

<!DOCTYPE html>
<html>
<head><title>Vertical menu Demo</title>
<link href="menu.css" rel="stylesheet" type="text/css">
</head>
<body>
<ol class=”vmenu”>
<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

.vmenu
{
width:100px;
}
.vmenu li
{
display:block;
list-style:none;
padding:15px;
background-color:#ffffcc;
border-style:solid;
border-width:thin;
border-color:#ff0000;
}
.vmenu li a
{
text-decoration:none;
color:#ff0000;
}
.vmenu li a:hover
{
background-color:#000000;
text-transform:uppercase;
color:#ffffff;
}
.vmenu li:hover
{
background-color:#000000;
}

Vertical Menu With CSS
Vertical Menu With CSS
Tutorial at home
Tutorial at home

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