Mac User kennen es als „Dock“, als sogenanntes „Fisheye Menü“ findet man es immer öfter auch auf Websites. Wir haben ein solches Menü in JavaScript entwickelt, welches ohne Bibliotheken wie jQuery oder MooTools auskommt. Es kann flexibel an jeder Stelle der Website platziert werden und funktioniert in allen Browsern inklusive IE5 und IE6.
#dockeye { background:#666; text-align:center; position:relative; } #dockeye img { border-width:0px; visibility:hidden; } #dockeye *:focus { outline: none; }
Zwingend notwendig ist hier nur das position: relative des #dockeye-Containers, alles andere ist nur Optik. Die Eigenschaft visibility: hidden sorgt dafür, dass die Bildgröße sich beim Laden der Seite nicht sprunghaft ändert.
<div id="dockeye"> <a href="home.htm"><img src="Home.png" alt="Home" /></a> <a href="produkte.htm"><img src="Produkte.png" alt="Produkte" /></a> <a href="kontakt.htm"><img src="Kontakt.png" alt="kontakt" /></a> ... </div> <script type="text/javascript" src="dockeye.js"></script>
Der HTML Code für das Menü ist sehr simpel aufgebaut, innerhalb eines DIVs mit der ID dockeye sind Grafiken verlinkt. Der Aufruf der Skriptdatei muss dahinter erfolgen.
Live Demo in neuem Fenster öffnen
Download als ZIP
hey,
can’t speak german sorry… in fact the script is great but i have troubles with safari 5.0.2
the first load of the page generates perfect results for the dock but if i reload the page or go back to it then the dock appears under the area where it is supposed to appear…
any idea ? thx
[…] Javascritpt Dock Fisheye Menu […]
@Matt
There are some timing problems in Safari. This isn’t very nice but works for Safari… just execute the mmove function from body onload:
<body onload=“mmove(999);“>
Please wait for the next release for a nicer bugfix.
Hi,
mir gefällt das Script wirklich gut und bin grad ein wenig am rumexperimentieren, wie weit es für meine zukünftige homepage passt.
Hab nur eine Frage, und zwar, welche Werte in der dockeye.js-Datei muss ich denn ändern, wenn ich die Icon-Größe und den Zoomfaktor vergrößern möchte??
Vielen Dank schon mal und schönen Gruß,
Michu
Die Startgröße beträgt 50% der Bildgröße. In Zeile 19 des Skripts musst du beide „deW/2“ durch z.B. „deW/4“ ersetzen, um die Startgröße auf 25% der Bildgröße zu setzen. Natürlich können auch größere oder kleinere Icon-Grafiken verwendet werden – die Größe wird hier automatisch erkannt, es sollten aber alle Grafiken gleich groß sein.
Vielen herzlichen Dank für die schnelle Antwort.
Schönen Tag dann noch.
Gruß
Hallo nochmal.
Ich bin auf eine weitere kleine Schwierigkeit gestoßen.
Ich habe ja verständlichweise noch andere Elemente auf der Seite und es kommt oft vor, dass die Icons da sind, die Links auch auf den Icons liegen, aber der Zoomeffekt an einer anderen Stelle ausgelößt wird. D.h. wenn ich mit der Maus über die Icons fahre, passiert nichts, wenn ich aber so drei Zentimeter links oben drüber die Maus bewege, zommen die Icons plötzlich ran.
Irgendwie driften die Icons und die „Reaktionszone“ für den Zoomeffekt auseinander und ich hab noch nicht raus, an welchen vorher auf der Seite genutzen Formatierungsparametern das liegen könnte. Aber die sind alle in sich geschlossen, sollten also keine Auswirkung auf die Elemente danach haben.
Kann man das in den Parametern korrigieren?
Ist im übrigen sowohl im Firefox, Chrome als auch Internetexplorer so und soweit ich feststellen konnte, ist die Abweichung immer dieselbe.
Gruß
Hier im Blog funktioniert es auch, trotz anderer Elemente. Die Seite sollte XHTML sein, evtl liegt es an anderen absolut oder relativ positionierten Elementen. Ich werde mir das Problem für die nächste Version nochmal genauer ansehen.
Ok, danke für die Hinweise, werd danach mal schauen.
Schönen Gruß
Hi,
hab mal eine weitere Frage und zwar lässt sich der Bereich, in dem die Icons auf die Maus reagieren irgendwie bestimmen? Welche Parameter sind dafür zuständig??
Gruß
ps.: Ansonsten muss ich nochmal sagen, dass das Skript echt klasse ist. Vielen Dank dafür!!!
Sorry, die nächste Version wird ausreichend kommentiert sein.
Am Ende der Zeile 18 (var c = …) den Wert deW*4 anpassen nach z.B. deW*50.
Hello,
very nice script, clean and stable!
I have some trouble with Google Chrome, it simply does not appears. There is some fix or advice that I could follow?
Thank you!
Paolo
I can’t seem to figure out why the script works fabously when my containing div has the property of top: 0% but not when the property changes to top: 80%
Does it interfere with other objects on the page?
I even set the z-index to 1000 to force it in front…
Try to set the #dockeye wrapper to bottom: 0 or bottom: 50px or something and do not place it in a wrapper with percentage values.
Hallo ich finde dieses Menu sehr interessant.
Aber ich kann es in meine Joomlaseite leider nicht einbauen.
Da ich dort nicht den Sourcecode ändern kann bzw. wenn ich den Editor ausschalte löscht der mir beim speichern immer die css und script anweisungen.
In meinem Joomlaordner finde ich auch nicht die Datei sodass ich den Sourcecode z.B.: mit PSPad bearbeiten kann.
Wenn es dazu eine Lösung gibt bitte an XXX
Vielen Dank
Viele Grüße Nicky
Joomla ist nicht grade mein Steckenpferd. Aber soweit ich das noch weis gibt es den Punkt „Template“ dort kann man CSS platzieren. Gepfuschter Weise könnte in den Seitenhead auch der Inhalt von der *.js platziert werden, dann aber mit nem „document.ready“ oder Ähnlichem, dann werden die Bilder hochgeladen etc. Idealerweise mit FTP-Zugang, dann kann man das JS auch sauber einbauen.
Leider kann ich dafür jetzt keine „Step-by-Step“ Anleitung schreiben. Sie könnten den Job aber in Auftrag geben: http://www.machart-studios.de/kontakt
Vielen Dank für die schnelle Antwort ich werde mal gucken ob ich etwas finde
Prima Sache,
eine Frage dazu.
Wenn ich dieses Menü lieber senkrecht hätte. Wäre das möglich und was muss dazu geschrieben werden?
Es sollen dort dann keine Kugelförmigen Linkbuttons sein, sondern rechteckige samt Schrift.
Danke
hallo nach mannem
sagt mal – ich kann die größe in zeile 19 zwar ändern aber immer nur in großen schritten
was ist wenn ich nur ein dezentes fisheye haben möchte
z.b. bei hover von 100% auf 105%
also um 5% schtitte
nicht wie ihr schreibt von deW2 auf deW4 25%
könnt ihr helfen?
ansonsten: zart – sehr sehr zart 1**
gruß aus lumbehafe 😉