Navigation Bars

fleurchild.com > Resources > Tutorials > Navigation Bars

Vertical Navigation Bars

Copy this code onto your CSS:
a.nav, a.nav:active, a.nav:link, a.nav:visited { display:block; font-family:FONT NAME; font-size:NUMBERpx; font-weight: normal; letter-spacing:NUMBERpx; color:HEX CODE (THIS IS THE FONT COLOUR); font-style:CHOOSE EITHER ITALIC OR BOLD OR NONE; text-align:CHOOSE EITHER LEFT OR RIGHT OR CENTER; letter-spacing:NUMBERpx; height:NUMBERpx; width:NUMBERpx; background-color:HEX CODE; margin-top:0px; margin-bottom:0px; } a.nav:hover { display:block; font-family:FONT NAME; font-size:NUMBERpx; font-weight: normal; letter-spacing:NUMBERpx; color:HEX CODE (THIS IS THE FONT COLOUR); font-style:CHOOSE EITHER ITALIC OR BOLD OR NONE; text-align:CHOOSE EITHER LEFT OR RIGHT OR CENTER; letter-spacing:NUMBERpx; height:NUMBERpx; width:NUMBERpx; background-color:HEX CODE; margin-top:0px; margin-bottom:0px; }
The first set of codes is what the nav bar looks when it is not hovered. The second set of codes is what the nav bar looks when it is hovered. When you want the nav bar to appear on your page copy the following code. Class="nav" defines the navigation bar, so do not erase it from the link. Without it, your link would appear as normal text link
<a href="LINK HERE" class="nav">LINK NAME HERE</a>

Horizontal Navigation Bars

Coming soon!

Welcome to fleurchild.com, Julia's little corner of the webernet. Be sure to check out the many high-quality resources the site has made availible for you. If you have a request of any kind, don't be afraid to from me a message in the blog. Back to the Top.