Vertical Navigation Menu
A vertical navigation menu is a link menu in a sort of brick/block format. The links are placed under each other. Here is a preview of what we will accomplish:
Here is the CSS basis for our menu:
a.menu, a.menu:link {
text-decoration: none;
display:block;
}
a.menu:hover {
propeties go here
}
Now I'll add some properties for how the navigation menu should look like when you don't hover over it (the top part of our CSS).
a.menu, a.menu:link {
text-decoration: none;
display:block;
font: 8pt Arial, sans-serif;
color:#000;
background:#C4E882;
padding:8px;
border-left:10px solid #7C41A5;
text-align:left;
}
a.menu:hover {
propeties go here
}
Now I'll add some properties for how the link should look like when we do hover over it (the bottom part of our CSS). A few things we want to change are: the colour of the text, the background of the link, the colour of the border and finally making the link shift to the side.
a.menu, a.menu:link {
text-decoration: none;
display:block;
font: 8pt Arial, sans-serif;
color:#000;
background:#C4E882;
padding:8px;
border-left:10px solid #7C41A5;
text-align:left;
}
a.menu:hover {
color:#fff;
border-left:10px solid #C4E882;
background: #A5C635;
padding-left:20px;
}
To implement the code into your navigation links we put a 'class' between the link's code, like so:
<a href="URL" class="menu">about</a><br>
And there we have it, an easy-to-use navigation menu. Have some fun altering the figures and the colours of the menu!
<a href="URL" class="menu">downloads</a><br>
<a href="URL" class="menu">articles</a><br>
<a href="URL" class="menu">games</a><br>
<a href="URL" class="menu">home</a>