Rolig fisheye meny med jQuery

Hittade en rolig meny som växer när man för musen över menyns olika länkar, en s k fisheymeny. Den kräver jQuery och ett interface.

Se exempel på fisheye-meny >>

Ladda hem interface.js >>

Lägg inom HEAD-taggen:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="interface.js"></script>
<script type="text/javascript">
$(document).ready(

function()
{
$('#fisheye').Fisheye(
{
maxWidth: 81,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 51,
proximity: 73,
halign : 'center'
}
)
}
);
</script>

Lägg i BODYn:

<div id="fisheye" class="fisheye">
<div class="fisheyeContainter">
<a href="#" class="fisheyeItem"><img src="images/menyflik_start.png" height="40" /><span>Start</span></a>
<a href="#" class="fisheyeItem"><img src="images/menyflik_funktion.png" height="40" /><span>Funktion</span></a>
<a href="#" class="fisheyeItem"><img src="images/menyflik_garanti.png" height="40" /><span>Garanti</span></a>
<a href="#" class="fisheyeItem"><img src="images/menyflik_faq.png" height="40" /><span>FAQ</span></a>
<a href="#" class="fisheyeItem"><img src="images/menyflik_bestall.png" height="40" /><span>Beställ</span></a>
</div>
</div>
</div>

Lägg i din CSS:

.fisheye{
text-align: center;
height: 51px;
position: relative;
}
a.fisheyeItem
{
text-align: center;
font-weight: bold;
text-decoration: none;
width: 88px;
position: absolute;
display: block;
top: 0;
}
.fisheyeItem img
{
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.fisheyeItem span {
display: none;
positon: absolute;
}
.fisheyeContainter
{
height: 51px;
width: 200px;
left: 500px;
position: absolute;
}

På hemsidan finns mer förklaringar och förslag på inställningar.