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, though I’ve only made minimal tweaks to it. 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 Simply-Basic.com
Coded by Marc Grabanski
URL: http://marcgrabanski.com/code/fisheye-menu/
Download: .zip file (16.4 kb)

FishEye Script

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.

Code:

1
2

<link rel="stylesheet" type="text/css" href="http://YourDomainHere/fisheye-menu.css" />
<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.

Code:

1
2
3
4
5
6
7
8
9
10

<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..." 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:

Code:

1
2
3
4

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.

AddThis Social Bookmark Button