How to Create Fisheye Menu

On 07.01.09, In Tutorial, by Template Tutorial

If you have ever used the operating system Windows Vista, or Macintosh, I think you will know about dock menu or the menu in the form of icons that have beautiful moving animations. To view the demo, please visit http://seethedemo.blogspot.com/2009/06/02.html

The following are the ways to create dock menu:

Step-1

Upload the images or icons that you want to place in the dock menu to your image hosting. As the examples, I have uploaded the icons to http://tinypic.com.

Record the URLs of the icons that you get from tinypic. Below are the examples:

http://i41.tinypic.com/15n253b.png (image 1)

http://i41.tinypic.com/2vwckzp.png (image 2)

http://i44.tinypic.com/j8nsj4.png (image 3)

http://i42.tinypic.com/aeb4hh.png (image 4)

http://i42.tinypic.com/4khd2p.png (image 5)

Determine the URLs that you want to place as the menu. E.g. :

Image 1, I define for the URL http://template-tutorial.com

Image 2, I define for the URL: http://template-tutorial.com/search/label/Blogger%20Templates

Image 3, I define for the URL: http://template-tutorial.com/search/label/Wordpress%20Themes

Image 4, I define for the URL: http://template-tutorial.com/search/label/Tutorial

Image 5, I define for the URL: http://blog-tutor-net.blogspot.com

Step-2

Click Layout

Click Edit Html

Click Download Full Template to backup the template first.

Add the JavaScript code below between the code <head></head>, If you are confused, just place above the code </head>

<script src='http://www.yourjavascript.com/20111253552/fisheye.js' type='text/javascript'/>

Add the CSS code below above the code ]]></b:skin>

/* Fisheye Menu Styles */

#fisheye_menu { list-style: none; padding: 0; margin: 10px; height: 81px;}

#fisheye_menu li {position: relative; display: block; float: left;}

#fisheye_menu a {text-decoration: none;}

#fisheye_menu img {border: 0; vertical-align: top;}

Click Save Template and wait until the process done.

Click Page Element then click Add Gadjet.

Click the sign plus (+) on Html/Javascript, and paste the code below into the area Configuration Html/Javascript,

<div>

<ul id=”dock_menu”>

<li><a href=”http://template-tutorial.com” target=”_blank”><img src=”http://i41.tinypic.com/15n253b.png” alt=”template-tutorial” title=”Tutorial, Free Template and Site Info”><span></span></a></li>

<li><a href=”http://template-tutorial.com/search/label/Blogger%20Templates” target=”_blank”><img src=”http://i41.tinypic.com/2vwckzp.png” alt=”template-tutorial” title=”Free Blogger Templates”><span></span></a></li>

<li><a href=”http://template-tutorial.com/search/label/Wordpress%20Themes” target=”_blank”><img src=”http://i44.tinypic.com/j8nsj4.png” alt=”template-tutorial” title=”Free WordPress Themes”><span></span></a></li>

<li><a href=”http://template-tutorial.com/search/label/Tutorial” target=”_blank”><img src=”http://i42.tinypic.com/aeb4hh.png” alt=”template-tutorial” title=”Tutorial” ><span></span></a></li>

<li><a href=”http://blog-tutor-net.blogspot.com” target=”_blank”><img src=”http://i42.tinypic.com/4khd2p.png” alt=”Tutorial Joomla” title=”Tutorial Joomla”><span></span></a></li></ul>

</div>

Click Save.

Done

For the URLs of the icons and menus in red printed, please replace with yours that you have prepare at Point 1 and Point 2.

For the JavaScript in red printed, you can re-upload to other JavaScript hosting, and then if the demo that I show doesn’t work, the JavaScript file is likely deleted by www.yourjavascript.com.

I give my thanks to http://vistaicons.com as the resources of icons that I have used and to http://marcgrabanski.com/ as my inspiration of CSS and JavaScript codes.

Template Tutorial

Template Tutorial is a site that contains about website information, download softwares, blogging tutorial, wordpress tutorial, blogger templates and wordpress themes.

Visit Authors Website