Menù Orizzontale Stile Mac

[capsula]

UP
Invoco voi guru dell'XHTML, dei CSS e dei JavaScript.... illuminatemi sulla retta via da percorrere al fine di realizzare il tanto sospirato menù e ve ne sarò grato per tutta la vita sacrficando il sangue di qualsiasi adepto per voi. Amen.

Io non ne vengo fuori... aiutoooo!!!

[Mega69]

Con webdeveloper ho scovato questo sul sito che hai postato, il codice javascript; non so se funziona, ma visto che sei disperato, fai qualche prova...

var linkList=[
[ 'index.html' , 'http://www.gowebby.org/immagini/mh/home.jpg' , '', 'Home' ],
[ 'linkop-AddLink.html' , 'http://www.gowebby.org/immagini/mh/aggiungi.jpg' , '', 'Suggerisci un sito' ],
[ 'linkop-NewLinks.html' , 'http://www.gowebby.org/immagini/mh/nuovi.jpg' , '', 'Ultimi Inserimenti' ],
[ 'news.html' , 'http://www.gowebby.org/immagini/mh/news.jpg' , '', 'Ultime News' ],
[ 'linkop-MostPopular.html' , 'http://www.gowebby.org/immagini/mh/cliccati.jpg' , '', 'Siti pi� visitati' ],
[ 'linkop-TopRated.html' , 'http://www.gowebby.org/immagini/mh/votati.jpg' , '', 'Siti pi� votati' ],
[ 'contatti.html' , 'http://www.gowebby.org/immagini/mh/mail.jpg' , '', 'Contatti' ],
[ 'linkop-RandomLink.html' , 'http://www.gowebby.org/immagini/mh/acaso.jpg' , '_blank', 'Un Sito a caso' ],
[ 'wow.html' , 'http://www.gowebby.org/immagini/mh/wow.jpg' , '', 'WOW' ],
[ 'regolamento.html' , 'http://www.gowebby.org/immagini/mh/regolamento.jpg' , '', 'Regolamento' ]
]

var startSize=40;  
var curSize=40;    
var endSize=80;  
var useText=true;  
var defText=''  
var textGap=0;   
var effectW=3.5; 
var textStyle="font-family:verdana; font-size:10pt; color:#009F04; font-weight:bold";
var w3c=(document.getElementById)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns4=(document.layers)?true:false;
var mx=0;
var overEl=false;
var enterEl=false;
var id=0;
var elList=new Array();
var elText;
var pgLoaded=false;
if(defText=='')defText='';
effectW=Math.max(2,Math.min(5,effectW))+.5;
var wA=effectW*endSize/2;
var mX=wA/1.5;

function getMxy(v){
mx=(ie5||ie4)?event.clientX:v.pageX;
}

function getEl(s){
if(ns4)return findLayer(s,document);
else return (ie4)?document.all[s]:document.getElementById(s);
}

function getW(e){
return parseInt(e.style.width);
}

function setImgS(i,x){
elList[i].style.width=x;
elList[i].style.height=x;
document.images['linkDockI'+i].width=x;
document.images['linkDockI'+i].height=x;
}

function getL(el){
var x=0;
var sx=(document.all)?document.body.scrollLeft:0;
while(el.offsetParent!=null){
x+=el.offsetLeft;
el=el.offsetParent;
}
return x+el.offsetLeft-sx;
}

function rAll(){

for(i=0;i<elList.length;i++) {
curSize=getW(elList[i]);
if (curSize>startSize) {
id=setTimeout('rAll()',10);
curSize--;
setImgS(i,curSize);
}}}

function dockMagnify(){
var tEl,n1,n2;
if(overEl) {if(curSize<endSize) curSize+=5; } else curSize=50;
if(overEl){
for(i=0;i<linkList.length;i++){
tEl=elList[i];
if((getL(tEl)>=mx-wA)&&(getL(tEl)<=mx+wA)){
n1=getL(tEl)+getW(tEl)/2+10;
n2=mx-wA;
n1=(curSize*Math.sin(Math.abs(n1-n2)/mX));
setImgS(i,Math.max(n1,startSize));
}else setImgS(i,startSize);
}}}

