Wenn Sie zu Ihrem Menü als stilvolle Reihe von Bildern, die Sie blättern können angezeigt werden , und klicken Sie auf möchten , müssen Sie einen JavaScript dockable Menü implementieren. Wenn Sie die Maus Cursor über eines der kleinen Bilder , dehnt es sich und Sie können darauf klicken, um zu einer anderen Seite navigieren. Ein dockable Menü Skript ist nützlich für das Hinzufügen von Funktionen auf Ihre Website. Darüber hinaus wird es richtig in allen Webbrowsern angezeigt und Sie können es überall benutzen auf Ihren Seiten . Anleitung
1

Öffnen Sie einen Text -Editor wie Notepad oder WordPad ein neues Textdokument erstellen
2

Legen Sie diesen Code im Editor : .
< P > Funktion MacStyleDock ( Knoten , imageDetails , MinimumSize , MaximumSize , Bereich) {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; var openInterval = null; var Bilder = []; 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 , false); . iconNodes [i] addEventListener ( ' mouseout ' , processMouseOut , false); . . iconNodes [i] addEventListener ( ' klicken ' 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 ] Name + imageDetails [i] Größen [j ] + imageDetails [i] Erweiterung. . . ); images.push (Bild) ;} } function updateIconProperties ( index) {var size = MinimumSize + Skala * ( iconSizes [index] - MinimumSize ); var sizeIndex = 0; while ( imageDetails [index] Größen [ sizeIndex ] 3

anhängen diesen Code ein: .

Funktion processMouseMove ( e) { window.clearTimeout ( closeTimeout ); closeTimeout = null; window.clearInterval ( closeInterval ); closeInterval = null; if ( scale = 1 && openInterval ! ) { openInterval = window.setInterval (function ( ) {if ( scale < 1) Skala + = 0,125 ; if ( Skala > = 1) { scale = 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