block menu with transition
this tutorial is an extension of the block menu tutorial, but with a neat little javascript hover to go along
with it for extra effect, and need i say, coolness. some of the coding is different, so pay attention.
javascript
we're going to start with the easiest part of this whole process, by copy/pasting this code at the top
of any/all pages you'd like to use this effect on:
<![CDATA[
<script type="text/javascript">
<!--
function lite(obj) {
if(document.all&&!window.opera) {
obj.filters.blendTrans.apply();
obj.filters.blendTrans.play();
}
}
-->
</script>
]]>
css
you are going to define an entire class of links to do the transition so it makes it easy to code and put into
a stylesheet. add these two classes to your stylesheet:
#list-menu a
{
display: block;
width: 100%;
background: #000000;
color: #ffffff;
font-size: 12px;
font-family: century gothic;
font-weight: normal;
filter:blendTrans(duration=0.5);
}
#list-menu a:hover
{
background-color:#ffffff;
color: #000000;
margin:0px;
}
The most important section is highlighted; the other parts of the code are not as important, and are not
essential like the highlighted portions are. When using filters, widths are essential, and if you are not
sure of the width, simply put 100%.
html
Now put your menu links in the div id list-menu and add the nifty little java code like so:
And that's it! Rinse and repeat for your entire menu. Here's a demo:
|