Navigation Block

"Navigation Blocks" is sort of a link-effect. This code is not easy, so read the tutorial carefully. I will try to explain as good as I can. I have put out different types of the code. You can change the settings in the code so it fits your site better. I suggest you try different things with the code on your own, this way you learn how the code work and eventually you'll get better in HTML. Navigation block is actually a part of CSS. Just paste it in your CSS code between your style tags and it will be much easier to update.

Step #1: The first thing you have to do is copy the code under and paste it into a HTML-box on the page you want to have the navigation blocks. In this code you can choose the colours and how you want the links to look when you put the mouse over.
<style>a.box, a.box:link, a.box:active, a.box:visited { text-decoration: none; font-family: verdana; font-weight:normal; font-size:9px; line-height:13px; color: #ffffff; padding: 1px; display:block; letter-spacing:0px; border-bottom: 1px solid #505050; border-left: 0px solid #707070; padding: 0px; text-align: right; background: #606060; text-transform: none; } a.box:hover { text-decoration: none; font-family: verdana; font-weight:bold; font-size:9px; line-height:13px; color: #000; border-bottom: 1px solid #505050; border-left: 0px solid #808080; background: #606060; letter-spacing:0px; display:block; text-transform: none; text-align: right; </style>

Step #2: Then you have to change all the links you want the code to work on. Use the code under instead of the link-code you already have: <a href="URL" class="box">Page Name</a>

Step #3: Now you're done. And you can test your new link-effect. If you want other colours or anything else I suggest you try to change some parts of the code and see how it looks. You learn a lot by doing this.

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