Making the horizontal menu vertical!

Hi all,

Today I'll show you how to make the horizontal menu we made earlier vertical.
If you didn't read my article on "How to make a horizontal menu" I recommend you do that first because I am going to cut through all the crap here since we need only a few adjustments in the original code.

So hopefully after this short article you can go from this:

• One
• Two
• Three
• Four
• Five

To this:

• One
• Two
• Three
• Four
• Five

Okay lets do it!
The first thing we need to do is change the id's of the div and the ul otherwise we might accidentally target the horizontal menu if you would use it on the same page.(like here) So from this:<div id="menu"> <ul id="hornav"> To this:<div id="vertmenu"> <ul id="vertnav">      

Styling the div
Since it's only used to make a nice contrasting background behind the menu we only need to adjust the width and height (in real life you probably don't want to set the margin like below) Code:

div#vertmenu{

width:300px; /* adjusted the width */

height:300px; /*adjusted the height to fit all elements */

}

Styling the ul
We are going to use the same trick with the border as we did with the horizontal menu. We need to close the top and the left side of the menu. Code:

ul#vertnav{ border-left:1px solid #fff; border-top:1px solid #fff; /* added this to close the top gap */ }

Styling the li Now this is the most important part! This is were we magically switch from a horizontal menu to a vertical menu. By removing display:inline; from the code the list is shown the normal way. Code:

#vertnav li{ /* display:inline; commented this line since we want a vertical menu */ }

Styling the a elements
As you might have noticed we added display:block to the <a> elements in the horizontal menu. this allows us to set a width and a height to it. We only need a width and remove the top border since we use it from <ul>.So here goes: Code:

#vertnav a{ width: 200px; /* adjusted the width */ }

And That's it, you know have a nice styled vertical menu with hover effect! Hopefully the above was fun helpful, and easy. Easy it should be as a follow up of the article on the horizontal menu. Wish you happy coding, and leave a comment if this was helpfull or if you have requests!

Cssfreakie

P.s. Blogspot, stop facking up my code ! sorry guys blogspot is adding and removing breaks