N.Design Studio

CSS Dock Menu

Filed in: Design, Mac Jump to comments

CSS dock menu

If you are a big Mac fan, you will love this CSS dock menu that I designed. It is using Jquery Javascript library and Fisheye component from Interface and some of my icons. It comes with two dock styles - top and bottom. This CSS dock menu is perfert to add on to my iTheme. Here I will show you how to implement it to your web page.

Download CSS Dock Menu

(View Demo)
Zip package included JS, CSS, and icons

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 to display probably in 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 item

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

513 comments so far

  1. Gravatar
    Sequnix
    # 1

    May 8th, 2007 at 2:48 pm

    Whow this is amazing… You don’t need to like the MacOS interface to LOVE this menu… really great job!

  2. Gravatar
    ludwik
    # 2

    May 8th, 2007 at 2:52 pm

    antoher cool staff from U :) big resp

  3. Gravatar
    Jeannette
    # 3

    May 8th, 2007 at 2:56 pm

    Wow . . . that’s great. Thanks for your effort.

  4. Gravatar
    Jamie Tibbetts
    # 4

    May 8th, 2007 at 3:20 pm

    Pretty damn slick. Kudos.

  5. Gravatar
    Jeannette
    # 5

    May 8th, 2007 at 3:28 pm

    Someone submitted your CSS Dock Menu to Digg ;

    http://digg.com/design/Amazing_CSS_Dock_Menu

  6. Gravatar
    bruno
    # 6

    May 8th, 2007 at 3:56 pm

    AMAZING. You are the CSS GURU

  7. Gravatar
    Axion
    # 7

    May 8th, 2007 at 4:12 pm

    Awesome stuff, never knew you could do things like that with CSS.

  8. Gravatar
    name
    # 8

    May 8th, 2007 at 4:16 pm

    dude somebody ripp ur site on www.e-bih.com

  9. Gravatar
    marc
    # 9

    May 8th, 2007 at 4:16 pm

    Looks awesome, very cool. Though it does have a bug in Safari–if I scroll the icons too quickly, then the text remains and in some cases piles up on itself.

    Regardless, very smooth transition.

  10. Gravatar
    Ron S
    # 10

    May 8th, 2007 at 4:27 pm

    Very nice. I love how you’ve got the zoom-style icons there. Many concepts have been produced, including one by me, but this is the best I’ve seen.

  11. Gravatar
    heri
    # 11

    May 8th, 2007 at 5:00 pm

    bugged in Safari. sometimes the text doesn’t disappear, sometimes it doesn’t show. it really is a weird effect for something that wants to redo the macosx dock.

    anyway, great work!

  12. Gravatar
    Hmm
    # 12

    May 8th, 2007 at 5:55 pm

    somebody else ripped of your site
    http://www.northshock.com/blog/

  13. Gravatar
    Christopher
    # 13

    May 8th, 2007 at 5:56 pm

    The top menu of your demo has 2 orange “rss “links, whilst the bottom has 1 “rss” plus the “links” link, not that important, but still worth fixing for the demo in my opinion ;)

  14. Gravatar
    Jim
    # 14

    May 8th, 2007 at 6:25 pm

    Very nice! Lots of good things to say.

    Only bad thing is it’s very CPU intensive, so it might not work well if your processor is doing other things at the same time like encoding some media.

    I tried reading the javascript to offer suggestions on optimizing it, but found it was not written with a human in mind :)

  15. Gravatar
    Tubby
    # 15

    May 8th, 2007 at 7:08 pm

    works in CAMINO Version 2007022310 (1.1b)

  16. Gravatar
    CSS
    # 16

    May 8th, 2007 at 7:12 pm

    Looks very very nice. Good luck with the Digg!

  17. Gravatar
    Shane
    # 17

    May 8th, 2007 at 7:22 pm

    Very nice! Absolutely amazing effect, thanks for sharing!

  18. Gravatar
    Matty
    # 18

    May 8th, 2007 at 7:23 pm

    That is siiiiickkk! I’ll be sure to use it soonish ;)

  19. Gravatar
    Chris Lorensson
    # 19

    May 8th, 2007 at 7:23 pm

    honestly- that’s amazing! once the Safari bugs are worked out I’ll definitely be using this! (note: many of my users are on Firefox 1.5 as well)

  20. Gravatar
    Ponyboy
    # 20

    May 8th, 2007 at 7:28 pm

    Very impressive!

  21. Gravatar
    louis
    # 21

    May 8th, 2007 at 7:32 pm

    very nice! i was looking to use the fisheye effect from Dojo framework but it was massive. this offering from Interface is pretty lightweight at only 30k.. i shall be implementing this into my site aty some point. good tutorial dude.. keep up the good work

  22. Gravatar
    Prateek
    # 22

    May 8th, 2007 at 7:32 pm

    hey, this looks really cool. Do you mind posting up the javascript source code (not packed) so we can see how it’s done? If not, i totally understand, but none the less, really really cool :)

  23. Gravatar
    Raz88
    # 23

    May 8th, 2007 at 7:34 pm

    One Word: Elegant.

    I believe over at the mootools forum someone has been working on something similar for the mootools framework though.

    Well Done Nick.

    -Raz88

  24. Gravatar
    Ioannus de Verani
    # 24

    May 8th, 2007 at 7:35 pm

    Wow. Very smooth!

  25. Gravatar
    User
    # 25

    May 8th, 2007 at 7:38 pm

    This has already been done in the Dojo project.

  26. Gravatar
    robin
    # 26

    May 8th, 2007 at 7:45 pm

    Although I love this… I have to confess… how the heck do I install it? I can’t tell where to put the files (on the root?) and where do I paste the code on this page?

    I would really appreciate some pointers…

    Great work Nick!

    R.

  27. Gravatar
    Remi
    # 27

    May 8th, 2007 at 7:46 pm

    what is the license that the code is under?

  28. Gravatar
    Nine
    # 28

    May 8th, 2007 at 7:56 pm

    Wow… not really a tutorial, actually its just jQuery with a little CSS and a small controller for the links.

    He fails to mention you need the little bit of javascript at the bottom of his example (source) to make it work.

  29. Gravatar
    Nick
    # 29

    May 8th, 2007 at 8:18 pm

    Nine - Thanks for your reminder. Instruction fixed now.

  30. Gravatar
    robin
    # 30

    May 8th, 2007 at 8:24 pm

    Hey nick, which page does this code go on? Sorry to be a pain!

    R

  31. Gravatar
    Agent G
    # 31

    May 8th, 2007 at 8:48 pm

    “there are some minor rendering issues with Safari”

    I found this statment pretty ironic since you are emulating the Mac OS X dock, but it doesn’t work right on the default Mac browser.

  32. Gravatar
    vinnie
    # 32

    May 8th, 2007 at 8:50 pm

    Actually Stardock had the dock system before mac,, and safari blows

  33. Gravatar
    Cadu de Castro Alves
    # 33

    May 8th, 2007 at 8:50 pm

    Very nice!

  34. Gravatar
    ChrisTek
    # 34

    May 8th, 2007 at 8:54 pm

    This thing degrades terribly with no CSS.

  35. Gravatar
    Jeremy
    # 35

    May 8th, 2007 at 9:18 pm

    Great menu, but I gotta say that the title “CSS Dock Menu” is misleading.

  36. Gravatar
    CodeBit.cn
    # 36

    May 8th, 2007 at 10:08 pm

    very cool !
    thanks !

  37. Gravatar
    tylaster
    # 37

    May 8th, 2007 at 10:28 pm

    why the icon image looks jagged in firefox but smooth in IE?

  38. Gravatar
    Dan
    # 38

    May 8th, 2007 at 10:30 pm

    If you want to prevent a scroll bar from popping up every time you scroll over something because the page expands, just modify the style.css so the body css property looks like this.

    body {
    font: 11px Arial, Helvetica, sans-serif;
    padding: 0;
    margin: 0;
    overflow: hidden;
    }

  39. Gravatar
    gabe
    # 39

    May 8th, 2007 at 10:31 pm

    and it’s slow as hell @3ghz… not good.

  40. Gravatar
    charlie
    # 40

    May 8th, 2007 at 10:37 pm

    Reply to gabe:
    What the hell are you smoking? I’m on an old 1.8 gHz celeron laptop and it is running at full speed in firefox and IE!

  41. Gravatar
    bleakas
    # 41

    May 8th, 2007 at 10:47 pm

    #37
    because IE is the superior app.

  42. Gravatar
    abhisek
    # 42

    May 8th, 2007 at 11:24 pm

    great! But sad to know jquery doesn’t work with MOO. (or am i right?)

  43. Gravatar
    K3NNY
    # 43

    May 8th, 2007 at 11:27 pm

    Why do you call it “CSS Dock Menu” if it depends heavily in javascript?

  44. Gravatar
    Jonathan Solichin
    # 44

    May 8th, 2007 at 11:38 pm

    Grea idea! Thanks for sharing

  45. Gravatar
    Edwin
    # 45

    May 8th, 2007 at 11:44 pm

    Excelente Menu, Gracias!!!

  46. Gravatar
    Chen Zhe
    # 46

    May 8th, 2007 at 11:46 pm

    It’s amazing!
    Your code is perfect resource for me to study.
    Thank you very much!

  47. Gravatar
    D.Vin
    # 47

    May 8th, 2007 at 11:56 pm

    I tried to start to implement this and am running into a snag, first thing.

    How can I add this to index.html, but keep all your js,images,css in it’s own ‘/css-dock-menu/’ directory below my /public_html/ one?

    Simply copying your working .html examples out to /public_html/index.html and of course changing the paths causes some JS error about line 37 object expected (this is on the “$(document).ready(” line.

  48. Gravatar
    Justin
    # 48

    May 9th, 2007 at 12:29 am

    Seems like the Safari issues are pretty significant. Have you made reductions for these issues? Are they bugs?

  49. Gravatar
    Crack
    # 49

    May 9th, 2007 at 1:44 am

    #41
    Suuuuure. You just keep telling yourself that, Microsoft fanboy.

  50. Gravatar
    clancemasterj
    # 50

    May 9th, 2007 at 2:29 am

    It works on the Wii. Well done.

  51. Gravatar
    Daniele Simonin
    # 51

    May 9th, 2007 at 4:21 am

    Fantastic! I suggest you to publish a live example of it.

  52. Gravatar
    loops
    # 52

    May 9th, 2007 at 4:55 am

    Nice job, looks sweet!

  53. Gravatar
    CAMS
    # 53

    May 9th, 2007 at 5:46 am

    Was woundering why i was getting a refferer from here. to the chap below. learn what a rip is before you go spreading things like that. am sure the owner of this site can tell a rip from a site thats been inspired from the basics of this design.

  54. Gravatar
    James
    # 54

    May 9th, 2007 at 6:50 am

    That’s absolutely amazing. Great job!

  55. Gravatar
    Jo
    # 55

    May 9th, 2007 at 7:07 am

    Great job! I love this css/js dock menu

  56. Gravatar
    Birgit
    # 56

    May 9th, 2007 at 7:08 am

    this is among the coolest things CSS related I have seen lately! really neat. you brighten up my rainy day :)
    bookmarked!

  57. Gravatar
    Disaster
    # 57

    May 9th, 2007 at 7:15 am

    Amazing stuff, thanks alot!

  58. Gravatar
    robin
    # 58

    May 9th, 2007 at 7:26 am

    Ok, call me Mr. Silly if you like…

    I put parts 1 and 2 of this code into my header.css, with part 3 in the body and it doesn’t work!

    If someone would please give me a couple of pointers as to how to do this I would have their baby… ;-)

    Robin.

  59. Gravatar
    Isaac
    # 59

    May 9th, 2007 at 7:49 am

    I published this one some days ago:

    http://icon.cat/software/iconDock

    Good job. Your one looks faster and more stable! (maybe because of the TOO BIG sensible area before entering the menu icons)

  60. Gravatar
    Farooq Azam
    # 60

    May 9th, 2007 at 7:57 am

    Amazing menu! good job!

  61. Gravatar
    Tiago Celestino
    # 61

    May 9th, 2007 at 9:36 am

    Very nice. Good Job. :P

  62. Gravatar
    Valentina Olini
    # 62

    May 9th, 2007 at 9:40 am

    wondeful menu!!

  63. Gravatar
    joey b
    # 63

    May 9th, 2007 at 9:50 am

    wow. this is just awesome. one of the best visual implementations of JS i’ve seen in a long time.

  64. Gravatar
    Deeed
    # 64

    May 9th, 2007 at 9:52 am

    You’ve done a great job! Thanks for developing this amazing menu - i’ll use it soon!

  65. Gravatar
    Sean O
    # 65

    May 9th, 2007 at 9:58 am

    Nice looking, and nicely implemented. But the magic here is mostly all in the javascript, and mostly thanks to the magic of jQuery and Interface.

    Calling this a “CSS Dock Menu” is a tad misleading.

  66. Gravatar
    Saus
    # 66

    May 9th, 2007 at 10:25 am

    So how do we add this menu to a ithemed wordpress? I’m guessing we add the .js to the header, but which file does the configuration go?

  67. Gravatar
    Agam
    # 67

    May 9th, 2007 at 10:31 am

    iTheme should be include this CSS. It’ll be the greatest theme for Mac.Thanks alot.

  68. Gravatar
    Agam
    # 68

    May 9th, 2007 at 10:35 am

    but, I have a question. If we put it on iTheme, there is alredy have menu bar. So we will have 2 menu bar?

  69. Gravatar
    James Bruce
    # 69

    May 9th, 2007 at 10:55 am

    Could someone be kind enough to tell me how to install this, there are no real instructions.

    Thanks in advance,

    James

  70. Gravatar
    Adam
    # 70

    May 9th, 2007 at 11:02 am

    Whats really nice is the fact that this actually works with IE to, b/c you know the majority of ppl use IE still.

  71. Gravatar
    Simon
    # 71

    May 9th, 2007 at 11:18 am

    Menu’s very cool, however a bit intensive on the js but isn’t really suitable for general web menus. Ideal for web apps perhaps.

  72. Gravatar
    Jimmyrob
    # 72

    May 9th, 2007 at 12:11 pm

    Great stuff!!

  73. Gravatar
    Labbai
    # 73

    May 9th, 2007 at 12:12 pm

    Very nice !

    Wonderful CSS.

  74. Gravatar
    Dustin Diaz
    # 74

    May 9th, 2007 at 1:05 pm

    I’ll chime in. This is pretty freakin’ sweet. But as others mentioned, calling this a “CSS Dock Menu” is just poor form. There is clearly more JavaScript at work. Nevertheless, still cool.

  75. Gravatar
    ScottY
    # 75

    May 9th, 2007 at 1:51 pm

    You are amazing :D

  76. Gravatar
    Joe User
    # 76

    May 9th, 2007 at 2:21 pm

    ALREADY BEEN DONE. Check out the Dojo Javascript Toolkit. Good job reinventing the wheel though. That takes a little skill, I suppose.

  77. Gravatar
    Pierre
    # 77

    May 9th, 2007 at 3:08 pm

    Bah en gros mon ami l’Abbai voulai dire “Mais c’est pas possible sa !!, quel con “^^

  78. Gravatar
    Torben Larsen
    # 78

    May 9th, 2007 at 3:59 pm

    The free download includes some of the icons that you sell elsewhere - how can we use them ?

  79. Gravatar
    stavanger
    # 79

    May 9th, 2007 at 4:20 pm

    Pretty cool you can replicate this on the web.

    For some reason, I like the Magnification effect on the web much better than on OSX where I have it turned off…

  80. Gravatar
    IhateDesign
    # 80

    May 9th, 2007 at 4:32 pm

    its A-M-A-Z-I-N-G!!

  81. Gravatar
    Asbjørn Ulsberg
    # 81

    May 9th, 2007 at 4:37 pm

    The menu is rendered pretty useless with JavaScript disabled. With both JavaScript and CSS disabled, however, everything works. More work should be invested in getting all 3 combinations (4 if you include images, but those work here) work. The alt text on the images can probably just be dropped since the same text is repeated inside the anchor, so alt=”" would suffice. No need to listen to “Image: home. Home.” in JAWS when “Home” suffices.

    Other than that: Pretty sweet, indeed! :-)

  82. Gravatar
    Matei "Ambient.Impact" Stanca
    # 82

    May 9th, 2007 at 5:52 pm

    I think the icons and general design look great. However, I have several misgivings about this post:

    1) This is quite inaccurately named, since the bulk of the effect is done through JavaScript and inline images. There’s very little CSS involved, and none for the effect itself. This leads to confusion (as seen in some of the comments) that it’s done mainly through CSS.

    2) Why is the $(document).ready(); script block in the body? You’re not promoting very good separation of behaviour and structure with that. Works just the same in the head, and it’s tidier.

    3) This is aimed the commenters: This is not his JavaScript work, as he’s said in the post. He only reskinned it, for the most part. That also means the various bug complaints should be sent to the Interface website (there’s a link in the post).

    I made a similar comment on jquery.com

    Anyways, good work, otherwise. Nice to see others use jQuery. Your site design looks great, and you’ve hit all the right spots with semantics, etc., fellow Torontonian. :)

  83. Gravatar
    Neuron
    # 83

    May 9th, 2007 at 6:37 pm

    It’s cool. Very nice. No comment.

  84. Gravatar
    afei
    # 84

    May 9th, 2007 at 9:22 pm

    cool ! download…tkinks

  85. Gravatar
    8tops
    # 85

    May 9th, 2007 at 11:57 pm

    好效果

  86. Gravatar
    ccwebkey
    # 86

    May 10th, 2007 at 12:31 am

    Thank you for your CSS Dock Menu.I am looking for it.

  87. Gravatar
    waca
    # 87

    May 10th, 2007 at 12:50 am

    can i use this dock in blogger????

  88. Gravatar
    chung
    # 88

    May 10th, 2007 at 2:22 am

    Its really great

  89. Gravatar
    Allan
    # 89

    May 10th, 2007 at 2:44 am

    Could you create a vertical version that stays anchored to the browser window? Most blog themes have lots of room on the sides.

    Thanks!

  90. Gravatar
    GolDen
    # 90

    May 10th, 2007 at 3:04 am

    It’s gorgeous!
    Also I’m thinking that dotted borders which appear after clicks on icons pictures look not very pretty, it’s possible to fix by following piece of code:

    $(’a').click(function(){$(this)[0].blur();});

  91. Gravatar
    Beau de Noir
    # 91

    May 10th, 2007 at 3:21 am

    I love it!

  92. Gravatar
    wing
    # 92

    May 10th, 2007 at 3:27 am

    非常非常地喜爱!!!kiss you!!

  93. Gravatar
    Oli
    # 93

    May 10th, 2007 at 4:34 am

    Thats awsome! Loving it!!!

  94. Gravatar
    Haitham
    # 94

    May 10th, 2007 at 7:22 am

    very very nice! Now my browser’s page menu looks like a Mac! but how do I get it to anchor to the bottom of the page when it scrolls down or up, staying in the same position on the browser window? :)

  95. Gravatar
    jey
    # 95

    May 10th, 2007 at 8:13 am

    thanks a lot for this very beautiful dock

  96. Gravatar
    kaskooye
    # 96

    May 10th, 2007 at 8:54 am

    Great job ! Thanks for sharing.

  97. Gravatar
    Nick
    # 97

    May 10th, 2007 at 9:26 am

    Wow. I must say it’s really impressive :) Runs well on firefox under debian 4.0 on a 7 year old Athlon 800mhz box. :) Very nice!!!

  98. Gravatar
    Linker
    # 98

    May 10th, 2007 at 9:51 am

    !!!Exelent, an extraordinary application and without flash

  99. Gravatar
    Stijn
    # 99

    May 10th, 2007 at 10:02 am

    That CSS menu is fracking awesome! I have GOT to know how this works!

  100. Gravatar
    aronil
    # 100

    May 10th, 2007 at 11:00 am

    Thanks a lot for this Nick, Actually i want to thank you for a lot of things. You have made my journey of designing and coding a lot easier with your templates and other designing tutorials. And I’m further motivated by how you started all by self-taught. Hands down to you mate!

  101. Gravatar
    Emexci
    # 101

    May 10th, 2007 at 11:16 am

    we all know, that you are a css freak :)

    great menu “nick”, congrats mann…

  102. Gravatar
    Top Billing
    # 102

    May 10th, 2007 at 12:43 pm

    Awesome work.

    I tried dropping other .PNGs in and it only shows certain ones in the dock. How would I know which images will work in the dock?

    Also…how does the bottom reflection work? They disappear when I add different images.

  103. Gravatar
    realist
    # 103

    May 10th, 2007 at 3:35 pm

    That looks nice, sure,
    but you are a liar.
    It is not a CSS menu. It is a JavaScript menu.

  104. Gravatar
    unwiredbrain
    # 104

    May 10th, 2007 at 6:28 pm

    Impressive! o.O
    Great work…!

  105. Gravatar
    Richard
    # 105

    May 10th, 2007 at 9:06 pm

    Wow, I mean…. Wow

  106. Gravatar
    Felipe(Brasil)
    # 106

    May 10th, 2007 at 9:12 pm

    Thank you Nick.

    Your blog and your work are very good.

    Really, runs well under Debian Etch(Kurumin Linux7.0) on Konqueror(no famous navigator), firefox, Opera…all under Linux.

    Very Very Nice!!!!

  107. Gravatar
    Mc@Spring
    # 107

    May 10th, 2007 at 9:25 pm

    Oh,ite greate work.But why don’t you share your source in common style?And others can learn how to…So do why?

  108. Gravatar
    BillS2000
    # 108

    May 10th, 2007 at 10:02 pm

    Outstanding!! Being a newbie though, I have no idea how to use it with iTheme?

  109. Gravatar
    wooncherk
    # 109

    May 11th, 2007 at 1:58 am

    wow… this is stunning…

  110. Gravatar
    tw1st3r
    # 110

    May 11th, 2007 at 10:22 am

    yeah…very nice :-D
    that looks great!!!

  111. Gravatar
    Rafael Baialuna
    # 111

    May 11th, 2007 at 10:40 am

    U A U!

    What a hell.. that’s perfect… very great job.. sincerily… grateful work!

  112. Gravatar
    Stijn
    # 112

    May 11th, 2007 at 11:50 am

    Question:

    I was thinking of how this would look in a site design, but then I figured: how are people going to know where they are. I’m not a Mac user, but I believe Apple has an “active” sign to show running application. Perhaps one of those could show the active link?

  113. Gravatar
    Ehab
    # 113

    May 11th, 2007 at 3:06 pm

    Is there any way to rename the style.css file ? I want to put this in my wordpress, and the theme already has a style.css :(

  114. Gravatar
    Spencer
    # 114

    May 11th, 2007 at 5:56 pm

    Looks awesome!

  115. Gravatar
    thivy
    # 115

    May 11th, 2007 at 6:04 pm

    visit this link, tell me who designed this

    http://silentbits.com/2007/05/10/css-dock-menu/

  116. Gravatar
    Plasmaleto
    # 116

    May 11th, 2007 at 7:03 pm

    Well considering that site links to this one, I think you can figure out the answer to that question…

  117. Gravatar
    kerberoS
    # 117

    May 11th, 2007 at 8:40 pm

    very nice!

  118. Gravatar
    Allen Liu
    # 118

    May 12th, 2007 at 12:20 am

    Very Nice!!
    Study

  119. Gravatar
    Philippe
    # 119

    May 12th, 2007 at 5:35 am

    Very impressive.
    Great job !

  120. Gravatar
    aNTRaX
    # 120

    May 12th, 2007 at 6:17 am

    Really great. Under what license is this dock? I can use in my web?

  121. Gravatar
    Ste
    # 121

    May 12th, 2007 at 12:11 pm

    It’s great, but actually it’s far from being as flowless as the Mac dock. And I wouldn’t even use it in any website… you know, the dock is the dock, one and only :D

  122. Gravatar
    Aaron
    # 122

    May 12th, 2007 at 12:14 pm

    Wow!! Nice & Macish, Like the glassy icons also!! :D

  123. Gravatar
    haroldsky
    # 123

    May 12th, 2007 at 5:18 pm

    not bad..

  124. Gravatar
    joao
    # 124

    May 12th, 2007 at 8:15 pm

    show de bola

  125. Gravatar
    modifoo
    # 125

    May 13th, 2007 at 6:33 am

    Wow - thanks - this is lovely, cool and beautiful all at once.

  126. Gravatar
    Krosa
    # 126

    May 13th, 2007 at 3:59 pm

    GOOD!!! I LIKE!!

  127. Gravatar
    Vladimir
    # 127

    May 13th, 2007 at 7:14 pm

    this is amazing… I’m gonna try to use it in my blog soon (re-designing now)… Simply the best! As your site/blog is!

  128. Gravatar
    NZ
    # 128

    May 13th, 2007 at 7:32 pm

    cool……..

  129. Gravatar
    Jean Claude Attitude
    # 129

    May 14th, 2007 at 3:56 am

    Wouaah ! Great Job ! Very Nice !

  130. Gravatar
    aman
    # 130

    May 14th, 2007 at 6:47 am

    wah…very nice…

  131. Gravatar
    mohamed
    # 131

    May 14th, 2007 at 9:41 am

    amzing thanks alot man u r one of my favorite

  132. Gravatar
    Alejandra
    # 132

    May 14th, 2007 at 9:51 am

    Me encanta este menu, esta buenisimo.
    Alejandra de Argentina

  133. Gravatar
    Robert
    # 133

    May 14th, 2007 at 10:54 am

    Very good work - thank you. I took the liberty to hint to your article on my German blog: blog.d-sign.at

  134. Gravatar
    Stendicino
    # 134

    May 14th, 2007 at 11:31 am

    Good work! Thank you ..

  135. Gravatar
    Motorcycle Guy
    # 135

    May 14th, 2007 at 9:56 pm

    Wow that thing is awesome!

  136. Gravatar
    Andrew Ellis
    # 136

    May 14th, 2007 at 11:45 pm

    Hey, nice site!

    Just noticed something, very minor, but in your title tag of the Valid XHTML in the footer, you have “complaint” and it should be “compliant” ;)

    -Andrew

  137. Gravatar
    yokey
    # 137

    May 15th, 2007 at 1:23 am

    Cool.. Amazing CSS thank.

  138. Gravatar
    Renato Carvalho
    # 138

    May 15th, 2007 at 12:55 pm

    Great job. Very nice visual.
    jQuery rocks!

  139. Gravatar
    Bagel
    # 139

    May 15th, 2007 at 3:39 pm

    Can you change the magnification level? Its a bit intense for what I’m trying to do.

  140. Gravatar
    aday
    # 140

    May 15th, 2007 at 4:48 pm

    change it yourself. U just need Dreamweaver or some other site editor and edit CSS.

  141. Gravatar
    darkbop
    # 141

    May 15th, 2007 at 5:15 pm

    Wow! is amazing efect !!! and the icons are very nice, thanks por the sources.

  142. Gravatar
    Nirke
    # 142

    May 15th, 2007 at 6:42 pm

    How does this work really?
    what should I do with the zip file?

    U failed to include full installation instructions and several people here are not that familiar with WP..

  143. Gravatar
    Justin
    # 143

    May 15th, 2007 at 6:45 pm

    a { outline: none }

    You’ll want to include this in the CSS so firefox users don’t get that outline when they click on one of the links.

  144. Gravatar
    Oseary
    # 144

    May 16th, 2007 at 12:34 am

    I’m a bit confused on where the coding goes in… Which actual file does the coding get added in???

  145. Gravatar
    Adrian
    # 145

    May 16th, 2007 at 2:33 am

    Amazing!
    I also wrote an article about it at my blog http://blog.akpix.de

  146. Gravatar
    OIiver
    # 146

    May 16th, 2007 at 4:35 am

    @Nirke -
    1) open zip
    2) upload js/ and css/ folders to your server
    3) include references to js and css in your document head (as in the example docs)
    4) create an unordered list of links (as in the example docs)
    5) include the $(document).ready(){…} call in the body at the end (as in the example docs)

    Your tone could be a little less aggressive next time you ask for help: if there aren’t any instructions it’s because the examples could not be more self-explanatory.

    WP has nothing to do with this.

  147. Gravatar
    Sean Harvey
    # 147

    May 16th, 2007 at 7:48 am

    Very nice. :-)

  148. Gravatar
    rob-ot
    # 148

    May 16th, 2007 at 8:53 am

    ok, this is VERY NICE !!
    great job

  149. Gravatar
    MTXTeamLeader
    # 149

    May 16th, 2007 at 5:50 pm

    Wow! It’s wonderful.
    Thanks so much.

  150. Gravatar
    emcevo
    # 150

    May 16th, 2007 at 9:14 pm

    gud day guys! has anyone use this code to the EXPONENTCMS?? Im a bit confuse in coding it..

    OIiver
    # 146

    May 16th, 2007 at 4:35 am

    @Nirke -
    1) open zip
    2) upload js/ and css/ folders to your server
    3) include references to js and css in your document head (as in the example docs)
    4) create an unordered list of links (as in the example docs)
    5) include the $(document).ready(){…} call in the body at the end (as in the example docs)

    Your tone could be a little less aggressive next time you ask for help: if there aren’t any instructions it’s because the examples could not be more self-explanatory.

    WP has nothing to do with this.

    Is there a website in converting the codes to a “smarty codes” w/c is use in the unordered list.tpl..??? ty

  151. Gravatar
    Trisha
    # 151

    May 17th, 2007 at 12:59 am

    This is really great, but it’s not very “accessible”….

  152. Gravatar
    Zampano
    # 152

    May 17th, 2007 at 7:40 am

    This is great and I’d really like to implement this as my main menu in my photography website !
    I figured out most of the stuff that can be adjusted, although i really am a newbie at CSS and JS… I’m really kinda proud of myself…!

    But I have one problem I can’t figure out:

    Is there a way to adjust the spacing between the menu items…?
    My temporary solution is to use pngs with transparent borders left and right, but I’d like to use jpgs and adjust the spacing between them in CSS…

    Is there a way to accomplish this easily…?

    Also:
    If I move the mouse away from the menu very fast (so that the cursor is away from the proximity distance specified in the script), the menu stays expanded and looks kinda strange…

    Is there a way to make the menu shrink itselt to the normal (unexpanded) state when the cursor moves away fast…?
    Like in Isaac’s example in post 59…?

    Some help would be very appreciated ! Thanks !

  153. Gravatar
    melvin
    # 153

    May 17th, 2007 at 2:20 pm

    very cool, thanks!

  154. Gravatar
    Trisha
    # 154

    May 17th, 2007 at 2:51 pm

    This is by far the WORST instructions ever given. You definitely might want to go into more detail here.

  155. Gravatar
    Carlo
    # 155

    May 18th, 2007 at 6:58 am

    That’s insanely well done.

  156. Gravatar
    OIiver
    # 156

    May 18th, 2007 at 9:21 am

    @Trisha
    Not to be a troll, but to moan about the quality of the instructions and accessibility is pretty weird: this guy has published his code for your benefit. He’s under no obligation to hold your hand and your under no obligation to use it.

    The code is *really* straightforward. If you don’t understand it make an effort to learn how it works. If you can’t be bothered to, don’t post.

  157. Gravatar
    Benjamin
    # 157

    May 18th, 2007 at 10:35 am

    Wow, great job !! So nice.

    Just one remark, in terms of accessibility :

    Maybe it would be great if the menu was ok (without the effet of course) when javascript is disabled ..

    Benjamin

  158. Gravatar
    LM
    # 158

    May 18th, 2007 at 11:48 am

    Wo cool!

  159. Gravatar
    jAV
    # 159

    May 18th, 2007 at 7:51 pm

    hi, but how can i change the links? in which file.

  160. Gravatar
    Aaron
    # 160

    May 19th, 2007 at 11:15 am

    Hey jAV, to change the links just replace the “#” with your link, in the html file. (Step 4 above)

  161. Gravatar
    aronil
    # 161

    May 19th, 2007 at 1:31 pm

    I just really have to make this comment. I want to say that Nick has done lots of work on making people’s life easier especially in terms of blog designs. And I think it unfair when people just use his design and do super minor changes while still retaining the orginality of the blogtheme and then stating it as their own. If anything at least use the template as a learning curve and make your own, If not give the guy some credibility.

  162. Gravatar
    Tek
    # 162

    May 20th, 2007 at 3:55 pm

    Trying to make this awesome little dock work so that I can customize it, but I haven’t got it quite right as of yet.

    Anyone want to tell me what I’m doing wrong?

    http://www.angelfire.com/wv/TheScorpionLair/dock/css-dock.html
    http://www.angelfire.com/wv/TheScorpionLair/dock/style.css

    Thanks in advance!

  163. Gravatar
    Darren
    # 163

    May 21st, 2007 at 5:35 am

    Great work. Amazing stuff. If I was being extremely picky I would say not to use the mirrored effect on the icons. But that’s me trying to find problems lol.

  164. Gravatar
    coyr
    # 164

    May 21st, 2007 at 10:29 am

    An excelent job!!;)

  165. Gravatar
    Aziz Ali
    # 165

    May 21st, 2007 at 11:58 am

    Awesome man. Simply AWESOME
    you just come up with QUALITY POSTS…. PERIOD

  166. Gravatar
    K.T.S
    # 166

    May 21st, 2007 at 9:55 pm

    It’s really good!
    Whether or not alters to longitudinally?

  167. Gravatar
    Uncle Bob
    # 167

    May 22nd, 2007 at 7:38 am

    Uhum… this is a P4 D920 (dual core, 3Ghz, 4Mb cache) with 2Gb ram and the CSS Dock menu moves like shit. And that’s just a docklet. Try putting that in a loaded page.

    Firefox and IE cpu usage spike through the roof.

    What’s the point of this? To have something “phun & kewl” to kill the computer?

    For FSM’s sake, we’ll all need 1500$ Quad Core Extremes for a shitty “Web 2.0 application”…

    Already my mom’s notebook has great trouble with some of the pages out there. Everybody’s switching to piss-poor interpreted javascript eyecandy, even for the most basic websites…

    I guess she can pluck 2000$ to buy a core2duo, because, gee.. everybody thinks the web should be littered with crappy interpreted code that tries to emulate native code OS GUI, but just at a 5000% speed penalty…

    I wonder why AMD and Intel even bother trying to lower the thermal envelope of their cpus when every retard out there is switching to javascript, web-based mail clients that need 20 times more cpu power than already available, cross-platform, widespread native-clients…

  168. Gravatar
    Mac
    # 168

    May 22nd, 2007 at 8:40 am

    Awesome, really cool

  169. Gravatar
    Kasetti
    # 169

    May 22nd, 2007 at 11:37 am

    i love ur phoenix header havent seen anything like it!

  170. Gravatar
    Steve
    # 170

    May 22nd, 2007 at 2:37 pm

    hi!

    you mention adding it to iTheme, i use it , but how do i add it?

    Thanks!

  171. Gravatar
    Some1 Helpful
    # 171

    May 22nd, 2007 at 3:19 pm

    I really enjoyed your CSS Dock Menu.However, it could use some more work.
    For one, the background is twitching as I’m browsing the menu. It would look better if it just became wider once starting to browse the menu and then stay that shape.
    Also it would be much nicer if the icons ‘clicked’ in place rather than moving by the smallest cursor movement.
    Finally, some higher res icons which go from shrunk to normal, rather than those low res ones that go from normal to enlargened would be great.

  172. Gravatar
    Frederick
    # 172

    May 22nd, 2007 at 9:13 pm

    This is just AMAZING! I am planning in implementing iTheme on one of my sites, can you tell me how to get this going?

    Frederick

  173. Gravatar
    zoxo
    # 173

    May 22nd, 2007 at 10:19 pm

    wow….cool

  174. Gravatar
    Josh
    # 174

    May 22nd, 2007 at 10:54 pm

    Now this is a website! :)

    Awesome wallpapers :)

  175. Gravatar
    myownshit.dk
    # 175

    May 23rd, 2007 at 4:54 am

    This is so cool! I really like it!! Thanks for sharing

  176. Gravatar
    yeal
    # 176

    May 23rd, 2007 at 7:28 am

    cool

  177. Gravatar
    SBK
    # 177

    May 23rd, 2007 at 8:19 am

    This is da best dock menu I never seen. Realy. But i have one little problem. How to enlarge the distance between icons?

  178. Gravatar
    Tommy
    # 178

    May 23rd, 2007 at 12:34 pm

    Stumble upon shows me the way to this side. Really cool this kind of menu.

  179. Gravatar
    Manuel T. Laveaga
    # 179

    May 23rd, 2007 at 1:15 pm

    woaw, but is working with blogspot or just wordpress?
    thank u

  180. Gravatar
    Norman
    # 180

    May 23rd, 2007 at 6:15 pm

    It’s great, but… maaan… it’s using 100% of my CPU… just try it out! it’s insane! is there any way to reduce such CPU consumption?

  181. Gravatar
    Kobe
    # 181

    May 23rd, 2007 at 7:04 pm

    It is by far the best theme i’ve ever seen and trust me i have seen many till now searching for the best.

    I’d definitely use it in my blog but i’d like to ask a question first:is there a way to add a second sidebar to the left of the main menu?is this something that can be done easily or should i look for something else (again)?

    I’d appreciate it if u could give me an answer.Thanks in advance and regards from Greece ;)

  182. Gravatar
    Olmec Sinclair
    # 182

    May 23rd, 2007 at 9:17 pm

    Very nice. I have seen a lot of cool things done with CSS but this is one of the most impressive. Well done.

    I doubt I’ll find a use for it but who knows.

  183. Gravatar
    piNky
    # 183

    May 24th, 2007 at 5:38 am

    Hello,
    I noticed a bug in IE7 with the docking boxes. I haven’t tested it in IE6.
    The user is able to make as many clones of each box as he wants.
    This happens when you drag the box, then with pressed left button click the right, wait until the alt text is visible and then release the left button first. The clone is pinned. Then when you drag up the box witch is under the first one you moved the original will be restored and the clone will be still visible.

  184. Gravatar
    » Links for Web Designers : May
    # 184

    May 24th, 2007 at 11:30 am

    […] CSS Dock menu - An apple-inspired menu for use in your websites […]

  185. Gravatar
    CSS Dock Menu « Cosas sencillas
    # 185

    May 24th, 2007 at 1:01 pm

    […] Dock Menu En ANIETO2K, nos