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.

View Demo | Download

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 Expand All

78 Comments… +add your?

Reply

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

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

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?
Reply

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

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

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

Dec 21, 2009 2:03 am

shuvro

let me try to my site. it’s awesome.
Reply

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
Reply

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?
Reply

Dec 25, 2009 2:13 am

webb

Simple and straight tutorial.
Reply

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

Dec 25, 2009 6:22 am

Saif

Thanks for the sharing
Reply

Dec 25, 2009 11:56 am

Ooty

Thanks for sharing, i will try on my web site
Reply

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…
Reply

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
Reply

Dec 26, 2009 10:35 am

ekonomi

I have been wondering about the question of selling the ebook or just giving it away. thanks
Reply

Dec 26, 2009 11:00 am

Teknoloji-Saglık-Cinsel

I can’t wait to get my hands on that report! Thanks Brian!
Reply

Dec 26, 2009 11:19 am

Dinle

Thanks for writing

Danke shön
Reply

Dec 26, 2009 11:22 am

Film Seyret

let me try to my site. it’s awesome.
Reply

Dec 26, 2009 11:35 am

Yemek Tarifleri

Thanks, have never seen this article before. Very useful. Regards Khalid.
Reply

Dec 26, 2009 12:03 pm

Türk Porno

Nice features, some a bit overexposed already, but nontheless nice ones.
Reply

Dec 26, 2009 12:25 pm

Okey Tavla Batak

Very Good Thanks ı love you ndesign-studio.com
Reply

Dec 26, 2009 12:53 pm

mp3

you are exactly right brother i love you
Reply

Dec 26, 2009 12:53 pm

dau

i will use these informations on my design
Reply

Dec 26, 2009 1:57 pm

sağlık yaşam

can’t wait to get my hands on that report! Thanks Brian!
Reply

Dec 26, 2009 5:32 pm

Surf Is My Life

thanks everyone. ı use css my design
Reply

Dec 28, 2009 5:34 pm

tel çit

thanks for alot for information
Reply

Dec 30, 2009 4:50 am

招聘

thanks for alot for information
Reply

Dec 30, 2009 11:05 pm

sikiş

Thank you from css menu, very very menus please :)
Reply

Dec 31, 2009 12:06 am

Firma Rehberi

Thank you very very much nice work,
Reply

Dec 31, 2009 5:54 pm

StyLe

Very nice:)) thanks.. ndesign-studio
Reply

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

Jan 04, 2010 8:30 pm

romacron

Thats really nice and it has a good functionality
Reply

Jan 05, 2010 5:04 pm

sohbet

good! thank you very much admin..
Reply

Jan 06, 2010 1:09 pm

Bsten

Great!! :)
How to use it on two or more rows?
Reply

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?
Reply

Jan 07, 2010 4:16 am

外汇

Thats really nice and it has a good functionality
Reply

Jan 07, 2010 1:56 pm

Lolly

awesome love it!!!

Got it to work with ease, brilliant!
Reply

Jan 10, 2010 2:14 pm

hmtal

Interesting post thanks – best male enhancement products
Reply

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

Jan 15, 2010 1:25 pm

Paul

See this site, where our friend just copied and added some icons: http://interface.eyecon.ro
Reply

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

Jan 17, 2010 9:33 am

Argent Facile

Merci ! c’est excellent !

Je vais le mettre sur mon site : http://www.gagner-economiser.com

;)
Reply

Jan 18, 2010 5:28 pm

graphic design colleges online

Very cool web freebie I love this css dock menu!
Reply

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

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?
Reply

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?
Reply

Jan 23, 2010 10:20 am

likbez

Thank! I liked the menu very much!!!
max-pix
Reply

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
Reply

Jan 29, 2010 5:06 pm

Per

Fantastic! Much appreciated.. great page.
Reply

Jan 31, 2010 3:47 am

Alex

Super DOCK!!! works perfectly on my site :D
CSS-DOCK preview–> http://www.pcgames.ucoz.com
Reply

Jan 31, 2010 9:23 am

webmaestro

So cool. I love it ! Thank you.
Reply

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
Reply

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
Reply

Feb 02, 2010 4:48 am

toddlers car seat safety guide

Great Job.!

Thank you vey much
Reply

Feb 02, 2010 9:38 am

Milind

Really great work !!!

Thank you
Reply

Feb 03, 2010 7:12 am

astuce

merci pour cette astuce! moi qui suis fan de mac, c’est très sympa comme truc :-)
Reply

Feb 03, 2010 1:23 pm

Luciano

You can see the result here :
http://www.lucianomarcio.oi.com.br/indexinicial.html
Reply

Feb 03, 2010 5:43 pm

isimiznet

yes,i am enjoying the wonderful conposition .
Reply

Feb 04, 2010 12:02 am

Alec

great sharing just installed on my forum :)

http://thecashchat.com/forum/index.php
Reply

Feb 04, 2010 2:00 am

tamil

Thanks for sharing. keep it up.
Reply

Feb 04, 2010 2:01 am

tamil

Thanks for sharing. Keep on going
Reply

Feb 04, 2010 2:06 am

tamil

Thanks for sharing. Nice work.
Reply

Feb 04, 2010 3:13 am

Mesothelioma

Thanks for sharing. keep it up.
Reply

Feb 06, 2010 9:42 pm

Zerred

,. how can i make the dock always on top?, like a navigation? please help,.
Reply

Feb 06, 2010 9:52 pm

Zerred

,uhmm,.? can somebody help????
Reply

Feb 08, 2010 12:00 pm

pratik agrawal

your dock is really awesome….

nice thinking..
Reply

Feb 09, 2010 9:07 am

vpsbul

Thanks for sharing. keep it up.