Double Navigation Block

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.

online
Back | Refresh | Forward
© 2008 rockdonut.heartlesswind.com