In this article, we will create simple vertical navigation bar for websites.
Suppose our website having following menus :
• HOME
• ANGULAR JS
• DOT NET
• HTML
• HISTORY
• ADVERTISE
• ABOUT US
• CONTACT
Sample Live Template of Menu
HTML Code for Vertical Navigation Bar
Provide link for each menu :
e.g. href="http://blog.shivajisoft.com/home"
<![CDATA[
<div id="vmenu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ANGULAR JS</a></li>
<li><a href="#">DOT NET</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">HISTORY</a></li>
<li><a href="#">ADVERTISE</a></li>
<li><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
]]>
CSS Code for Vertical Navigation Bar
<![CDATA[
<style>
div#vmenu
{
margin: 0;
padding: 0;
border: solid 1px #30c9e0;
background: lightslategray;
width: 10.5em;
}
div#vmenu ul
{
margin: 0;
padding: 0;
list-style: none;
}
div#vmenu ul li
{
margin: 0;
padding: 0;
list-style: none;
height: 30px;
}
div#vmenu ul a:link
{
margin: 0;
padding: .2em 0em .2em .4em;
text-decoration: none;
font-weight: bold;
font-size: medium;
background-color: #fcac3c;
color: #0059a0;
display: block;
}
div#vmenu ul a:active
{
margin: 0;
padding: .25em .5em .25em .5em;
text-decoration: none;
font-weight: bold;
font-size: medium;
background: #4d8cba;
color: #ffffff;
display: block;
}
div#vmenu ul a:visited
{
margin: 0;
padding: .25em .5em .25em .5em;
text-decoration: none;
font-weight: bold;
font-size: medium;
background: #4d8cba;
color: #ffffff;
display: block;
}
div#vmenu ul li a:hover
{
margin: 0;
padding: .2em .2em .2em .4em;
text-decoration: none;
font-weight: bold;
font-size: medium;
background-color: #30c9e0;
color: #ffffff;
display: block;
}
</style>
]]>
Conclusion :
I hope that this article would have helped you in creating Simple Vertical Navigation
Bar For Websites. Your feedback and constructive contributions are always
welcome.
No comments:
Post a Comment