Se si desidera visualizzare il menu come una fila elegante di immagini è possibile scorrere e fare clic su, è necessario implementare un menu agganciabile JavaScript . Quando si posiziona il cursore del mouse su una delle piccole immagini , si espande ed è possibile fare clic per passare a un'altra pagina . Uno script menù agganciabile è utile per aggiungere funzionalità al tuo sito web . Inoltre , viene visualizzato correttamente in tutti i browser Web e si può usare ovunque sulle tue pagine . Istruzioni
1

Aprire un editor di testo , ad esempio Blocco note o WordPad per creare un nuovo documento di testo
2

Inserisci questo codice all'interno dell'editor : .
< P > funzione MacStyleDock ( nodo , imageDetails , MinimumSize , MaximumSize , gamma ) {var iconsNode = document.createElement ( ' div '); node.appendChild ( iconsNode ) ; var reflectedIconsNode = document.createElement ( ' div '); node.appendChild ( reflectedIconsNode ) ; iconsNode.style.textAlign = ' center' ; reflectedIconsNode.style.textAlign = ' center' ; iconsNode.style.height = MaximumSize + ' px '; reflectedIconsNode.style.height = MaximumSize + ' px '; var MaximumWidth = 0 ; var scale = 0; var CloseTimeout = null; var closeInterval = null; openInterval var = null; immagini var = []; var iconNodes = []; var reflectedIconNodes = []; var iconSizes = []; for (var i = 0 , i < imageDetails.length ; i + + ) { iconNodes [ i] = document.createElement ( ' img '); iconNodes [ i] style.position = ' parente ' , . iconSizes [ i] = MinimumSize ; reflectedIconNodes [i ] = ( . iconNodes [ i] addEventListener ) { iconNodes [ i] addEventListener (' mousemove ' , processMouseMove , false) ; . iconNodes [ i] addEventListener (' mouseout ' , processMouseOut , false) ; . . iconNodes [ i] addEventListener ( 'click ' , imageDetails [ i] onclick , false) ; . } else if ( iconNodes [ i] attachEvent ) { iconNodes [ i] attachEvent ( . . ' onmousemove ' , processMouseMove ) . iconNodes [ i] attachEvent ( ' onmouseout ' , processMouseOut ) ; iconNodes [ i] attachEvent ( ' onclick ' , imageDetails [ i] onclick ) . . } for (var j = 0; j < imageDetails [ i] sizes.length ; . j + + ) {var image = document.createElement ( ' img '); image.setAttribute ( ' src' , imageDetails [ i] nome imageDetails [i ] dimensioni [ j ] + imageDetails [ i] estensione . . . ) ; images.push ( immagine );} } updateIconProperties funzione ( index ) {var size = MinimumSize + scala * ( iconSizes [index ] - MinimumSize ) ; var sizeIndex = 0; while ( imageDetails [index ] dimensioni [ sizeIndex ] < && dimensioni sizeIndex + 1 < imageDetails [ index ] . . sizes.length ) { sizeIndex + +; } if ( size == MaximumSize ) { iconNodes [ index ] setAttribute ( ' src' , imageDetails [index ] nome MaximumSize + ' pieno ' + imageDetails [index ] estensione ) . . . } else { iconNodes [index ] . setAttribute ( ' src' , imageDetails [index ] . nome imageDetails [Indice]. dimensioni [ sizeIndex ] + imageDetails [ index ] dimensioni [ sizeIndex ] + ' riflessione ' + imageDetails [index ] estensione ) . . iconNodes [index ] setAttribute ( 'width' , size); . . iconNodes [index ] setAttribute ( 'height' , dimensione ) ; reflectedIconNodes [Indice] setAttribute ( 'width' , size) ; reflectedIconNodes [index ] setAttribute ( 'height' , size) ; iconNodes [Indice] style.marginTop = ( MaximumSize - taglia ) + ' px '; . . . reflectedIconNodes [ ,"indice] = style.marginBottom ( MaximumSize - taglia ) + ' px '; }
3

Aggiunge questo codice: .

funzione processMouseMove ( e) { window.clearTimeout ( CloseTimeout ) ; CloseTimeout = null; window.clearInterval ( closeInterval ) ; closeInterval = null; if ( scala = 1 && openInterval !) { openInterval = window.setInterval ( function () {if (scala < 1) scala + = 0,125 ; se ( scala > = 1) { scala = 1; window.clearInterval ( openInterval ) ; openInterval = null; } for (var i = 0; i < iconNodes.length ; i + + ) { updateIconProperties (i );} } , 20 );} if ( e) e = window.event ; obiettivo var = e.target