Hvis du ønsker at vise din menu som en stilfuld række af billeder, du kan rulle gennem og klik på , er du nødt til at implementere en JavaScript dockes menu. Når du placerer musemarkøren over et af de små billeder , det udvider og du kan klikke på den for at navigere til en anden side. En dockable menu script er nyttigt for at tilføje funktioner til din hjemmeside. Desuden er det vist korrekt i alle webbrowsere , og du kan bruge det overalt på dine sider. Instruktioner
1

Åbn en teksteditor som Notesblok eller WordPad at oprette et nyt tekstdokument
2

Indsæt denne kode inde i editoren : .
< P > funktionen MacStyleDock ( node , imageDetails , minimumSize , maximumSize , rækkevidde) {var iconsNode = document.createElement ( ' div '); node.appendChild ( iconsNode ), var reflectedIconsNode = document.createElement ( ' div '); node.appendChild ( reflectedIconsNode ) iconsNode.style.textAlign = "centrum" , reflectedIconsNode.style.textAlign = "centrum" , iconsNode.style.height = maximumSize + ' px ' ; reflectedIconsNode.style.height = maximumSize + ' px ' ; var maximumWidth = 0 ; var skala = 0; var closeTimeout = null ; var closeInterval = null ; var openInterval = null ; vAR billeder = [ ] ; vAR iconNodes = [ ] ; vAR reflectedIconNodes = [ ] ; vAR iconSizes = [] for (var i = 0; i < imageDetails.length , i + +) { iconNodes [i] = document.createElement ( ' img '); iconNodes [i] style.position = "relativ "; . iconSizes [i] = minimumSize , reflectedIconNodes [i ] = ( . iconNodes [i] addEventListener ) { iconNodes [i] addEventListener ( ' mouseMove ' processMouseMove , falske ) . iconNodes [i] addEventListener ( ' mouseout ' processMouseOut , falske ) . . iconNodes [i] addEventListener ( ' klik ' imageDetails [i] onclick , falske ) . } 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 ] navn + imageDetails [i ] størrelser [j ] + imageDetails [i] forlængelse. . . ) images.push ( billedet );}} funktion updateIconProperties ( index) {var size = minimumSize + skalaen * ( iconSizes [ index ] - minimumSize ) var sizeIndex = 0 , mens ( imageDetails [Indeks] størrelser [ sizeIndex ] < størrelse && sizeIndex + 1 < imageDetails [ indeks] . . sizes.length ) { sizeIndex + + ;} if ( str. == maximumSize ) { iconNodes [ index ] setAttribute ( ' src' , imageDetails [ index ] navn + maximumSize + ' fuld ' + imageDetails [ index ] udvidelse ) . . . } else { iconNodes [ index ] . setAttribute ( ' src' , imageDetails [ index ] . navn + imageDetails [Indeks] . størrelser [ sizeIndex ] + imageDetails [Indeks] størrelser [ sizeIndex ] + ' -refleksion ' + imageDetails [ indeks] udvidelse ) . . iconNodes [ index ] setAttribute ( ' width ', size ) . . iconNodes [ index ] setAttribute ( ' højde ', size ) ; reflectedIconNodes [Indeks] setAttribute ( ' width ', size ), reflectedIconNodes [ index ] setAttribute ( ' højde ', size ), iconNodes [Indeks] style.marginTop = ( maximumSize - størrelse ) + ' px ' ; . . . reflectedIconNodes [ ,"indeks] style.marginBottom = ( maximumSize - størrelse ) + ' px ' ;}
3

Vedhæft denne kode: .

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