Se você quer mostrar o seu menu como uma linha elegante de imagens que você pode percorrer e clicar, você precisa implementar um menu acoplável JavaScript. Quando você coloca o cursor do mouse sobre uma das imagens pequenas , ele se expande e você pode clicar nele para navegar para outra página . Um script de menu acoplável é útil para adicionar funcionalidades ao seu site. Além disso, ele é exibido corretamente em todos os navegadores da Web e você pode usá-lo em qualquer lugar em suas páginas. Instruções
1

Abra um editor de texto, como o Bloco de Notas ou WordPad para criar um novo documento de texto
2

Insira este código dentro do editor : .

função MacStyleDock (nó , imageDetails , MinimumSize , MaximumSize , intervalo) {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; var CloseTimeout = null; var closeInterval = null; var openInterval = null; imagens var = []; iconNodes var = []; reflectedIconNodes var = []; iconSizes var = []; 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 (' clique ', 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] [j] tamanhos + imageDetails [i] de extensão. . . ); }} updateIconProperties função ( ; images.push ( imagem ) index) {size = var + MinimumSize escala * ( iconSizes [índice] - MinimumSize ); . var sizeIndex = 0; while ( imageDetails [ índice ] tamanhos [ sizeIndex ] < tamanho && sizeIndex + 1 < imageDetails [ índice ] . sizes.length ) { sizeIndex + +; } if ( tamanho == MaximumSize ) { iconNodes [ índice ] setAttribute ( 'src' , imageDetails [ índice ] Nome + MaximumSize + ' cheio ' + imageDetails [ índice ] extensão) ; . . . } else { iconNodes [index] . setAttribute ( 'src' , imageDetails [index] . nome + imageDetails [index] . tamanhos [ sizeIndex ] + . imageDetails [ índice ] tamanhos [ sizeIndex ] + imageDetails + ' - reflexão " [ índice ] extensão) ; . . iconNodes [ índice ] setAttribute ( " largura " , tamanho ); . iconNodes [ índice ] setAttribute (' altura ' , tamanho ) ; reflectedIconNodes [ índice ] setAttribute ( "largura" , tamanho ); reflectedIconNodes [ índice ] setAttribute (' altura ' , tamanho ); . . . iconNodes [ índice ] style.marginTop = ( MaximumSize - tamanho ) + ' px '; reflectedIconNodes [ ,". index] style.marginBottom = ( MaximumSize - tamanho ) + ' px ';}
3

Acrescente este código:

função 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 ; target = var e.target