underline
phone number

A creative, friendly web design company based in Chelmsford, Essex

back light

Javascript / jQuery Menu Button Fade Effect

Many tutorials for fading buttons with Javascript can be quite long-winded, and when you’re on a bit of a deadline, 3 pages of instruction can be quite daunting! Not to mention the Photoshop tutorials & (often outdated) CSS methods explaining how the fade-in effect buttons are created too. If you like the fading buttons on this site, here’s how we did it..

home

This method uses a small, easily handled piece of Javascript and a Sprite Button method of creating – & getting the buttons to work – in Photoshop and CSS.

The actual creation of the buttons themselves is not something I will go into great detail on in this piece today.

Button Fade Javascript

Add the code below into the head of your HTML page.

Select Code
1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script src="scripts/fadingbuttons.js"></script>

The fadingbuttons.js can be called whatever you like as long as the name corresponds with the name of the file stored in your scripts folder.

Now create the fadingbuttons.js file with the below content and save it in a folder called scripts. The classes on line 2 (.about,.pricing, etc) are the triggers to make this piece of code kick in, so you will need to change these accordingly for your own site.

Select Code
1
2
3
4
5
6
7
8
9
10
$(document).ready(function() {
$('.static,.home,.about,.blog,.pricing,.email,.contact,.portfolio').append('').each(function () {
var $span = $('&gt; span.hover', this).css('opacity', 0);
$(this).hover(function () {
$span.stop().fadeTo(800, 1);
}, function () {
$span.stop().fadeTo(800, 0);
});
});
});

The scripts folder needs to be uploaded to your domain host to sit along with your page files (index.html etc.)

The jQuery source – “1.4.2.min.js” is called from http://ajax.googleapis.com – this is the engine that the piece of code above powers – it won’t work without it!

Play with the “fadeTo” numbers (I chose 800 for an effect that suited what I needed) to fine-tune your button fade effect.

The HTML

This is a section of the HTML code that utilises the Javascript to create the fade button effect.

Select Code
1
2
3
<a href="portfolio.html" class="portfolio"></a>
<a href="blog" class="blog"></a>
<a href="contact.html" class="contact"></a>

You will note that the classes relate directly to the aforementioned classes in the Javascript code. If these don’t match each other – the fade effect will not work.

Photoshop

The way the buttons work is like a kind of illusion – there is in fact, only one button for each menu button – not two. The hover effect is essentially just the hidden part of the button which in it’s normal state, only reveals the top half until it is hovered over. Think of it like an iceberg..

button about

Each individual menu item (“home” “about” etc) has a button that is equally split horizontally into two – with the top part being the dormant, or regular button, and the bottom part being the hover-over effect. Essentially, you create two buttons that sit on top of each other.

One crucial point to note is that the height of the combined button image must be an even number; this will be explained later.

The CSS

This is a sample of what I use for Fizz Web Design:

Select Code
1
2
3
4
.about { float: left; position:relative; display:inline; height: 38px; width: 160px;
background:url(images/button-about.jpg) no-repeat; background-position:0 0; cursor: pointer; }
.about span.hover { float: left; position: absolute; display: inline; height: 38px; width: 160px;
background: url(images/button-about.jpg) no-repeat; background-position: bottom; }

The height relates to exactly half the height of the image (so you now see why an even number for the total height is crucial), and the width relates to the width of the button image.

Very basically, What you are doing, is creating a letterbox on your web page with your width & height dimensions that then allows Javascript to control the position of the two-button-image that can be seen through this letterbox.

The “background-position” dictates which part of the image will be shown.

To help counteract that 3% or so that turn Javascript off, I also created a non-Javascript piece of CSS for each menu button and use this for the page the user is actually on. This just gives a visual guide to the user and makes the site more friendly to the Javascript avoider – you can see this in the menu above, where “blog” is in orange lettering. So although the hover effect won’t work with Javascript turned off, this will.

The better and more creative you are in Photoshop, the more spectacular the final effects. In this site’s case, the orange sunburst design is in direct relation to the Javascript “fadeTo” attributes to create the illusion of a backlight.

Javascript / jQuery Fade Button In WordPress

You can easily use this in WordPress with just a simple tweak to the Javascript code; replace the “$” symbols with “jQuery” – this stops any Javascript conflict that will arise where the dollar symbol is used elsewhere in the many php files that keeps WordPress ticking along.

And that’s it, happy fading!

Share this..
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestEmail this to someoneShare on TumblrShare on StumbleUponShare on Reddit

Tags: , , ,


One Response to “Javascript / jQuery Menu Button Fade Effect”

  1. web designing covering many of the tools,skills,information.i really like this blog..

Leave a Reply

Please complete the sum so we know you\'re a human... *