It show you how to incorporate the fade in, fade out effect into a working block style navigation. Some people had problems with fade in, fade out tutorial with the animation not stopping when you move your mouse over.
This has been fixed in this version and is 100% working with no glitches. You can download the source files for this tutorial for FREE using the button above. Right lets get started, the first thing we need to do is draft out our navigation in an HTML document, nothing major just something nice and simple. Heres an image of what were going to be creating.

 

Open a new photoshop document about 600×200 pixels fill your background with the color #ebebeb. Create a rectangle 600×94 pixels at the top of your canvas. (when pressing the rectangular marquee tool click “fixed size” under the style tab) Using the colors #ececec and #ffffff add a linear gradient to your rectangle. Then add a 1 pixel stroke using the color #c9c9c9.

Underneath your 1 pixel stroke add a 1 pixel white line spanning the entire width of your canvas. Underneath your white line add another rectangle this time 62 pixels in height and 600 pixels wide. Fill your rectangle with a linear gradient using the colors #eeeeee & #f6f6f6.

Now manually add the grey stroke and another 1 pixel white line at the bottom of your 2nd rectangle. Your image should now look like this.

Flattern your image and make a selection about 2 pixels wide and the whole height of your canvas then goto “image > crop” save your file as bg.png in a folder on your desktop called images. Next create a new canvas 2 pixels wide and 62 pixels in height. Zoom in then using the color #f5f5f5 create a 1pixel line all the way down on the left. Do the same for the right but use the color #dadada. Then at the very top just create a 1 pixel white line going across. Also save this in your images folder and name the file divider.png

You should now be set to create your HTML file. Open up dreamweaver and start a new HTML document, save the document straight away as index.html on your desktop. Open up notepad and save a blank file as styles.css. Also save this on your desktop. Download the latest jquery libary from the jquery website, save the file inside a folder called “js”. Open up the folder and rename the file to just “jquery.js”. In the code view of dreamweaver link your style sheet and jquery file.

view plaincopy to clipboardprint?

1. <link href="styles.css" rel="stylesheet" type="text/css" />
2. <script type="text/javascript" src="js/jquery.js">