Zur Machart Studios Website
Back to top

JavaScript Dock-/ Fisheye-Menü

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.

CSS:

#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.

HTML:

<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.

Features:

  • Suchmaschinenfreundlicher Aufbau
  • Sehr kompakter Code
  • Einfache Anpassung
  • Einsatz an jeder Position (kein position:absolute)
  • Kompatibel mit allen Browsern inklusive IE 5 und IE 6
  • Keine JavaScript Bibliotheken notwendig
  • Freie Verwendung (Copyrighthinweis muss bestehen bleiben)

Live Demo in neuem Fenster öffnen
Download als ZIP

Von Sven Bader

Betreut verantwortlich die Werbeetats bei Machart Studios. Er ist aber nicht nur Zahlenjongleur, sondern programmiert als ehrgeiziger Tüftler seit zehn Jahren die coolsten Dinge und lebt im Web. Als studierter Informatiker ist Perfektion seine Sache, Individualisieren seine Stärke, und Fotografieren seine kreative Leidenschaft. Sven Bader bei Google+

19 Kommentare

  1. 5. Oktober 2010 Matt Antworten

    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

  2. […] Javascritpt Dock Fisheye Menu […]

  3. 25. Oktober 2010 machart Antworten

    @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.

  4. 20. Dezember 2010 Michu Antworten

    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

    • 20. Dezember 2010 machart Antworten

      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.

  5. 20. Dezember 2010 Michu Antworten

    Vielen herzlichen Dank für die schnelle Antwort.

    Schönen Tag dann noch.

    Gruß

  6. 20. Dezember 2010 Michu Antworten

    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ß

    • 20. Dezember 2010 machart Antworten

      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.

  7. 20. Dezember 2010 Michu Antworten

    Ok, danke für die Hinweise, werd danach mal schauen.

    Schönen Gruß

  8. 26. Januar 2011 Michu Antworten

    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!!!

  9. 27. Januar 2011 machart Antworten

    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.

  10. 13. Mai 2011 Paolo Antworten

    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

  11. 9. September 2011 Peter Antworten

    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…

    • 9. September 2011 Machart Studios Antworten

      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.

  12. 3. Januar 2012 Nicky Antworten

    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

  13. 3. Januar 2012 Machart Studios Antworten

    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

  14. 3. Januar 2012 Nicky Antworten

    Vielen Dank für die schnelle Antwort ich werde mal gucken ob ich etwas finde

  15. 19. April 2012 LordB Antworten

    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

  16. 16. Januar 2013 frank Antworten

    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 ;-)

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">

Machart Studios Werbeagentur