Michele Basso
a- a+

Menų a scorrimento orizzontale

Con questo script DHTML verrà creato un menù ascorrimento orizzontale. Passando il mouse sopra due bottoni,le voci del menù si sposteranno rispettivamente adestra o a sinistra, a seconda del pulsante(destro osinistro) su cui passa il mouse.

Vediamo come funziona lo script. Iniziamo cpiando questocodice all'interno del tag body, nel punto in cuivogliamo inserire il meù.

<script type="text/javascript">/************************************************ Scrollable Menu Links- © Dynamic Drive DHTML code library (www.dynamicdrive.com)* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts* This notice must stay intact for legal use***********************************************///configure path for left and right arrowsvar goleftimage='pointer2.gif'var gorightimage='pointer.gif'//configure menu width (in px):var menuwidth=300//configure menu height (in px):var menuheight=25//Specify scroll buttons directions ("normal" or "reverse"):var scrolldir="normal"//configure scroll speed (1-10), where larger is fastervar scrollspeed=6//specify menu contentvar menucontents='<nobr><a href="http://www.dynamicdrive.com">Dynamic Drive</a> | <a href="http://www.javascriptkit.com">JavaScript Kit</a> | <a href="http://www.codingforums.com">CodingForums.com</a> | <a href="http://www.builder.com">Builder.com</a> | <a href="http://freewarejava.com">Freewarejava.com</a></nobr>'////NO NEED TO EDIT BELOW THIS LINE////////////var iedom=document.all||document.getElementByIdvar leftdircode='onMouseover="moveleft()" onMouseout="clearTimeout(lefttime)"'var rightdircode='onMouseover="moveright()" onMouseout="clearTimeout(righttime)"'if (scrolldir=="reverse"){var tempswap=leftdircodeleftdircode=rightdircoderightdircode=tempswap}if (iedom)document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-5000">'+menucontents+ '</span>')var actualwidth=''var cross_scroll, ns_scrollvar loadedyes=0function fillup(){if (iedom){cross_scroll=document.getElementById? document.getElementById("test2") : document.all.test2cross_scroll.innerHTML=menucontentsactualwidth=document.all? cross_scroll.offsetWidth : document.getElementById("temp").offsetWidth}else if (document.layers){ns_scroll=document.ns_scrollmenu.document.ns_scrollmenu2ns_scroll.document.write(menucontents)ns_scroll.document.close()actualwidth=ns_scroll.document.width}loadedyes=1}window.onload=fillupfunction moveleft(){if (loadedyes){if (iedom&&parseInt(cross_scroll.style.left)>(menuwidth-actualwidth)){cross_scroll.style.left=parseInt(cross_scroll.style.left)-scrollspeed+ "px"}else if (document.layers&&ns_scroll.left>(menuwidth-actualwidth))ns_scroll.left-=scrollspeed}lefttime=setTimeout("moveleft()" ,50)}function moveright(){if (loadedyes){if (iedom&&parseInt(cross_scroll.style.left)<0)cross_scroll.style.left=parseInt(cross_scroll.style.left)+scrollspeed+ "px"else if (document.layers&&ns_scroll.left<0)ns_scroll.left+=scrollspeed}righttime=setTimeout("moveright()" ,50)}if (iedom||document.layers){with (document){write('<table border="0" cellspacing="0" cellpadding="2">')write('<td valign="middle"><a href="#" '+leftdircode+ '><img src="'+goleftimage+ '"border=0></a> </td>')write('<td width="'+menuwidth+ 'px" valign="top">')if (iedom){write('<div style="position:relative;width:'+menuwidth+ 'px;height:'+menuheight+ 'px;overflow:hidden;">')write('<div id="test2" style="position:absolute;left:0;top:0">')write('</div></div>')}else if (document.layers){write('<ilayer width='+menuwidth+ ' height='+menuheight+ ' name="ns_scrollmenu">')write('<layer name="ns_scrollmenu2" left=0 top=0></layer></ilayer>')}write('</td>')write('<td valign="middle"> <a href="#" '+rightdircode+ '>')write('<img src="'+gorightimage+ '"border=0></a>')write('</td></table>')}}</script>

Le parti in grassetto sono quelle da modificare.Vediamole nel dettaglio.

vargoleftimage='pointer2.gif'       pointer2.gif è il nome del bottone che scrollail menù a sinistra

vargorightimage='pointer.gif'       pointer.gif è il nome del bottone che scrolla ilmenù a destra

varmenuwidth=300       300 è la larghezza(in pixel) del menù

varmenuheight=25       200 è l'altezza(sempre in pixel) delmenù

varscrolldir="normal"       normal è la direzione dello scorrimento,settiamolo su reverse se vogliamo lo scorrimento alcontrario

varscrollspeed=6       In una scala da 1 a 10, 6 è il fattorevelocità(1 è il minimo, 10 il massimo)

Adesso settiamo l'ultima variabile, che serviràper inserire le voci del menù.

La variabile è divisa in singole porzioni di codice,ad esempio:

<a href="http://www.dynamicdrive.com">Dynamic Drive</a>

Quindi vediamo che è possibile aggiungere il codicecome se si lavorasse su una semplice pagina HTML.

Per problemi nell'utilizzo dello script, poteteconsultare il nostro forum didiscussione.

 



Ti potrebbe interessare anche

commenta la notizia