Lot of websites contain the vertical navigation bar, This type of navigation is very useful for the clients to visit the related links for the particular page
Below I given the codes download code and execute it yourself , I also given the demo page here check it out…
This is very simple but useful one.
index.html
<head>
<title>sidebar-with-header</title>
<style>
.avoid a{ text-decoration: none;
}
.avoid ul,
ul ul {
margin: 0;
padding: 0;
list-style: none;
}
#wrapper {
width: 220px;
margin: 100px auto;
font-size: 0.8125em;
font-size: 0.8125em;
}
.menu {
width: auto;
height: auto;
-webkit-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
-moz-box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
box-shadow: 0px 1px 3px 0px rgba(0,0,0,.73), 0px 0px 18px 0px rgba(0,0,0,.13);
}
.menu > li > a {
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
background-color: #e05543 !important;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-weight: 600;
color: #fff;
}
.menu ul li a {
background: #fff;
border-bottom: 1px solid #efeff0;
width: 100%;
height: 2.75em;
line-height: 2.75em;
text-indent: 2.75em;
display: block;
position: relative;
font-size: 0.923em;
font-weight: 400;
color: #878d95;
}
.menu ul li a:hover
{
background-color:#000000;
color:#fff;
}
.menu ul li:last-child a {
border-bottom: 1px solid #33373d;
}
</style>
</head>
<body>
<div id=”wrapper” class=”avoid”>
<ul class=”menu”>
<li class=”item1″><a href=”#”>Sports </a>
<ul>
<li class=”subitem1″><a href=”#”>Membership Option</a></li>
<li class=”subitem2″><a href=”#”>Member Benefits</a></li>
<li class=”subitem3″><a href=”#”>Our Instructors</a></li>
<li class=”subitem4″><a href=”#”>Class Shedule</a></li>
<li class=”subitem5″><a href=”#”>Gallery</a></li>
<li class=”subitem6″><a href=”#”>Videos</a></li>
</ul>
</li>
</ul>
<br><br>
<ul class=”menu”>
<li class=”item1″><a href=”#”>Quick Links</a>
<ul>
<li class=”subitem1″><a href=”#”>Membership Request Form</a></li>
<li class=”subitem2″><a href=”#”>Contact Us</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
change the colours and all according to your site.
I hope this post is helpful to you……
