block menu
ever see those really neat box menus with the cool hovers? how do they get their links to do that? well, this tutorial
will show you a quick, easy way to make block menus that you'll enjoy.
css
It's not as hard as it looks (or as hard as I made it the first time around). All it takes is some CSS knowledge and
a few new classes in your stylesheet and you're ready to go:
We are going to call the block menu .nav in the stylesheet, so create a new class in your CSS stylesheet or code
called nav and begin to code it as an a (link) class like so:
<![CDATA[
a.nav:link, a.nav:active, a.nav:visited
]]>
these classes are for the link while it's a link, an active link, and a visited link, or what i like to call "resting
positions" for the link. now open up your brackets and begin defining colors and styles:
a.nav:link, a.nav:active, a.nav:visited
{font-size: 14px;
font-weight: normal;
color: #ffffff;
background-color: #000000;
display: block;
padding: 2px;
line-height: 11px;
margin-top: 1px;}
the emphasis on this code, the very basis of its existence is in the display: block line. that is its defining
attribute and what makes it so special. none of the other lines in the code save for the class line itself is essential.
now, define the style of the link at hover position like so:
<![CDATA[
a.nav:hover
{font-size: 14px;
font-weight: normal;
color: #000000;
background-color: #ffffff;
display: block; }
]]>
and that finishes the stylesheet half of the coding. to get these classes to display on your site, define your link
as a .nav class:
<a href="link.htm" class="nav">link</a>
And that's it! Rinse and repeat for your entire menu. Here's a demo:
|