×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
CSS Button property applies color effect on button using CSS. Horizontal Navigation Bar Creation using CSS and HTML
Vertical Navigation Bar Creation using CSS and HTML. - CSS 3.0
1817    Arnab De    12/05/2017   

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>

softetechnologies

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>

softetechnologies

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
softetechnologies

Video Tutorials

CSS Button property applies color effect on button using CSS. Horizontal Navigation Bar Creation using CSS and HTML
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
Do not worry about your difficulties in Mathematics. I can assure you mine are still greater.
Albert Einstein
848
25.82
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     31589
28/06/2017     26611
02/08/2017     23339
26/05/2018     21534
15/05/2017     20225
06/07/2017     19014
01/08/2017     17468
21/04/2018     17238
01/07/2017     14867
25/04/2018     14110
softetechnologies