CSS Dock Menu
May 08, 2007 78 Comments
If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page.

CSS dock menu screenshot
Update: I no longer support the questons regard this dock menu. If you like the HiGloss icons used in the demos, you can get them as stock icons at IconDock.
1. Download Source Files
Download the CSS dock menu zip package.
2. Insert Code
In between the HTML <head> tag, add the following code
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>
The first part is the Javascript, second part is CSS stylesheet, and last part is the PNG hack for IE 6.
3. Configuration
Don’t forget to add the following code to anywhere within the <body> tag:
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>
4. Add or Remove Items
To add menu item to the top dock (note: span tag is after the img tag):
<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>
To add menu item to the bottom dock (note: span tag is before the img tag):
<a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>
Browser Compatibility
I have tested on IE 6, IE 7, Opera 9, Firefox 2, and Safari 2 (although there are some minor rendering issues with Safari).
Design Process of The Phoenix Illustration Illustrator knowhow
Collapse All





















Dec 09, 2009 6:31 am
Sergio Marin
Hello, good job this dock is very nice.
But i want to use this dock in the bottom of one site, but when i use the scrool the dock dont move…its in the same place where he start.
i chance the css, but the zone of mouse hover dont move only the images
Dec 17, 2009 8:59 pm
Denis Michaud
Hi, if you find a solution, can you tell me please?
I have the save problem.
dmichaud80@hotmail.com
Dec 18, 2009 3:46 pm
Denis Michaud
Try this, it worked for me :
form
{
min-height:92%;
}
Dec 23, 2009 10:02 pm
Peter
Google page speed seems to hate the dock menu, mainly because you size a 128 x 128 image as a 60 x 60 image and you don’t specify width and height in html.
Anyway around this?
Jan 11, 2010 4:51 pm
Denis Michaud
You can see the result here : http://www.religion.qc.ca/bouddhisme/bouddhisme.aspx .
Dec 09, 2009 6:38 am
Sergio Marin
you can see the example here:
http://www.kontenedor.com/prototipos/sergio/index2.html
Jan 30, 2010 3:27 am
alex
try this
http://www.dynamicdrive.com/dynamicindex17/ajaxincludes.htm
Description: This script uses Ajax (DHTML interacting with the server) to let you dynamically include the contents of an external page onto the current document. It’s similar in function to our Iframe SSI script, though uses no frames, obviously. :)
worked just fine for me!
Dec 09, 2009 10:26 am
Michael Behrens
Hi, i’m having some problems with CSS Dock menu in IE. its works great in Firefox but all the images display on the right and are really small. the fisheye is also wrong… does anyone have a fix for this?
Dec 10, 2009 8:21 pm
Mr Đại
Wow !….Thank you for sharing it ! Very nice …
Jan 19, 2010 10:24 am
kwl
yes,i am enjoying the wonderful conposition .from China.
Dec 18, 2009 11:20 am
Web Tasarımı
I still find Drupal templates sites are lagging behind the number of Joomla template sites. The more templates available free or otherwise will help the popularity of Drupal.
Dec 18, 2009 3:37 pm
iman&maroc
svp, j’ai testé sous IE8, mais àa l’air ne fonctionne pas,
Dec 20, 2009 11:48 am
zabery
good!!!,it’s very strong ,javascript is also very strong
Jan 13, 2010 1:05 pm
Denis Michaud
Il fonctionne très bien sous IE8. Vérifie que ton fichier JavaScript et ton CSS sont bien en place.
Dec 21, 2009 2:03 am
shuvro
let me try to my site. it’s awesome.
Dec 23, 2009 11:47 am
Web Tasarımı
I still find Drupal templates sites are lagging behind the number of Joomla template sites. The more templates available free or otherwise will help the popularity of Drupal
Dec 24, 2009 12:24 am
Peter
Google page speed seems to hate the dock menu, mainly because you size a 128 x 128 image as a 60 x 60 image and you don’t specify width and height in html.
Anyway around this?
Dec 25, 2009 2:13 am
webb
Simple and straight tutorial.
Dec 25, 2009 2:22 am
Hayden
can anyone help me? I can;t figure out how to get a background on this! i have tried inserting bgcolor in certain spots but nothing! please help!
Dec 25, 2009 6:22 am
Saif
Thanks for the sharing
Dec 25, 2009 11:56 am
Ooty
Thanks for sharing, i will try on my web site
Dec 25, 2009 1:53 pm
SmarterTech
I want to use a vertical menu instead of the horizontal one shared here.
Can anyone help me…
Dec 25, 2009 10:57 pm
video75
Thank you for sharing it ! Very nice
Jan 12, 2010 4:14 pm
r
fuck you fuck you fuck you fuck you fuck you fuck you fuck you fuck you fuck you fuck you fuck you fuck you fuck you fuck you fuck you fuck you fuck you fuck you fuck you fuck you fuck you fuck you fuck you fuck you fuck you fuck you
Dec 26, 2009 10:35 am
ekonomi
I have been wondering about the question of selling the ebook or just giving it away. thanks
Dec 26, 2009 11:00 am
Teknoloji-Saglık-Cinsel
I can’t wait to get my hands on that report! Thanks Brian!
Dec 26, 2009 11:19 am
Dinle
Thanks for writing
Danke shön
Dec 26, 2009 11:22 am
Film Seyret
let me try to my site. it’s awesome.
Dec 26, 2009 11:35 am
Yemek Tarifleri
Thanks, have never seen this article before. Very useful. Regards Khalid.
Dec 26, 2009 12:03 pm
Türk Porno
Nice features, some a bit overexposed already, but nontheless nice ones.
Dec 26, 2009 12:25 pm
Okey Tavla Batak
Very Good Thanks ı love you ndesign-studio.com
Dec 26, 2009 12:53 pm
mp3
you are exactly right brother i love you
Dec 26, 2009 12:53 pm
dau
i will use these informations on my design
Dec 26, 2009 1:57 pm
sağlık yaşam
can’t wait to get my hands on that report! Thanks Brian!
Dec 26, 2009 5:32 pm
Surf Is My Life
thanks everyone. ı use css my design
Dec 28, 2009 5:34 pm
tel çit
thanks for alot for information
Dec 30, 2009 4:50 am
招聘
thanks for alot for information
Dec 30, 2009 11:05 pm
sikiş
Thank you from css menu, very very menus please :)
Dec 31, 2009 12:06 am
Firma Rehberi
Thank you very very much nice work,
Dec 31, 2009 5:54 pm
StyLe
Very nice:)) thanks.. ndesign-studio
Jan 04, 2010 8:21 pm
Loaden
With this patch the Fisheye works after scrolling while it’s fixed positioned:
http://www.monkey-business.biz/181/jquery-interfaces-fisheye-position-fixed-patch/
Jan 23, 2010 10:39 am
lee
Doesn’t work in IE for me. In Safari it does.
Jan 04, 2010 8:30 pm
romacron
Thats really nice and it has a good functionality
Jan 05, 2010 5:04 pm
sohbet
good! thank you very much admin..
Jan 06, 2010 1:09 pm
Bsten
Great!! :)
How to use it on two or more rows?
Jan 06, 2010 9:39 pm
Gunner Doyle
This is fantastic. I have been able to implement in a regular website using css, but have yet to be able to implement into my wordpress theme. Has anyone been able to add this to wordpress theme? If so, could you lend a hand?
Jan 07, 2010 4:16 am
外汇
Thats really nice and it has a good functionality
Jan 07, 2010 1:56 pm
Lolly
awesome love it!!!
Got it to work with ease, brilliant!
Jan 10, 2010 2:14 pm
hmtal
Interesting post thanks – best male enhancement products
Jan 11, 2010 4:22 pm
Eric Di Bari
I don’t know if I see have a way to include this in my site, but I wish I did.
Jan 15, 2010 1:25 pm
Paul
See this site, where our friend just copied and added some icons: http://interface.eyecon.ro
Jan 17, 2010 7:19 am
Star Config web design sydney
Thank you for showing us how to do it css dock menu, it is really good article, especially i like it becouse you showed all coding here in this article, so it is going to make it easire wehn we design it. Well done.
Jan 17, 2010 9:33 am
Argent Facile
Merci ! c’est excellent !
Je vais le mettre sur mon site : http://www.gagner-economiser.com
;)
Jan 18, 2010 5:28 pm
graphic design colleges online
Very cool web freebie I love this css dock menu!
Jan 18, 2010 8:54 pm
picture scanner
Thanks heaps for this! This CSS Dock menu is simply the best, at least for me, among the menu effects out there. Again, thanks a lot!
Jan 18, 2010 9:16 pm
purple comforter set
Yeah, whether your a Mac fan or not, this CSS Dock Menu definitely rocks. Now, how do I add this into a wordpress site?
Jan 21, 2010 5:49 pm
lee
I might be a simpleton, but how can i allign to images on the left and right side of the dock? Can’t seem to get it working… Anyone got a solution?
Jan 23, 2010 10:20 am
likbez
Thank! I liked the menu very much!!!
max-pix
Jan 25, 2010 1:38 pm
D Bhana
Dear ndesign-studio,
Could I please have your permission to use the CSS Dock Menu for my school project.
Kind regards,
D. Bhana
p.s. This will be used for non-profit purposes
Jan 29, 2010 5:06 pm
Per
Fantastic! Much appreciated.. great page.
Jan 31, 2010 3:47 am
Alex
Super DOCK!!! works perfectly on my site :D
CSS-DOCK preview–> http://www.pcgames.ucoz.com
Jan 31, 2010 9:23 am
webmaestro
So cool. I love it ! Thank you.
Jan 31, 2010 10:56 am
community classsifieds
Superb designs. Truly a masterpiece.
Sure a lot of intelligent brain behind this,
Thanks a million.
Regards,
Sean Preton
Feb 01, 2010 8:31 am
Hotte
Heyho, thanks a lot! I luv this script! Go on and I hope you´ll have much fun by working on websites :D
Feb 02, 2010 4:48 am
toddlers car seat safety guide
Great Job.!
Thank you vey much
Feb 02, 2010 9:38 am
Milind
Really great work !!!
Thank you
Feb 03, 2010 7:12 am
astuce
merci pour cette astuce! moi qui suis fan de mac, c’est très sympa comme truc :-)
Feb 03, 2010 1:23 pm
Luciano
You can see the result here :
http://www.lucianomarcio.oi.com.br/indexinicial.html
Feb 03, 2010 5:43 pm
isimiznet
yes,i am enjoying the wonderful conposition .
Feb 04, 2010 12:02 am
Alec
great sharing just installed on my forum :)
http://thecashchat.com/forum/index.php
Feb 04, 2010 2:00 am
tamil
Thanks for sharing. keep it up.
Feb 04, 2010 2:01 am
tamil
Thanks for sharing. Keep on going
Feb 04, 2010 2:06 am
tamil
Thanks for sharing. Nice work.
Feb 04, 2010 3:13 am
Mesothelioma
Thanks for sharing. keep it up.
Feb 06, 2010 9:42 pm
Zerred
,. how can i make the dock always on top?, like a navigation? please help,.
Feb 06, 2010 9:52 pm
Zerred
,uhmm,.? can somebody help????
Feb 08, 2010 12:00 pm
pratik agrawal
your dock is really awesome….
nice thinking..
Feb 09, 2010 9:07 am
vpsbul
Thanks for sharing. keep it up.