Javascript Fisheye Menu
In my previous post i mentioned about a homepage site i had created. In that site i used a fisheye menu. Fisheye menus are a very good way to display many links or icons but still being able to see them. I got the idea from a book call "Designing the user interface" by Ben Schneiderman which is a book i would recomend to anyone.
I thought i would just break down this script so that you can all use them in your websites. They are not only a benefit to Human Computer Interaction, but they also look pretty good.
First of all you need to create the menu.
<div class="fisheyeContainter">
<a href="http://www.facebook.com" class="fisheyeItem2"><img src="http://home.cfproject.co.uk/Images/FaceBook-128x128.png" width="128" /><span>Facebook</span></a>
<a href="http://www.google.co.uk" class="fisheyeItem2"><img src="http://home.cfproject.co.uk/Images/Google-128x128.png" width="128" /><span>Google</span></a>
<a href="http://www.youtube.com" class="fisheyeItem2"><img src="http://home.cfproject.co.uk/Images/Youtube-128x128.png" width="128" /><span>Youtube</span></a>
</div>
</div>
This is just a series of nested <div> tags.
They we addd the css to make the menu look presentable.
.fisheye{
text-align: center;
height: 50px;
position: relative;
}
a.fisheyeItem
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
a.fisheyeItem2
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
}
.fisheyeItem img
{
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.fisheyeItem2 img
{
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.fisheyeItem span,
.fisheyeItem2 span
{
display: none;
positon: absolute;
}
.fisheyeContainter
{
height: 50px;
width: 500px;
left: 0px;
position: absolute;
}
#fisheye2
{
position: absolute;
width: 98%;
bottom: 0px;
}
</style>
Now the menu looks presentable we need to add a script at the bottom of the page that will call functions in a javascript file when users hover near the icons.
$(document).ready(
function()
{
$('#fisheye2').Fisheye(
{
maxWidth: 70,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 60,
proximity: 90,
alignment : 'left',
valign: 'center',
halign : 'center'
}
)
}
);
</script>
Now all we need to do is include the two javascript files at the top of the page. This script can be used in any language as it is javascript based, all you need to do is include the two javescript files.
<script type="text/javascript" src="/ColdfusionSamples/Fisheye/js/interface.js"></script>
Here is an example of the finished script