function mOver(){
overEl=true;
clearTimeout(id);
}

function mOut(){
overEl=false;
id=setTimeout('rAll()',100);
}

function findLayer(name,doc){
var i,layer;
for(i=0;i<doc.layers.length;i++){
layer=doc.layers[i];
if(layer.name==name)return layer;
if(layer.document.layers.length>0)if((layer=findLayer(name,layer.document))!=null)return layer;
}
return null;
}

function writeText(text){
if(useText && pgLoaded){
text=(text<0)?defText:linkList[text][3];
if(text=='')text='';
if(ns4){
elText.document.open();
elText.document.write('<center><span style="'+textStyle+'">'+text+'</span></center>');
elText.document.close();
}
else elText.innerHTML=text;
}}

function writeHTML(){
var t='';
if(w3c||ie4){
t+='<table cellpadding=0 cellspacing=0 border=0 height="'+endSize+'" width="'+(((linkList.length-4)*startSize)+(4*endSize))+'px"><tr valign="bottom" align="center"><td>';
for(i=0;i<linkList.length;i++){
t+='<span id="linkDockD'+i+'" style="width:'+startSize+'px; height:'+startSize+'px;">';
t+='[img]'+linkList[i][1]+'[/img]';
t+='</span>';
}
t+='</td></tr></table>';
if(useText)t+='<center><div id="dockText" style="'+textStyle+'; padding-top:'+textGap+'px">'+defText+'</div></center>';
}else{
t+='<table cellpadding=0 cellspacing=0 border=0 width="'+(linkList.length*startSize)+'"><tr valign="bottom">';
for(i=0;i<linkList.length;i++)t+='<td height="'+endSize+'">[img]'+linkList[i][1]+'[/img]</td>';
t+='</tr>';
if(useText)t+='<tr><td colspan="'+linkList.length+'"><td height="'+textGap+'"></td></tr><tr><td colspan="'+linkList.length+'"><ilayer width="'+(linkList.length*startSize)+'"><layer name="dockText" height="100%"></layer></ilayer></td></tr>';
t+='</table>';
}
document.write(t);
}

window.onload=function(){
if(w3c||ie4){
for(j=0;j<linkList.length;j++){
elList[j]=getEl('linkDockD'+j);
elList[j].n=j;
elList[j].onmouseover=mOver;
elList[j].onmouseout=mOut;
}
document.onmousemove=getMxy;
setInterval('dockMagnify()',20);
}
elText=getEl('dockText');
if(ns4)writeText(-1);
pgLoaded=true;
}

writeHTML();

Più di questo non so...

[fcaldera]

non so se è quello che intendevi... guarda il menu in alto di questa pagina
http://eudock.jules.it/index-eudock2.0.php

Ciao

[Mega69]

E' un pò poco pratico ma da sicuramente il suo effetto

[capsula]

@ Mega69: Grazie, ma non c'è un metodo più facile? Perchè leggendo quel codice JS non è che capisco molto... è troppo avanti per me!!


@ fcaldera: si, anche quel menù andrebbe benone!!!

[Mega69]

Ciò che ti interessa è all'inizio del codice... Nell'array devi semplicemente aggiungere al posto delle loro immagini le tue e lo stesso con le scritte. Volendo puoi eliminare o aggiungere elementi dell'array, nessuno te lo vieta.

[capsula]

ah ok... e il resto del codice lo devo toccare?

[Mega69]

Ovviamente no, a meno che tu voglia modificare qualche cosa tipo la grandezza iniziale e finale delle icone. Le immagini devono essere 80X80 pixel, o della dimensione da te regolata.

[stranyera]

com'è finita?...interessa moltissimo anche a me capire come cavolo fare unmenu del genere...sono 4 giorn che ci sono su!!!!!

[stranyera]

ho provato ad adattarlo alle mie esigenze...uhm...pero' con IE non funziona...mi da degli errori...
please...HELP ME!!!!