Pernahkah anda melihat menu yang bila disorot dengan mouse akan membesar dan apabila waktu keluar akan mengecil dengan sendirinya. Inisiatif saya muncul ketika saya mengunjungi website PLN Indonesia. disana ada menu seperti yang saya jelaskan diatas.Namun, pada menu ini saya tidak menambahkan dropdown. Untuk dropdown saya akan tambahkan pada seri berikutnya.
Download fisheye.js dan jquery.js (link ada dibawah). Setelah itu anda copy file dibawah ini dan simpan dua file dibawah ini pada folder yang sama.
fisheye.html
<html>
<head>
<title>Manu FishEye - jQuery | replace.web.id</title>
<script type="text/javascript" src="/rpl/jquery.js"></script>
<script type="text/javascript" src="/rpl/fisheye.js"></script>
<link type="text/css" href="/rpl/fisheye.css" rel="stylesheet">
</head>
<body>
<div id="fisheye" class="fisheye">
<div class="fisheyeContainter">
<a href="#" class="fisheyeItem"><img src="/rpl/r.png" width="30" /><span>Rekayasa</span></a>
<a href="#" class="fisheyeItem"><img src="/rpl/e.png" width="30" /><span>rEkayasa</span></a>
<a href="#" class="fisheyeItem"><img src="/rpl/p.png" width="30" /><span>Perangkat</span></a>
<a href="#" class="fisheyeItem"><img src="/rpl/l.png" width="30" /><span>Lunak</span></a>
<a href="#" class="fisheyeItem"><img src="/rpl/a.png" width="30" /><span>lunAk</span></a>
<a href="#" class="fisheyeItem"><img src="/rpl/c.png" width="30" /><span>Community</span></a>
<a href="#" class="fisheyeItem"><img src="/rpl/e.png" width="30" /><span>indonEsia / tEn / sEpuluh</span></a>
<a href="#" class="fisheyeItem"><img src="/rpl/webid.png" width="30" /><span>ID</span></a>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function()
{
$('#fisheye').Fisheye(
{
maxWidth: 30, /* ubah nilai disamping untuk menentukan pada saat hover */
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 40, /* ubah nilai disamping untuk width image */
proximity: 90, /* nilai radius mouse hover */
halign : 'center'
} ) } );
</script>
</body>
</html>
fisheye.css
.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: 200px;
left: 500px;
position: absolute;
}
#fisheye2 {
position: absolute;
width: 100%;
bottom: 0px;
} 
