Double Navigation Blocks

Main >> Content >> Tutorials >> CSS >> 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 in your CSS.

a.box:link, a.box:visited, a.box:active {
	text-decoration : none;
	color : #000000;
	font-size : 7pt;
	line-height: 10pt;
	font-family : verdana;
	border-bottom:1px solid #ffffff;
	border-top:0px solid white;
	background: #c0c0c0;
	display:block;
	border-left:0px #ffffff solid;}
}

a.box:hover {
	text-transform: none;
	style:none;
	background: url() no-repeat;
    background-color: #000000;
	padding: 0px 0px 0px 0px;
	color: #ffffff;
	border-bottom:1px solid white;
    border-top:0px solid white;
	display:block;
	border-left:0px #a5def2 solid;
}

a.nav:link, a.nav:visited, a.nav:active {
	text-decoration : none;
	color : #ffffff;
	font-size : 7pt;
	line-height: 10pt;
	font-family : verdana;
	border-bottom:1px solid #ffffff;
	border-top:0px solid white;
	background: #000000;
	display:block;
	border-left:0px #ffffff solid;}
}

a.nav:hover {
	text-transform: none;
	style:none;
	background: url() no-repeat;
    background-color: #ffffff;
	padding: 0px 0px 0px 0px;
	color: #000000;
	border-bottom:1px solid #ffffff;
    border-top:0px solid white;
	display:block;
	border-left:0px #a5def2 solid;
}

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:

<a href="PAGE URL" class="box">PAGENAME</a>

<a href="PAGE URL" class="nav">PAGENAME</a>

Step 3: You've probably used link codes before, so just paste the URL adress 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 colours 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 colour to be, in both hover and reguler. Then you can just play around with the different things and see how your navigation block ends up. Here's how mine looks:

www.justframeless.com www.justframeless.com www.justframeless.com www.justframeless.com