Cómo hacer un Dockable menú con Javascript

Si desea mostrar su menú como una fila con estilo de las imágenes se puede desplazar y hacer clic en , es necesario implementar un menú acoplable JavaScript . Al colocar el cursor del ratón sobre una de las pequeñas imágenes , se expande y puede hacer clic para navegar a otra página. Una secuencia de comandos de menú acoplables es útil para añadir características a su sitio web. Además, se muestra correctamente en todos los navegadores Web y se puede usar en cualquier lugar en sus páginas. Instrucciones
1

Abra un editor de texto, como el Bloc de notas o WordPad para crear un nuevo documento de texto
2

Inserta este código dentro del editor : .
< P > Función MacStyleDock (nodo , imageDetails , minimumSize , MaximumSize , rango) { var iconsNode = document.createElement ( ' div '); Node.appendChild ( iconsNode ) ; var reflectedIconsNode = document.createElement ( ' div '); Node.appendChild ( reflectedIconsNode ) ; iconsNode.style.textAlign = "centro" ; reflectedIconsNode.style.textAlign = "centro" ; iconsNode.style.height = MaximumSize + " px " ; reflectedIconsNode.style.height = MaximumSize + " px " ; var maximumWidth = 0 ; var escala = 0 ; closeTimeout var = null; closeInterval var = null; openInterval var = NULL; imágenes var = [ ] ; iconNodes var = [ ] ; reflectedIconNodes var = [ ] ; iconSizes var = []; for (var i = 0 ; i < imageDetails.length , i + + ) { iconNodes [ i ] = document.createElement ( ' img '); iconNodes [ i ] style.position = "relativo" ; . iconSizes [ i ] = MinimumSize ; reflectedIconNodes [ i ] = ( . iconNodes [ i ] addEventListener ) { iconNodes [ i ] addEventListener ( ' mousemove ' , processMouseMove , false) ; . iconNodes [ i ] addEventListener ( ' mouseout ' , processMouseOut , false) ; . . iconNodes [ i ] addEventListener ( ' clic ' , 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 imagen = document.createElement ( ' img '); image.setAttribute ( ' src' , imageDetails nombre imageDetails [ i ] tamaños [ j ] + imageDetails [ i ] extensión [ i]. . . ) ; images.push (imagen ) ;} } updateIconProperties función ( index) { var size = minimumSize + escala * ( iconSizes [ index] - minimumSize ) ; sizeIndex var = 0 ; while ( imageDetails [indice ] medidas [ sizeIndex ] < && tamaño sizeIndex + 1 < imageDetails [ index] . . sizes.length ) { sizeIndex + + ;} if ( tamaño == MaximumSize ) { iconNodes [ index] setAttribute ( ' src' , imageDetails [indice ] Nombre + MaximumSize ' lleno ' imageDetails [ index] + extensión + ) . . . } else { iconNodes [ index] . setAttribute ( ' src' , imageDetails [ index] . nombre imageDetails [Inicio] . tamaños [ sizeIndex ] + imageDetails [indice ] medidas [ sizeIndex ] + ' reflexión ' + imageDetails [ index] de extensión ) . . iconNodes [ index] setAttribute ( ' width' , tamaño) ; . . iconNodes [ index] setAttribute ( 'height' , tamaño) ; reflectedIconNodes [Índice] setAttribute ( ' width' , tamaño) ; reflectedIconNodes [ index] setAttribute ( 'height' , tamaño) ; iconNodes [Índice] style.marginTop = ( MaximumSize - tamaño ) + " px "; . . . reflectedIconNodes [ ,"índice ] style.marginBottom = ( MaximumSize - size) + ' px ';}
3

anexar este código: .
función

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