Need a WordPress Expert?

Hire me!

May27

Fisheye Menu Tutorial

by John Kolbert | Posted in: Tech Musings

Note: This post was originally published back 2007 on Simply-Basic.com (now defunct). I’ve gotten enough requests that I’ve resurrected it here in it’s entirety. -John 5/27/2009

I’ve always been a fan of Macintosh’s Dock. Something about that sleek mouseover effect gets me every time. Recently, I was working on a project that needed a minimally invasive similar effect on a website. During the course of getting it ready, I came across a number of scripts that attempted this very thing. Some of them were good, some weren’t. Fisheye Menu by Marc Grabanski is so easy to install that I thought I’d share it here.

The script is open source. All credit and blame go solely to Marc Grabanski. The only thing I’ve added is a single line of code that changes the mouse cursor to the “hand” mode on mouseover (to look like a link). The script’s mouseover effects aren’t the most spectacular, but they’re not bad. They are slightly choppy, but I believe they are good enough for a live website. Here I’ll give you examples of the script, tell you how to get it running on your website, and then let you decide if it’s any good. I’ve geared this guide towards beginners.

Fisheye Menu

Presented by John Kolbert

Coded by Marc Grabanski

URL: http://marcgrabanski.com/code/fisheye-menu/

fisheye

The Fisheye menu is a very easy script to implement. All you need is the javascript file, a CSS template, and your images. Begin by downloading the zip file. The only difference between the version presented here and the version that Marc created is that I added one simple line of javascript that changes the cursor to the “hand” mode on mouseover. You can see a live preview, minus this one change, by viewing the offical code page.

The Basics

Installation

Begin by uploading the javascript file, the CSS file, and your images to your web server. It is important that all of the images in the image folder remain in the same folder. Then, add the following code somewhere in between your <head></head>tags.

<script src="http://YourDomainHere/fisheye.js" type="text/javascript"></script>

Of course, you would need to change "http://YourDomainHere/..." with the location of each specific file. These lines of code link your page to the actual javascript code and the accompanied CSS file.

Now you can add the actual menu to your page. The code for your menu should follow the format below. I suggest you copy and paste the code and then adjust it to your needs.

<div>

<ul id="fisheye_menu">

<li><a href="#1"><img src="http://YourWebsite/icon.gif" alt="image description" /><span>Icon 1</span></a></li>

<li><a href="#2"><img src="http://YourWebsite/icon2.gif" alt="image description" /><span>Icon 2</span></a></li>

<li><a href="#3"><img src="http://YourWebsite/icon.gif" alt="image description" /><span>Icon 3</span></a></li>

<li><a href="#4"><img src="http://YourWebsite/icon2.gif" alt="image description" /><span>Icon 4</span></a></li>

<li><a href="#5"><img src="http://YourWebsite/icon.gif" alt="image description" /><span>Icon 5</span></a></li>

<li><a href="#6"><img src="http://YourWebsite/icon2.gif" alt="image description" /><span>Icon 6</span></a></li>

</ul>

</div>

Each <li></li> represents one icon in your menu dock. To change the link for each icon, replace the contents of the quotation marks in <a href=”#…”> with your desired URL. Also, make sure that your change <img src=”http://YourWebsite/icon…” alt=”" /> to reflect the actual location of your icon. Make sure you link to the large image, not the one labeled “_small”. I will explain the meaning of this below. To change the label that accompanies the icon on mouseover, simply alter the text in between the <span></span> code of each line.

If you are using the icons that come with the sample file, that’s really all you need to know to get going. However, if you are going to change the size of your icons or the file extensions of your icon images, I suggest you keep reading.

Tweaking Your Menu

If you wish to change the size of the menu icons or the file extensions (to allow for transparency, for example) you are going to need to tweak the javascript code itself. To do this, open fisheye.js in your HTML or text editor. The very first few lines of code look like the following:

var fisheyemenu = {
	startSize : 55,
	endSize : 88,
	imgType : ".gif",

Each icon on your Fisheye menu is actually two images, a large one and a small one. startSize : 55 means that the resting menu icon, the smaller of your images, is 55×55 pixels. Thus, your icons must be square. To alter the resting size of your icons, simply adjust this number to your liking. For the best quality, scale your images and the startSize number so they are the same. Similarly, endSize refers to the larger of you icon images, or the icon when your mouse is over it and it is enlarged. Adjust this number so it is the same as your larger image files. Using PhotoShop or Paint.net will allow you to scale your images to your desired size.

To use a different icon format, simply change imgType : “.gif” to your desired file format. If you wish to use PNG icon files, simply change it to say imgType : “.png”.

It is also important to properly name your icon files. After downloading or creating your two sizes of icon files (large and small), name the large icon file anything you like. If you named it “contactme.png” your MUST name the corresponding smaller icon file “contactme_small.png”. The smaller image must have “_small” appended to the end of its name, but before the extension.

Wrap It Up

I believe that should do it. Don’t forget that you can change the font and background color of the popup text by playing around with the “fisheye-menu.css” file. If you have any questions about installing the script or getting your icons to work, feel free to post a comment here. However, if you have technical problems with the script itself, head over to the code’s official site.

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

2 Comments

  1. London Web Design said:

    The way you have shown these templates is really impressive. I am impressed with your writing style. I like your blog very much. I keep seeing articles like these. Keep blogging.

    on September 18, 2009 at 11:57 am

  2. Naturalpills said:

    I like the article! Good work, keep up the good work!

    on January 18, 2010 at 3:39 pm


RSS feed for comments on this post.

Trackbacks on this post

Links to this post will be listed here. You an add your own by linking to the TrackBack URL

Sorry, the comment form is closed at this time.

"If you think it's expensive to hire a professional to do the job, wait until you hire an amateur." -Red Adair