Double Navigation Blocks

Main >> 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 on the page you want to have double navigation blocks.
<style>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;}</style> <style>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;}</style>

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.vejc.piczo.com www.vejc.piczo.com www.vejc.piczo.com www.vejc.piczo.com

Copyright (C) 2007-2008 vejc-design.com. All rights reserved.
WP | ONE | GA | PB | CC

Advertising

Want to be here?

Top Affiliates

Jessica	Jabed
Fatima	Vicky
Gunnstein	Kristin
Anna	Jack
Lise	Tom

MORE?

the owner

Vibeke. 20 years old. February 23. Norway. Asker. green eyes. brown hair. soccer player.
Loves: Jan Christopher. kebab. friends. Dolly+Ferdinand. Kumsen. money. pizza. snowboard. my green car. surprises. candy. coca cola. LOST. Prison Break. Ugly Betty. sun. Nickelback.
Hates: arrogant/fake people. school. toes. rain. stealers/copiers. homework. teachers.

MORE?

Calendar

September 2008

M	T	W	T	F	S	S
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Domain

Owner: Vibeke
Host: one
Site name: vejc-design.com
Online since: 4. October '07
Hits:
Online: Online
Last updated: 7. September '08

MORE?

Layout

Layout up since September 4. It was made by Vibeke in Paint Shop Pro 9. Featuring Rachel Bilson. Fonts used: Ambrosia.

link me

MORE?

Updates

September 7

24 PNG's

September 4

Frontpage

Wordpress

8 tutorials

8 PNG's

Icon challenge #6

Forum

Ads