În CSS adăugăm stilu:
Code
* { margin: 0; padding: 0; } body { background: #fff; height: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
.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 { background-color: #fff; height: 50px; width: 200px; left: 500px; position: absolute; }
#fisheye2 { position: absolute; width: 100%; bottom: 0px; }
Unde dorim să apară meniul punem codu:
Code
<div id="fisheye" class="fisheye">
<div class="fisheyeContainter">
<a href="#" class="fisheyeItem"><img src="http://i81.servimg.com/u/f81/14/41/09/33/home1011.png" width="30" /><span>Denumire 1</span></a>
<a href="#" class="fisheyeItem"><img src="http://i81.servimg.com/u/f81/14/41/09/33/portal10.png" width="30" /><span>Denumire 2</span></a>
<a href="#" class="fisheyeItem"><img src="http://i81.servimg.com/u/f81/14/41/09/33/gal1010.png" width="30" /><span>Denumire 3</span></a>
<a href="#" class="fisheyeItem"><img src="http://i81.servimg.com/u/f81/14/41/09/33/faq1010.png" width="30" /><span>Denumire 4</span></a>
<a href="#" class="fisheyeItem"><img src="http://i81.servimg.com/u/f81/14/41/09/33/searcj10.png" width="30" /><span>Denumire 5</span></a>
<a href="#" class="fisheyeItem"><img src="http://i81.servimg.com/u/f81/14/41/09/33/groups10.png" width="30" /><span>Denumire 6</span></a>
<a href="#" class="fisheyeItem"><img src="http://i81.servimg.com/u/f81/14/41/09/33/li1010.png" width="30" /><span>Denumire 7</span></a>
</div>
<script type="text/javascript" src="http://all4you.at.ua/desktop/scriptformenu2/jquery.js"></script>
<script type="text/javascript" src="http://all4you.at.ua/desktop/scriptformenu2/interface.js"></script>
</div>
<script type="text/javascript"> $(document).ready( function() { $('#fisheye').Fisheye( { maxWidth: 20, items: 'a', itemsText: 'span', container: '.fisheyeContainter', itemWidth: 60, proximity: 10, halign : 'center' } ) } ); </script>
Imaginile le schimbăm cu ale voastre cum doriţi şi pentru fiecare link daţi o denumire coerspunzatoare.
Exemplu: