MaxRom | Scripturi uCoz Romania

Bannerul tau aici
[ Mesaje noi · Membrii · Regulamentul forumului · RSS ]
  • Pagina 1 din 1
  • 1
Meniu Orizontal
Muşatinu Date: Miercuri, 2010-12-08, 14:18 | Message # 1
Mesaje: 1801
Awards: 202
« 53 »

Î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:

Attachments: 2133591.png (7.5 Kb)



 
  • Pagina 1 din 1
  • 1
Căutare: