← Back to Blog

CSS Dock Menu

May 08, 2007 270 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
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).

Collapse All Expand All

270 Comments… +add yours?

  1. Dec 09, 2009 @ 06:31:18

    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 @ 20:59:53

      Denis Michaud

      Hi, if you find a solution, can you tell me please?
      I have the save problem.

      dmichaud80@hotmail.com

    • Dec 18, 2009 @ 15:46:53

      Denis Michaud

      Try this, it worked for me :

      form
      {
      min-height:92%;
      }

    • Dec 23, 2009 @ 22:02:51

      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 @ 16:51:46

      Denis Michaud

    • Apr 14, 2010 @ 20:02:29

      diego

      hi this is just a test

    • Mar 01, 2011 @ 03:55:09

      KANG Ghee Keong

      To allow the dock to flow with the page, the CSS file just needs to be changed to the one below. And I’m using the bottom dock only, I don’t need the top one.

      (This is useful for our system that manages university student activities, to show the upcoming activities as interactive images.)


      body {
      font: 11px Arial, Helvetica, sans-serif;
      background: #ffffff url(images/main-bg.gif);
      padding: 0;
      margin: 0;
      }
      img {
      border: none;
      }

      /* dock */
      .dock {
      position: relative;
      height: 0px;
      text-align: center;
      }

      #dock2 {
      xwidth: 100%;
      xbottom: 0px;
      position: absolute;
      xleft: 0px;
      }
      .dock-container2 {
      xposition: relative;
      height: 50px;
      xbackground: url(images/dock-bg.gif);
      padding-left: 20px;
      }
      a.dock-item2 {
      display: block;
      font: bold 12px Arial, Helvetica, sans-serif;
      width: 40px;
      color: #000000;
      bottom: 0px;
      position: absolute;
      text-align: center;
      text-decoration: none;
      }
      .dock-item2 span {
      display: none;
      padding-left: 20px;
      }
      .dock-item2 img {
      border: none;
      margin: 5px 10px 0px;
      width: 100%;
      }

  2. Dec 09, 2009 @ 06:38:14

    Sergio Marin

    • Jan 30, 2010 @ 03:27:31

      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!

  3. Dec 09, 2009 @ 10:26:14

    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?

  4. Dec 10, 2009 @ 20:21:53

    Mr Đại

    Wow !….Thank you for sharing it ! Very nice …

    • Jan 19, 2010 @ 10:24:52

      kwl

      yes,i am enjoying the wonderful conposition .from China.

  5. Dec 18, 2009 @ 11:20:18

    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.

  6. Dec 18, 2009 @ 15:37:35

    iman&maroc

    svp, j’ai testé sous IE8, mais àa l’air ne fonctionne pas,

    • Dec 20, 2009 @ 11:48:04

      zabery

      good!!!,it’s very strong ,javascript is also very strong

    • Jan 13, 2010 @ 13:05:46

      Denis Michaud

      Il fonctionne très bien sous IE8. Vérifie que ton fichier JavaScript et ton CSS sont bien en place.

    • Jul 27, 2010 @ 07:35:01

      yazar kasa

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

  7. Dec 21, 2009 @ 02:03:18

    shuvro

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

  8. Dec 23, 2009 @ 11:47:51

    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

  9. Dec 24, 2009 @ 00:24:54

    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?

  10. Dec 25, 2009 @ 02:13:36

    webb

    Simple and straight tutorial.

  11. Dec 25, 2009 @ 02:22:32

    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!

  12. Dec 25, 2009 @ 06:22:45

    Saif

    Thanks for the sharing

  13. Dec 25, 2009 @ 11:56:07

    Ooty

    Thanks for sharing, i will try on my web site

  14. Dec 25, 2009 @ 13:53:57

    SmarterTech

    I want to use a vertical menu instead of the horizontal one shared here.
    Can anyone help me…

  15. Dec 25, 2009 @ 22:57:40

    video75

    Thank you for sharing it ! Very nice

  16. Dec 26, 2009 @ 10:35:05

    ekonomi

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

  17. Dec 26, 2009 @ 11:00:43

    Teknoloji-Saglık-Cinsel

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

  18. Dec 26, 2009 @ 11:19:05

    Dinle

    Thanks for writing

    Danke shön

  19. Dec 26, 2009 @ 11:22:23

    Film Seyret

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

  20. Dec 26, 2009 @ 11:35:03

    Yemek Tarifleri

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

  21. Dec 26, 2009 @ 12:03:58

    Türk Porno

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

  22. Dec 26, 2009 @ 12:25:29

    Okey Tavla Batak

    Very Good Thanks ı love you ndesign-studio.com

  23. Dec 26, 2009 @ 12:53:18

    mp3

    you are exactly right brother i love you

  24. Dec 26, 2009 @ 12:53:47

    dau

    i will use these informations on my design

  25. Dec 26, 2009 @ 13:57:27

    sağlık yaşam

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

  26. Dec 26, 2009 @ 17:32:46

    Surf Is My Life

    thanks everyone. ı use css my design

  27. Dec 28, 2009 @ 17:34:19

    tel çit

    thanks for alot for information

  28. Dec 30, 2009 @ 04:50:18

    招聘

    thanks for alot for information

  29. Dec 30, 2009 @ 23:05:40

    sikiş

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

  30. Dec 31, 2009 @ 00:06:48

    Firma Rehberi

    Thank you very very much nice work,

  31. Dec 31, 2009 @ 17:54:50

    StyLe

    Very nice:)) thanks.. ndesign-studio

  32. Jan 04, 2010 @ 20:21:23

    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:35

      lee

      Doesn’t work in IE for me. In Safari it does.

    • Feb 12, 2010 @ 03:43:55

      Loaden

      I fixed the plugin also for IE now. Try it. It works. :)

    • Feb 18, 2010 @ 08:57:30

      Dusso

      Thank you! Your patch saved me daays of work =)

    • Jun 22, 2010 @ 07:35:30

      roei

      Hi,

      can you please tell me how do I get this fixed position to

      work at the bottom of the page?

      Thanks

  33. Jan 04, 2010 @ 20:30:35

    romacron

    Thats really nice and it has a good functionality

  34. Jan 05, 2010 @ 17:04:53

    sohbet

    good! thank you very much admin..

  35. Jan 06, 2010 @ 13:09:26

    Bsten

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

  36. Jan 06, 2010 @ 21:39:50

    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?

  37. Jan 07, 2010 @ 04:16:22

    外汇

    Thats really nice and it has a good functionality

  38. Jan 07, 2010 @ 13:56:57

    Lolly

    awesome love it!!!

    Got it to work with ease, brilliant!

  39. Jan 10, 2010 @ 14:14:49

    hmtal

    Interesting post thanks – best male enhancement products

  40. Jan 11, 2010 @ 16:22:54

    Eric Di Bari

    I don’t know if I see have a way to include this in my site, but I wish I did.

  41. Jan 15, 2010 @ 13:25:29

    Paul

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

  42. Jan 17, 2010 @ 07:19:40

    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.

  43. Jan 17, 2010 @ 09:33:16

    Argent Facile

    Merci ! c’est excellent !

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

    ;)

  44. Jan 18, 2010 @ 17:28:48

    graphic design colleges online

    Very cool web freebie I love this css dock menu!

  45. Jan 18, 2010 @ 20:54:48

    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!

  46. Jan 18, 2010 @ 21:16:42

    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?

  47. Jan 21, 2010 @ 17:49:02

    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?

  48. Jan 23, 2010 @ 10:20:28

    likbez

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

  49. Jan 25, 2010 @ 13:38:17

    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

  50. Jan 29, 2010 @ 17:06:47

    Per

    Fantastic! Much appreciated.. great page.

  51. Jan 31, 2010 @ 03:47:31

    Alex

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

  52. Jan 31, 2010 @ 09:23:19

    webmaestro

    So cool. I love it ! Thank you.

  53. Jan 31, 2010 @ 10:56:18

    community classsifieds

    Superb designs. Truly a masterpiece.
    Sure a lot of intelligent brain behind this,

    Thanks a million.
    Regards,
    Sean Preton

  54. Feb 01, 2010 @ 08:31:24

    Hotte

    Heyho, thanks a lot! I luv this script! Go on and I hope you´ll have much fun by working on websites :D

  55. Feb 02, 2010 @ 04:48:24

    toddlers car seat safety guide

    Great Job.!

    Thank you vey much

  56. Feb 02, 2010 @ 09:38:39

    Milind

    Really great work !!!

    Thank you

  57. Feb 03, 2010 @ 07:12:35

    astuce

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

  58. Feb 03, 2010 @ 13:23:08

    Luciano

  59. Feb 03, 2010 @ 17:43:33

    isimiznet

    yes,i am enjoying the wonderful conposition .

  60. Feb 04, 2010 @ 00:02:15

    Alec

    great sharing just installed on my forum :)

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

  61. Feb 04, 2010 @ 02:00:30

    tamil

    Thanks for sharing. keep it up.

  62. Feb 04, 2010 @ 02:01:43

    tamil

    Thanks for sharing. Keep on going

  63. Feb 04, 2010 @ 02:06:18

    tamil

    Thanks for sharing. Nice work.

  64. Feb 04, 2010 @ 03:13:44

    Mesothelioma

    Thanks for sharing. keep it up.

  65. Feb 06, 2010 @ 21:42:07

    Zerred

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

  66. Feb 06, 2010 @ 21:52:09

    Zerred

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

  67. Feb 08, 2010 @ 12:00:18

    pratik agrawal

    your dock is really awesome….

    nice thinking..

  68. Feb 09, 2010 @ 09:07:32

    vpsbul

    Thanks for sharing. keep it up.

  69. Feb 09, 2010 @ 11:29:08

    435BruxutsNast

  70. Feb 10, 2010 @ 00:25:36

    Bharati

    Very Nice………………..
    Gud Bloggggggg

  71. Feb 11, 2010 @ 08:02:44

    kobiler

    uu thanks very nice blogg ….

  72. Feb 11, 2010 @ 08:04:24

    Firmalar Rehberi

    Great Job.!

    Thank you vey much :)

  73. Feb 11, 2010 @ 08:06:40

    bilgisayar firmaları

    Great Job.!

    Thank you vey much

    this is perfect bussines directory

  74. Feb 12, 2010 @ 13:14:51

    it050115

    wow! May I use it as my windows7 desktop/theme instead?

  75. Feb 13, 2010 @ 16:07:28

    Java developer

    Big thanks. Really great stuff

  76. Feb 14, 2010 @ 08:51:12

    Bernd

    Hello, the dock looks realy nice, but I can´t download the pack, it says ” The File does not exist”. I would realy apriciate it, if you could fix it.

    Bernd

  77. Feb 14, 2010 @ 12:15:48

    hanip

    hi, please update link for download css-dock-menu.zip!!! file not found…

  78. Feb 14, 2010 @ 12:54:03

    Michael

    awesome menu!!!

    But how do i get the bottom menu in the middel of my page that the zoom effect is use with mouse from over and under the menu???

    Please help me. My html knowlege is not so good that i can do it on my own.

    Sorry for my bad english

  79. Feb 14, 2010 @ 12:56:56

    Michael

  80. Feb 15, 2010 @ 05:34:07

    web optimizasyon

    web optimizasyon konularında bilgi ve destek alabilirsiniz

  81. Feb 15, 2010 @ 05:35:48

    Firma Rehberi

    Firma rehberi turkiye genelindeki bir çok firma bilgisi ve ürün hizmetlerinin yaynlandığı firma rehberi sitesidir.

  82. Feb 16, 2010 @ 09:11:25

    Miele Servisi

    Miele Servisi , Tamiri ve Bakım Hizmetleri

  83. Feb 16, 2010 @ 11:28:23

    Victor Klaus

    Icons don’t have to be very small, you can also use it as kind of eye-catcher. See our site: http://www.degeustwins.nl.
    Beautiful menu!
    Thanks

  84. Feb 16, 2010 @ 12:00:22

    Lau

    the link is broken :(
    can’t you fix it please?

  85. Feb 16, 2010 @ 12:33:41

    Victor Klaus

    here comes the link again:

    http://www.degeustwins.nl

    bye

  86. Feb 16, 2010 @ 19:49:48

    sven

    Hello,
    the download link is Broken. Have you an alternative? And this was great work. Very nice

  87. Feb 17, 2010 @ 02:04:39

    Victor Klaus

    Good links for Fisheye-menu can be found here:
    http://www.wizzud.com/jqDock/
    and
    http://eudock.jules.it/index-eudock2.0.php (f*cking brilliant site!)

    Good luck,

    Victor

  88. Feb 17, 2010 @ 09:44:14

    Weddings Fashion

    But how do i get the bottom menu in the middel of my page that the zoom effect is use with mouse from over and under the menu?

  89. Feb 19, 2010 @ 10:26:03

    Structured Settlements

    Nice Collection Thanks for share…

  90. Feb 20, 2010 @ 13:10:03

    Luciano Marcio

    You can see the excellent result on my web site:
    http://www.lucianomarcio.oi.com.br/indexinicial.html

  91. Feb 22, 2010 @ 11:56:49

    marc

    Good stuff! Thanks for sharing!

  92. Feb 23, 2010 @ 00:50:44

    XHTML TEAM

    Great collection. Thanks for sharing…

  93. Feb 23, 2010 @ 18:34:13

    Beau Chevassus

    Here’s my example:
    http://www.b.eaudacio.us/
    I used these for icons:
    http://icons.mysitemyway.com/category/antique-glowing-copper-orbs-icons/

    Looks awesome I think! Thank you very, very much! (too me all day to implement it, but I’m getting better I think…)

  94. Feb 25, 2010 @ 11:04:57

    black leather jacket

    Hello Very nice the download link is Broken. Have you an alternative? And this was great work.

  95. Mar 01, 2010 @ 07:08:50

    stef

    Hello, I placed the script on my site but I’ve got a JavaScript error with : $(document).ready
    Can someone help ? Thanks !

  96. Mar 01, 2010 @ 15:16:31

    AdeL

    thanks alot
    how can i put the menu in any place in the page not only in the top and bottom ???

  97. Mar 03, 2010 @ 04:27:30

    Capsloc

    Same as AdeL. I tried editing the CSS to no avail. CSS is not my specialty. Any way to get this to fit in the location i place it?

    Thanks!

  98. Mar 04, 2010 @ 03:27:39

    turismo china

    it’s very usefull,thanks for sharing!

  99. Mar 05, 2010 @ 03:19:27

    Radik

    Nice work! It perfet job!)))))

  100. Mar 05, 2010 @ 04:14:25

    Fernando

    Hi…this is a fantastic module. I’m trying to use under a Joomla project. I’m not using all of the itens, just 4 icons on the dock and i’ve positioned on the header but i’ve been looking for an another position, aligned on the right of the header but i couldn’t do it. I’ve tried to do the positioning on CSS but it’s not working.
    You guys know how to do it??I supposed that the positioning is determined by jquery but i simply couldn’t understand the code. I’ve just found that is a inline CSS with left atribute.
    Anyone can help me please? thanks!!

  101. Mar 07, 2010 @ 16:54:09

    Brownie

    Hi,
    I’ve been using your fabulous Mac style dock, but I don’t know how to get spacing between the icons. It looks awful for now if I don’t get some spaces between the icons I made..
    Could you help me please ?

    Thank you :)
    Brownie

  102. Mar 08, 2010 @ 06:06:38

    Dmitry Dulepov

    Wow! Really cool effect! I’d love to have that with ExtJS framework too!

  103. Mar 08, 2010 @ 13:49:37

    kayseri sohbet

    ur a great blog. I have been continuously followed with interest your article

  104. Mar 09, 2010 @ 07:35:33

    Aurélio Lima

    Your patch don’t worked for me.

  105. Mar 09, 2010 @ 12:07:26

    Website Design

    that’s really a fantastic post ! added to my favourite blogs list.. I have been reading your blog last couple of weeks and enjoy every bit. Thanks.

  106. Mar 11, 2010 @ 16:16:32

    Victor Klaus

    Placement of the module is very easy, once you know how to work with layers. Placed 4 menu’s in layers all over the mainpage (the two top menus consist of only one item each). http://www.degeustwins.nl
    Success, Victor

  107. Mar 12, 2010 @ 04:13:00

    McDonalds

    oh, yes, i’m a “big mac” fan!!

  108. Mar 14, 2010 @ 12:53:07

    oyun hileleri

    thaks for this subject.oyun hileleri

  109. Mar 16, 2010 @ 07:30:11

    hiroshi

    when the cursor comes close to the CSS dock menu.
    It start to enlarge.
    But its start point is too far for my website.
    I want to start enlargement much closer point.
    How can I adjust the distance it start to move between cursor and menu

  110. Mar 16, 2010 @ 09:24:20

    虫虫博客2009

    博主太有才了 学习了

  111. Mar 18, 2010 @ 06:55:12

    San Francisco web design

    great tips… thanks a lot for sharing the useful stuff… will let u know of my success after applying these on my own

  112. Mar 18, 2010 @ 16:03:34

    mustafa

  113. Mar 21, 2010 @ 15:17:40

    Nikita Sumeiko

    This tutorial really helped me. Very nice and useful tip on creating Mac’s Dock menu.

    Thanks a lot and keep working in such a cool way.

  114. Mar 24, 2010 @ 01:56:52

    Turkey Tours Travel

    thank you for usefull information. we can need these codes.

    shashot travel

  115. Mar 24, 2010 @ 07:44:42

    Nikolaev

    I definitely like this menu, but as far as I can see the iTheme doesn’t use it any more. It’s a pity because the menu looks really fascinating and would make the theme stand out from others

  116. Mar 25, 2010 @ 03:52:30

    isimiznet forum

    Good stuff! Thanks for sharing!

  117. Mar 27, 2010 @ 18:44:07

    Chris

    Thanks Nice Post
    you for usefull information

  118. Mar 28, 2010 @ 07:23:55

    SiNCrO Online

    This is really cool…

    but, can someone please help me?

    i’ve been trying to change the background of the dock… i saw other examples where it was transparent and a rainbow, so i’m just curious to see if i could get my css dock like theirs…

    • Mar 28, 2010 @ 09:45:17

      SiNCrO Online

      nevermind.. i got it fixed…

      but does anyone know why the wibiya bar cant work when this is on my site?

  119. Mar 28, 2010 @ 20:42:40

    SiNCrO Online

    nevermind, again.

    i found that this uses an older verison of “jQuery”, so i just need to update that… lol

    thanks, if any1 tried to help anyways…

  120. Mar 29, 2010 @ 04:48:25

    格安レンタカー比較

    The trick, if there is such a thing, is variety. Make certain you collect a steady and varied collection of links

  121. Apr 01, 2010 @ 10:36:16

    Bella

    Is there a way to add left and right arrows to make the menu scroll?

    I would like to be able to add more icons as needed but I have no clue how to do this since I am not a programmer :(

  122. Apr 04, 2010 @ 05:25:51

    website design

    This is really awesome……..Keep it up!!

  123. Apr 06, 2010 @ 22:27:57

    Baatarchuluun

    hello, thank you very very …. much. I’m from Mongolia.

  124. Apr 07, 2010 @ 15:16:11

    reseller

    thanks for you cool css menus.

  125. Apr 08, 2010 @ 21:44:31

    Chicago Web Design

    Just think of the custom CMS you could make with something like this! Awesome post author.

  126. Apr 09, 2010 @ 09:12:38

    nimedk1

    Hi can anyone please tell me the best way to increase the spacing between the icons? margin doesnt work bacause the absolut positioning for the . I ran out of ideas! Anyone?

    • Apr 16, 2010 @ 05:47:46

      Ari

      same question here!
      I love your dock…. but how can u set more space between the icons??
      I’m trying to do this for quite three days now….. and I’m really not sooo new in css…..

      help appreciated!

      And thank you for sharing this great work!! :-)

  127. Apr 10, 2010 @ 03:14:25

    acne clearing

    i agree with u. thanks for share it.keep good working

  128. Apr 11, 2010 @ 03:16:42

    Canlı Sunum

    thank you very very …. much. I’m from Turkey.

  129. Apr 14, 2010 @ 04:38:36

    psp games

    I will try this way.It’s very co0l.
    how you can make it?

  130. Apr 19, 2010 @ 01:49:14

    ikinci el network

    Okey Thank you for go go go

  131. Apr 19, 2010 @ 04:22:45

    mahendra

    i have finding a css menu then a show this result i am regular digger on digg i am fined on you on digg thank for sharing . but i have need css menu .

  132. Apr 19, 2010 @ 14:54:14

    dreambox 800 HD

    I will try this way.It’s very co0l.
    how you can make it?

  133. Apr 19, 2010 @ 14:54:38

    dreambox 500

    thank you very very …. much. I’m from Turkey.

  134. Apr 19, 2010 @ 14:56:09

    accessoires iphone

    i’ve been trying to change the background of the dock… i saw other examples where it was transparent and a rainbow, so i’m just curious to see if i could get my css dock like theirs…

  135. Apr 21, 2010 @ 11:14:13

    Laptop Etiketleri

    good! thank you very much admin..

  136. Apr 22, 2010 @ 11:32:34

    slimjim

    Hi guys, i absolutely love this menu, but i can’t get it to work with the latest jQuery?
    Is anyone else experiencing this?
    You can see from my site (under construction) that it’s not quite working. If I simply move the include script tag for the interface.js below the jquery.js then it works but subsequently stops anything that’s referencing the jQuery.js

    I’m expecting anyone to fix this for me but if you have experienced the same problem i’d love to hear your solution.

    Once again, LOVE this menu style.

    • Apr 22, 2010 @ 11:34:14

      slimjim

      EDIT!

      “I’m NOT expecting”

  137. Apr 24, 2010 @ 00:59:18

    Raj Vaghela

    excellent work, i want this style menu use some extra ordinary site. thanks i and more this type of extra ordinary menu.

    Thanks

  138. Apr 24, 2010 @ 09:01:00

    Anil

    i appriciate the menu but i have a problem i have 30 buttons how do i auto scroll on mouse over

  139. Apr 27, 2010 @ 11:09:47

    Mitch

    It’s really very nice work. TKS alot

    But I can’t get around two major problems …
    1.
    the interface script interferes with other jquery.js files and causes malfunction of other jquery depending scripts

    2. the bottom dock only stays on the bottom in a “non”scrollable page. The moment a page is longer than the screen and you scroll the page down. the dock would not move with the scroll (meaning it would not stay at the bottom edge of the screen) but would move into the screen and up the screen as you scroll further down.

    Cheers

  140. Apr 29, 2010 @ 09:15:14

    Rich @ web design leeds

    Nice menu, maybe users will be so overwhelmed with the menu they will invest in an apple mac and have far happier lives.

  141. Apr 29, 2010 @ 11:04:51

    FrankieFilm

    полет фантазии надо срочно остановить, а то улетит незнамо куда и не поймаешь :))

  142. Apr 30, 2010 @ 14:04:09

    parisdugunsalonu

    thanks for you . add site paris ve berlin düğün salonu.

  143. May 04, 2010 @ 16:38:28

    Ricardo

    Hello,

    I am very thankful for this script, however I have installed a plugin in wordpress where I had this working, and the dock menu stopped from working, the plugin is a page flip plugin, any ideas on this one?

    Best Regards

    Ricardo

  144. May 05, 2010 @ 02:46:40

    peng

    very nice thanks 还没中文呢

  145. May 06, 2010 @ 04:47:47

    ipad case

    i will use this tip for my site. thanks for cool tips.

  146. May 08, 2010 @ 22:00:42

    Mitch

    I LOVE THIS NEW AGE FREE SUPPRT BLOGS FORUMS FREE BUT VOLUNTEER AND FREE SUPPORT

    It’s all super cool as long as you JUST DONT ASK A QUESTION – OK! No-one of these over brainy kids todays will ever understand why you would ask a question anyways, They are SO EXTREME PERFECT AND GOOD! oh- and free

    just keep on praising each other you are all so marvelous and exceptional intelligent WOW WOW WOW WOW WOW.

    And – there we go – no one asks you to accept this free super fuck-up!

  147. May 12, 2010 @ 14:08:55

    Andy

    Awesome!! I love it. This will come in handy, thanks! Great job.

  148. May 12, 2010 @ 21:43:57

    Devacd

    I can get the images to come up however their sliding back and forth is not working….I am sorry about being so vague however if anyone can help me i’d greatly appreciate it!

    • May 13, 2010 @ 06:59:40

      Devacd

      nevermind i figured it out. This is great! Thank you

  149. May 14, 2010 @ 07:19:56

    Wener

    well ~~~i use it to make my blog~~~~thankssssssssssssss~~~~

    • May 24, 2010 @ 05:32:10

      red pepper

      nevermind i figured it out. This is great! Thank you

  150. May 14, 2010 @ 12:03:33

    porno

    Simple and straight tutorial.

  151. May 14, 2010 @ 12:04:40

    türbanlı porno

    thanks.It’s really very nice work.

  152. May 18, 2010 @ 11:52:04

    GuoKai

    the css
    #dock {
    bottom:0;
    left:0;
    position:absolute;
    width:100%;
    }

    when
    #dock {
    bottom:0;
    left:0;
    position:fixed;
    width:100%;
    }
    I want to fixed it at bottom,but it doesn’t work.can you help me?
    My Mail :mail@guokai.name

  153. May 18, 2010 @ 16:23:42

    Nikki

    Hi there, i am trying to make the icons in my dock menu bigger. i have 128×128 px icons and it stays small. how do i manipulate the css to make the icons bigger and the dock menu bigger? Please will you respond and help me as soon as possible. I would really appreciate the help. i am a great fan of this site.

    thank you

  154. May 18, 2010 @ 16:28:29

    Nikki

    i am able to make the icons bigger by changing the width and height of .dock-image-item but then the fish eye effect is not visible, it shifts the icons to the side then. PLEASE help :)

  155. May 22, 2010 @ 05:33:56

    web dizayn

    Incredible post. Thanks!

  156. May 22, 2010 @ 05:35:57

    rüya tabirleri sözlüğü

    Great Job! Very nice work.

    rüya tabirleri sözlüğü

  157. May 22, 2010 @ 05:37:30

    kredi hesaplama

    This is exactly what I was searching for. Thanks.

    Kredi Hesaplama

  158. May 22, 2010 @ 05:59:24

    Alex

    Just though you might be interested to know – I’ve created my own plugin for jQuery creating the same effect, but not requiring the fish-eye plugin…. It can also be used to animate a single icon anywhere on the page.
    http://roslindesign.com/blog/2010/05/21/create-a-apple-style-dock-bar-with-jquery-using-the-resize-on-approach-plugin/

  159. May 23, 2010 @ 01:05:05

    telmo

    Gracias… esta espectacular…

  160. May 25, 2010 @ 08:37:22

    Medyumlar

    Gracias… esta espectacular…

  161. May 27, 2010 @ 21:28:03

    Hoque Md.Nazmul

    Implemented docking style in one of pages in
    http://nazmulweb.com/news/

  162. May 28, 2010 @ 20:23:12

    jacklisea

    thks, i study now.is very useful for me.

  163. Jun 01, 2010 @ 01:48:37

    laptop tamiri

    hi this is just a test

  164. Jun 01, 2010 @ 01:49:12

    laptop tamiri

    Gracias… esta espectacular…

  165. Jun 03, 2010 @ 03:25:28

    baby toys

    Apple css dock is very simple and perfect, and I downloaded, the icon will replace the windows would be very cool

    • Jun 28, 2010 @ 22:27:14

      anonymous

      the icon will replace the windows,
      the DOS will replace the icons,
      time is like that.

  166. Jun 03, 2010 @ 16:43:24

    hmmmm

    no go on wordpress…. :(

  167. Jun 03, 2010 @ 16:45:01

    hmmmm

    Nice update::::::> “Update: I no longer support the questons regard this dock menu.

    Anyone have a clue how to get this working on wordpress???

  168. Jun 04, 2010 @ 15:02:31

    adrienne

    this code isn’t working for me.
    i’m doing a we design final next week and i would really like to use this menu.

    PLEASE HELP!

    and if any one has any ideas for a web page, any comments would be great! email them to me.

    adriennedziemieszko@live.com

  169. Jun 10, 2010 @ 02:06:47

    karsono

    I would like to take this menu in my free template, please let me do it, thank you.

  170. Jun 11, 2010 @ 16:02:28

    Bebek isimleri

    Bebek isimleri anne bebek hakkında herşey :)

  171. Jun 12, 2010 @ 08:22:42

    katalog tasarımı

    nice sharing.. thank you for post..

  172. Jun 14, 2010 @ 01:26:13

    M.Azeem BAig

    “MashaALLAH” , may ALLAH gives happiness & much success to those people who share the knowledge, in both side in the world & also after the world.

  173. Jun 14, 2010 @ 02:40:39

    Matbaa

    thanks.It’s really very nice work.

  174. Jun 15, 2010 @ 15:41:36

    Kişisel Blog

    I agree with you, good luck.thanks

  175. Jun 17, 2010 @ 04:42:23

    Alex

    Thanks for you cool css menus.

    I’m using css-dock-bottom but I want position the “” under the images.
    Can I?

  176. Jun 17, 2010 @ 07:16:54

    Alex

    Thanks for you cool css menus.

    I’m using css-dock-bottom but I want position the “span” under the images.
    Can I?

  177. Jun 17, 2010 @ 11:11:26

    Alan

    I got this working on a HTML page. But does any one know how i can make it work on a SharePoint “default.aspx” page?

  178. Jun 18, 2010 @ 06:04:56

    suvosaha

    Thanks for very wonderful creation. It’s one of the coolest menu i have ever seen.

  179. Jun 20, 2010 @ 12:08:47

    devilngod

    hi thanks for this cool plug in can any please tell me how can i increase space in between images. Thanks

  180. Jun 22, 2010 @ 09:40:52

    kkpo

    k,pokp

  181. Jun 22, 2010 @ 19:05:59

    Kampanya

    thanks.great post.we love you

  182. Jun 25, 2010 @ 14:36:36

    Games Ptec

    Hi!
    Is it working to blogs?
    Can you send to my e-mail how to do it?
    If its possible send it in portuguese please.
    /***tanks***\

    • Jun 28, 2010 @ 22:23:30

      anonymous

      would you like fries with that?

  183. Jun 27, 2010 @ 05:02:17

    bilgi yarışması

    really good post Thank you

  184. Jun 29, 2010 @ 14:35:53

    lockerz

    very good post. thank you.

  185. Jun 29, 2010 @ 14:36:49

    Büşra Pekin

    very good post. thank you. very good.

  186. Jun 30, 2010 @ 02:42:10

    Kapil

    first of all sorry for my english .
    hai very nice example of the dock . i am using it for my new project but i need help in little bug fixing of the dock used at the template can be accessed at :-

    http://testing.ornatelogics.com/hecards/alpha/

    I need to insert the margin between the dock items .

    • Jul 03, 2010 @ 12:16:24

      John

      First set
      .dock-item img {
      border: none;
      margin: 0 5px 10px 0px;
      width: 50px;
      }
      width from auto to some value (50px) and then
      $(‘#dock’).Fisheye(
      {
      maxWidth: 30,
      items: ‘a’,
      itemsText: ‘span’,
      container: ‘.dock-container’,
      itemWidth: 70,
      proximity: 40,
      halign : ‘center’
      }
      )
      set itemWidth to some value form item distance
      it worked for me

  187. Jul 03, 2010 @ 11:57:54

    John

    Hello there, very nice script. I was wondering if there is a way to expand icons top & bottom, not just top or bottom
    Thanks

  188. Jul 04, 2010 @ 09:31:43

    Lawyer Emloyments

    yes, i am enjoying the wonderful conposition

  189. Jul 05, 2010 @ 09:50:49

    red pepper

    Thanks for css menu. very good

  190. Jul 06, 2010 @ 14:30:59

    Web Tasarımı

    Css dock menu is very nice. Thanks for the web design tools.

  191. Jul 07, 2010 @ 05:14:39

    Filmdizi

    Your site is very nice touches on a beautiful subject

  192. Jul 08, 2010 @ 12:04:30

    tacirler nakliyat

    Thanks for css menu. very good

  193. Jul 10, 2010 @ 09:19:17

    Naida Nely

    thank you sharing… Good job ;)

  194. Jul 10, 2010 @ 09:20:50

    gogus

    Bitkisel Göğüs Büyütücü

  195. Jul 11, 2010 @ 13:13:25

    Kabataş

    Thank you share… Great post…

  196. Jul 11, 2010 @ 13:26:30

    ucuz web tasarım

    Hi, Thanks for you cool css menus.
    very good post.

  197. Jul 13, 2010 @ 12:20:37

    notebook tamir

    thanks for sharing thanks for sharing

  198. Jul 15, 2010 @ 06:02:38

    Raghuraman

    I made use of this beautiful mac-like dock in my application. Initially, I tried to place the dock fixed at the bottom of the page. But, the dock behaved anomalously in IE(always at top) as anticipated. Hence, I made use of a fixed position jQuery plug-in in order to achieve this functionality. The fisheye works fine when the page is scrolled down to the maximum extent, otherwise the fisheye doesn’t work. Even I applied the fisheye patch but it was futile. Any insights on how to accomplish this?

  199. Jul 17, 2010 @ 02:59:00

    Freek

    I’m sorry quys, but I tried this on my website and it didn’t work. First I had to fix a couple of positioning problems in the codes, because it didn’t stick under your screen after scrolling…. To make my story shorter, I have the dock on my website now, but the rollover effect is now turned of, because that caused a lot of problems… this dock is better and more mac: http://www.zurb.com/playground/osx-dock

  200. Jul 20, 2010 @ 17:40:33

    Евгений

    А я давно сделал это на своем сайте

  201. Jul 20, 2010 @ 20:00:43

    Arnoldo Blanco

    I have a problem, adding an OnClick event not work for me, as I can make this work I

  202. Jul 21, 2010 @ 17:01:57

    kralbiziz

    Thanks!

    Very good..Thanks for post..

  203. Jul 23, 2010 @ 18:34:07

    aiva

    Definitely good information (a given considering the source). Thanks for the post!

  204. Jul 24, 2010 @ 17:03:03

    Tuna

    thanks for share …

  205. Jul 24, 2010 @ 19:14:47

    ali

    thanks you Very good..Thanks for post

  206. Jul 25, 2010 @ 00:49:50

    toyochisami

    thanks you Very good:)

    free download satellite tv

  207. Jul 26, 2010 @ 10:22:35

    saat

    thanks you Very good..Thanks for post

  208. Jul 26, 2010 @ 15:29:12

    sanal şirket

    thats great post.. thanks for all sahirng

  209. Jul 27, 2010 @ 04:55:41

    Rengarenk

    Thanks!

    Very good..Thanks for post..

  210. Jul 27, 2010 @ 07:34:25

    göğüs büyütücü

    The fisheye works fine when the page is scrolled down to the maximum extent, otherwise the fisheye doesn’t work. Even I applied the fisheye patch but it was futile. Any insights on how to accomplish this?

  211. Jul 28, 2010 @ 10:49:57

    Thomas

    Thanks, that is very nice. I like it very much!

  212. Jul 28, 2010 @ 14:26:40

    Mandvika

    I want to put this menu on my site but I want the labels to be there with the image when the page loads. I don’t want it come when I hover over it. On hovering only the image should become bigger. Can you suggest how this can be achieved?

  213. Jul 31, 2010 @ 03:04:30

    Tahsin Hasan

    Hello,

    everyone see new boxy menu on tahSin’s gaRAge. Thanks.

  214. Aug 05, 2010 @ 11:18:47

    fbml kodları

    I want to put this menu on my site but I want the labels to be there with the image when the page loads. I don’t want it come when I hover over it. On hovering only the image should become bigger. Can you suggest how this can be achieved?

  215. Aug 10, 2010 @ 22:08:11

    xmencute

    hi, can you help me!! My dock menu is not run in UpdatePanel (ASP.Net). When i press the button to refesh information in UpdatePanel , CSS for dock item is not run again, can you tell me why and what must i do to solve this prolem, thank you very much!!

  216. Aug 12, 2010 @ 14:02:41

    sikiş

    thanx for admin. thanx for all..

  217. Aug 16, 2010 @ 11:46:14

    hayata dair

    great post, thank you for info..

  218. Aug 17, 2010 @ 05:24:18

    filmadasi

    Hello, good job this dock is very nice.

  219. Sep 11, 2010 @ 22:23:57

    kirsche

    ciao, first of all -> sorry for my english.
    i need a little bit help:

    i want use your wonderful css dock menue and at the same site the roundabout-shape in a gallery.
    (http://fredhq.com/projects/roundabout-shapes/).
    but it doesn’t really work together, it seems to block each other.
    when i take the css dock & js files out in an seperate file like this:
    ,
    and

    the css dock menue works & the gallery not.

    when i delete line 289 in the roundabout.js
    else {newBearing = jQuery.easing[thisEasingType]((timer / passedData.totalTime), timer, passedData.start, bearing – passedData.start, passedData.totalTime);

    the gallery reacts to “click” & shows the next picture but the smooth jquery rotation is off.

    unfortunately i can’t display my example…..

    maybe you can help me – i look forward to any response.
    kind regards and, in advance thanks for your efforts.

  220. Sep 30, 2010 @ 04:22:39

    Tahsin Hasan

    Hello,

    See the boxy tabs on tahsin’s garage.

  221. Oct 02, 2010 @ 15:04:44

    Eduard Weber

  222. Oct 08, 2010 @ 10:02:56

    Hiren Khambhayta

    Its really nice. Would use if one of my project. I had got the idea of such kind of buttons from this and have implemented on my website Swastik Solutions

  223. Oct 15, 2010 @ 23:20:07

    Sanjay Arya

    I like it …thanks for sharing..

  224. Oct 16, 2010 @ 19:30:57

    Rhonda B

    Wow, this is really neat! I am going to save this for later. Thanks!

  225. Oct 19, 2010 @ 16:38:53

    Ryan

    This is one of the coolest looking scripts I have seen. I’m not a MAC guy, but I do love the MAC dock and this is a great representation of it.

  226. Dec 14, 2010 @ 06:32:06

    Roland

    Hi! How can I get it worked in IE9 with Right To Left direction (direction:rtl)? Please help.

  227. Feb 23, 2011 @ 15:53:48

    Website Design Washington DC

    I dont think this is working on IE6. However I think I may use this for my admin panel for my website. Thanks form DC

  228. Mar 02, 2011 @ 22:41:14

    Syed Haider Hassan

    Hello i want to is there any way to use the css dock without id or some way to have multiple docks with same id name

    e-g in your demo is

    and

    so dock and dock2 both are different.. well will it be possible to have same id name..

    i dont need different sizes or different anything for different docks.. i want to use same attributes for all docks..

    how to make it possible.??

    Kind Regards
    Haider

  229. Mar 15, 2011 @ 10:25:42

    Viviana

    Hi First of all: thanks I need help Could be possible to have different size for the items? I would like to change the size of some items
    thanks

  230. Apr 21, 2011 @ 03:44:18

    duke

    Are there any way to use this with prototype noConflict….is there a interface.js adapted to this?

  231. Apr 21, 2011 @ 03:45:09

    duke

    e.g jquery noConflict

    jQuery.noConflict();

  232. Apr 21, 2011 @ 04:28:51

    duke

    nevermind…got it working by just replacing “$” in interface script…thougth that wouldnt work. Thanks for nice script )

  233. May 04, 2011 @ 07:15:50

    Duke

    No…it doesnt work in explorer. anyone got an idea about runnig this along prototype?

    • Sep 13, 2011 @ 06:05:59

      Cyber4rt Crew

      do you have embed the last part of the PNG hack for IE ?

  234. Sep 11, 2011 @ 08:56:58

    Fred - A dumb web designer

    I can’t believe that something that looks so sophisticated can be implemented so simply – even I can follow it! jQuery really is a gift for all us web designers who are fluent in CSS but real dumb when it comes to the real nitty gritty of writing sophisticated code. Thanks for the post and I can’t wait for the opportunity of using the information.

  235. Jan 01, 2012 @ 08:12:08

    Simon

    Thanks, but it does not work on firefox8.01 and 9.01

  236. Jan 23, 2012 @ 10:26:53

    Karl

    Thanks for the nice Dock Menu – ever since Apple introduced the Dock Menu with OSX, everybody has tried to copy the design of their ingenious creation.
    For me, this is one of the best Dock Menu scripts that I have seen online, and since it’s Javascript it can run on devices with no Flash player.
    I am a little annoyed with Flash, as I previously bought this Dock Menu, http://www.flashxml.net/dock-menu.html but I was sad to have to change it after receiving more than a couple of e-mails from my visitors, which entered the site from their phones or tablets, and they had no Flash player.
    This menu is perfect and works even on low-class smartphones. To bad of the Dock Menu from flash xml as it really looked a bit better.

  237. Jan 25, 2012 @ 08:43:11

    rob

    Very nice menu, thank you.
    The only downside is that it can not be customized very easy. For that you have to modify the code and I’m a newbie when it comes about programming. I found here: http://www.flashxml.net/dock-menu.html a Flash dock menu. It doesn’t work on Apple devices like iPhone but it’s very customizable through xml files.

Write Your Comments

Reply in this thread

  • No rude or spam comments
  • Allowed HTML tags:
    blockquote, a, em, strong, strike
  • Use HTML entities to output code as text
    (ie. < = &lt; > = &gt;)

FALL LOVE: 20% FALLSALE coupon code & 40% affiliate commission boost at Themify (details)