Double Navigation Blocks

Here's finally the tutorial on how to make the double navigation blocks, as you probably have seen on many different websites! It is quite challenging to do it the first times, but you'll learn how it works gradually!

Step 1: Start by copying the code under and paste it on the page you want to have double navigation blocks.

Step 2: In the code over, there is actually two codes. The first one is called class="box" (just like the regular navigation blocks), the second one is called class="nav", it is exactly the same code; I've only changed the names. So when you're going to use the link codes you have to switch between two different link codes:


Step 3: You've probably used link codes before, so just paste the URL address in the code where it says 'PAGEURL' and where it says 'PAGENAME' you just type in the name of the page the URL links to.

Step 4: After pasting in the last code, you can start changing the colors and settings in the first code. Where it says background: #000000; (or just background-color: #ffffff;) in all the four places you can change how you want the background color to be, in both hover and regular. Then you can just play around with the different things and see how your navigation block ends up. Here's how mine looks:
PAGENAME PAGENAME PAGENAME PAGENAME
If this helped, a link back is required.