Dear God, make me a bird so I can fly far, far far away from here... - Forrest Gump

SHAINA

22yo
college student, writer, reporter, artist, daughter, sister, aunt, friend, vampire, pirate, horror movie fan, fantasy movie fan, indie music fan, johnny depp fan, criss angel loyal, strawberry crush addict
>>>>> need more?

TWITTER

AFFILIATES

apply?

DISCLAIMER

Site content © 2008 and beyond Dare to Live Productions unless otherwise stated. For further site credits, click here.

How to code bar links

I'm sure you've seen navigation links where, instead of text, the link is displayed in a bar with a colored tip that changes on hover. Since these have become so popular, I have decided to provide a simple tutorial on how to code them.

Step One: Copy the following code into your stylesheet and edit the blue areas:
a.nav:link, a.nav:visited, a.nav:active {
font-size: number herept;
font-family: font type here;
font-weight: select from bold, normal or lighter;
line-height: this decides how big the bar behind the font will be. Take the font size into consideration here.;
color: hexidecimal code for the color of the FONT. DO NOT forget the # sign or it might not work in multiple browsers;
background-color: hexidecimal code for the color of the BAR;
cursor: ;
display: block;


text-align:select either right, center or left;
border-right: numberherepx solid #colorcodehere this is the settings of the colored end of the bar;
text-transform: choose from uppercase or lowercase;
margin: 1px;
padding: 0px;
text-decoration: none;
}

Step Two: Copy the code above again and paste under the code we just finished. We're going to make a small change with this code group though. At the beginning where it says a.nav:link, a.nav:visited, a.nav:active, delete and replace it with a.nav:hover.

Step 3: This part of the code will determine what the link bar looks like on hover. A few ideas:

• Change the placement of the text (make it jump to the center or the opposite side)
• Lighten, Darken or completely change the color of the bar
• Change the font size or color
• Lighten, Darken or completely change the colored end of the bar
• Make the text go from all caps to all small, or vice versa

In other words, customize it to fit your layout and have fun with it!

I hope you find this tutorial helpful! If I have forgotten anything or if you find a problem with the sample code, please feel free to contact me. Happy coding!