CSS Dock Menu
May 8th, 2007 Filed in: Design, Mac Jump to comments
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.
Update: I no longer support the questons regard this script. If you like the HiGloss icons used in the demos, you can get them as stock icons at IconDock.
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 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 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).
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!
May 8th, 2007 at 2:52 pm
antoher cool staff from U :) big resp
May 8th, 2007 at 2:56 pm
Wow . . . that’s great. Thanks for your effort.
May 8th, 2007 at 3:20 pm
Pretty damn slick. Kudos.
May 8th, 2007 at 3:28 pm
Someone submitted your CSS Dock Menu to Digg ;
http://digg.com/design/Amazing_CSS_Dock_Menu
May 8th, 2007 at 3:56 pm
AMAZING. You are the CSS GURU
May 8th, 2007 at 4:12 pm
Awesome stuff, never knew you could do things like that with CSS.
May 8th, 2007 at 4:16 pm
dude somebody ripp ur site on www.e-bih.com
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.
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.
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!
May 8th, 2007 at 5:55 pm
somebody else ripped of your site
http://www.northshock.com/blog/
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 ;)
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 :)
May 8th, 2007 at 7:08 pm
works in CAMINO Version 2007022310 (1.1b)
May 8th, 2007 at 7:12 pm
Looks very very nice. Good luck with the Digg!
May 8th, 2007 at 7:22 pm
Very nice! Absolutely amazing effect, thanks for sharing!
May 8th, 2007 at 7:23 pm
That is siiiiickkk! I’ll be sure to use it soonish ;)
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)
May 8th, 2007 at 7:28 pm
Very impressive!
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
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 :)
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
May 8th, 2007 at 7:35 pm
Wow. Very smooth!
May 8th, 2007 at 7:38 pm
This has already been done in the Dojo project.
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.
May 8th, 2007 at 7:46 pm
what is the license that the code is under?
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.
May 8th, 2007 at 8:18 pm
Nine - Thanks for your reminder. Instruction fixed now.
May 8th, 2007 at 8:24 pm
Hey nick, which page does this code go on? Sorry to be a pain!
R
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.
May 8th, 2007 at 8:50 pm
Actually Stardock had the dock system before mac,, and safari blows
May 8th, 2007 at 8:50 pm
Very nice!
May 8th, 2007 at 8:54 pm
This thing degrades terribly with no CSS.
May 8th, 2007 at 9:18 pm
Great menu, but I gotta say that the title “CSS Dock Menu” is misleading.
May 8th, 2007 at 10:08 pm
very cool !
thanks !
May 8th, 2007 at 10:28 pm
why the icon image looks jagged in firefox but smooth in IE?
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;
}
May 8th, 2007 at 10:31 pm
and it’s slow as hell @3ghz… not good.
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!
May 8th, 2007 at 10:47 pm
#37
because IE is the superior app.
May 8th, 2007 at 11:24 pm
great! But sad to know jquery doesn’t work with MOO. (or am i right?)
May 8th, 2007 at 11:27 pm
Why do you call it “CSS Dock Menu” if it depends heavily in javascript?
May 8th, 2007 at 11:38 pm
Grea idea! Thanks for sharing
May 8th, 2007 at 11:44 pm
Excelente Menu, Gracias!!!
May 8th, 2007 at 11:46 pm
It’s amazing!
Your code is perfect resource for me to study.
Thank you very much!
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.
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?
May 9th, 2007 at 1:44 am
#41
Suuuuure. You just keep telling yourself that, Microsoft fanboy.
May 9th, 2007 at 2:29 am
It works on the Wii. Well done.
May 9th, 2007 at 4:21 am
Fantastic! I suggest you to publish a live example of it.
May 9th, 2007 at 4:55 am
Nice job, looks sweet!
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.
May 9th, 2007 at 6:50 am
That’s absolutely amazing. Great job!
May 9th, 2007 at 7:07 am
Great job! I love this css/js dock menu
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!
May 9th, 2007 at 7:15 am
Amazing stuff, thanks alot!
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.
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)
May 9th, 2007 at 7:57 am
Amazing menu! good job!
May 9th, 2007 at 9:36 am
Very nice. Good Job. :P
May 9th, 2007 at 9:40 am
wondeful menu!!
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.
May 9th, 2007 at 9:52 am
You’ve done a great job! Thanks for developing this amazing menu - i’ll use it soon!
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.
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?
May 9th, 2007 at 10:31 am
iTheme should be include this CSS. It’ll be the greatest theme for Mac.Thanks alot.
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?
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
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.
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.
May 9th, 2007 at 12:11 pm
Great stuff!!
May 9th, 2007 at 12:12 pm
Very nice !
Wonderful CSS.
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.
May 9th, 2007 at 1:51 pm
You are amazing :D
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.
May 9th, 2007 at 3:08 pm
Bah en gros mon ami l’Abbai voulai dire “Mais c’est pas possible sa !!, quel con “^^
May 9th, 2007 at 3:59 pm
The free download includes some of the icons that you sell elsewhere - how can we use them ?
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…
May 9th, 2007 at 4:32 pm
its A-M-A-Z-I-N-G!!
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! :-)
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. :)
May 9th, 2007 at 6:37 pm
It’s cool. Very nice. No comment.
May 9th, 2007 at 9:22 pm
cool ! download…tkinks
May 9th, 2007 at 11:57 pm
好效果
May 10th, 2007 at 12:31 am
Thank you for your CSS Dock Menu.I am looking for it.
May 10th, 2007 at 12:50 am
can i use this dock in blogger????
May 10th, 2007 at 2:22 am
Its really great
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!
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();});
May 10th, 2007 at 3:21 am
I love it!
May 10th, 2007 at 3:27 am
非常非常地喜爱！！！kiss you!!
May 10th, 2007 at 4:34 am
Thats awsome! Loving it!!!
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? :)
May 10th, 2007 at 8:13 am
thanks a lot for this very beautiful dock
May 10th, 2007 at 8:54 am
Great job ! Thanks for sharing.
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!!!
May 10th, 2007 at 9:51 am
!!!Exelent, an extraordinary application and without flash
May 10th, 2007 at 10:02 am
That CSS menu is fracking awesome! I have GOT to know how this works!
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!
May 10th, 2007 at 11:16 am
we all know, that you are a css freak :)
great menu “nick”, congrats mann…
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.
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.
May 10th, 2007 at 6:28 pm
Impressive! o.O
Great work…!
May 10th, 2007 at 9:06 pm
Wow, I mean…. Wow
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!!!!
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?
May 10th, 2007 at 10:02 pm
Outstanding!! Being a newbie though, I have no idea how to use it with iTheme?
May 11th, 2007 at 1:58 am
wow… this is stunning…
May 11th, 2007 at 10:22 am
yeah…very nice :-D
that looks great!!!
May 11th, 2007 at 10:40 am
U A U!
What a hell.. that’s perfect… very great job.. sincerily… grateful work!
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?
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 :(
May 11th, 2007 at 5:56 pm
Looks awesome!
May 11th, 2007 at 6:04 pm
visit this link, tell me who designed this
http://silentbits.com/2007/05/10/css-dock-menu/
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…
May 11th, 2007 at 8:40 pm
very nice!
May 12th, 2007 at 12:20 am
Very Nice!!
Study
May 12th, 2007 at 5:35 am
Very impressive.
Great job !
May 12th, 2007 at 6:17 am
Really great. Under what license is this dock? I can use in my web?
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
May 12th, 2007 at 12:14 pm
Wow!! Nice & Macish, Like the glassy icons also!! :D
May 12th, 2007 at 5:18 pm
not bad..
May 12th, 2007 at 8:15 pm
show de bola
May 13th, 2007 at 6:33 am
Wow - thanks - this is lovely, cool and beautiful all at once.
May 13th, 2007 at 3:59 pm
GOOD!!! I LIKE!!
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!
May 13th, 2007 at 7:32 pm
cool……..
May 14th, 2007 at 3:56 am
Wouaah ! Great Job ! Very Nice !
May 14th, 2007 at 6:47 am
wah…very nice…
May 14th, 2007 at 9:41 am
amzing thanks alot man u r one of my favorite
May 14th, 2007 at 9:51 am
Me encanta este menu, esta buenisimo.
Alejandra de Argentina
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
May 14th, 2007 at 11:31 am
Good work! Thank you ..
May 14th, 2007 at 9:56 pm
Wow that thing is awesome!
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
May 15th, 2007 at 1:23 am
Cool.. Amazing CSS thank.
May 15th, 2007 at 12:55 pm
Great job. Very nice visual.
jQuery rocks!
May 15th, 2007 at 3:39 pm
Can you change the magnification level? Its a bit intense for what I’m trying to do.
May 15th, 2007 at 4:48 pm
change it yourself. U just need Dreamweaver or some other site editor and edit CSS.
May 15th, 2007 at 5:15 pm
Wow! is amazing efect !!! and the icons are very nice, thanks por the sources.
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..
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.
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???
May 16th, 2007 at 2:33 am
Amazing!
I also wrote an article about it at my blog http://blog.akpix.de
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.
May 16th, 2007 at 7:48 am
Very nice. :-)
May 16th, 2007 at 8:53 am
ok, this is VERY NICE !!
great job
May 16th, 2007 at 5:50 pm
Wow! It’s wonderful.
Thanks so much.
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
May 17th, 2007 at 12:59 am
This is really great, but it’s not very “accessible”….
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 !
May 17th, 2007 at 2:20 pm
very cool, thanks!
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.
May 18th, 2007 at 6:58 am
That’s insanely well done.
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.
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
May 18th, 2007 at 11:48 am
Wo cool!
May 18th, 2007 at 7:51 pm
hi, but how can i change the links? in which file.
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)
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.
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!
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.
May 21st, 2007 at 10:29 am
An excelent job!!;)
May 21st, 2007 at 11:58 am
Awesome man. Simply AWESOME
you just come up with QUALITY POSTS…. PERIOD
May 21st, 2007 at 9:55 pm
It’s really good!
Whether or not alters to longitudinally?
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…
May 22nd, 2007 at 8:40 am
Awesome, really cool
May 22nd, 2007 at 11:37 am
i love ur phoenix header havent seen anything like it!
May 22nd, 2007 at 2:37 pm
hi!
you mention adding it to iTheme, i use it , but how do i add it?
Thanks!
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.
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
May 22nd, 2007 at 10:19 pm
wow….cool
May 22nd, 2007 at 10:54 pm
Now this is a website! :)
Awesome wallpapers :)
May 23rd, 2007 at 4:54 am
This is so cool! I really like it!! Thanks for sharing
May 23rd, 2007 at 7:28 am
cool
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?
May 23rd, 2007 at 12:34 pm
Stumble upon shows me the way to this side. Really cool this kind of menu.
May 23rd, 2007 at 1:15 pm
woaw, but is working with blogspot or just wordpress?
thank u
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?
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 ;)
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.
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.
May 24th, 2007 at 11:30 am
[…] CSS Dock menu - An apple-inspired menu for use in your websites […]
May 24th, 2007 at 1:01 pm
[…] Dock Menu En ANIETO2K, nos enseña un increible menú que recuerda al más puro Dock Maquero para nuestras webs. Está realizados sobre jQuery y podemos ver lo fluido que se comporta en la […]
May 24th, 2007 at 7:27 pm
Hey,
I would love to use this on my blog but I was wondering were I install the stuff I download. Thats my only problem, I might be a noob but could someone please help.
May 25th, 2007 at 4:16 pm
[…] fare ile gidildiğinde büyüyen simgeler grubu) HTML sayfalarında kullanabilmemizi sağlıyor. Bu adresten detaylı bilginin alınabileceği gibi şu adresten de doğrudan zip paketini […]
May 25th, 2007 at 8:22 pm
if only i had an apple computer…
anyways i absolutely love your work with your wallpapers/vectors…just EVERYTHING. amazng site here.
xoxxo
May 25th, 2007 at 9:53 pm
Verry nice. And the icons are awsome.
I think you should make some more icon tutorials, especially about the history, home and contact icon. I’m not good in illustrator, I’ve tried to do some icons, and they look terrible.
May 26th, 2007 at 8:19 am
wohooo, that’s just beaaauuuuutifuuuuul!!!!!!
May 26th, 2007 at 8:28 am
[…] 60 Best CSS Directories | watch list - www.wittysparks.com CSS Dock Menu | mac menu - www.ndesign-studio.com CSS Cheat sheat | css references - www.lesliefranke.com CSS simple nav bar - […]
May 26th, 2007 at 11:12 am
[…] i browsing the V2EX, I found a cool css design that a friend interduced : a mac dock menu. Yes , i had searching the design before, but didn’t found […]
May 26th, 2007 at 3:28 pm
How can I use this in WordPress?
May 26th, 2007 at 6:32 pm
well i appreciate it but it is exectly the same from below url except your images.
http://zend.lojcomm.com.br/ifisheye/example.asp
May 27th, 2007 at 4:01 am
yeh, its really nice work. i like it and i definately thinking to use it somewhere coz your menu is more catchy then others, may be because of icons.
May 27th, 2007 at 5:56 am
Nice script. Is there any way to implement it as a Greasemonkey script for Firefox?
May 27th, 2007 at 11:40 am
[…] found on n.design studio a very interesting css dock menu that I’d might use on this blog on the […]
May 27th, 2007 at 6:11 pm
[…] jetzt müde lächeln, aber wer’s noch nicht kennt, wird möglicherweise das CSS Dock Menu mögen. Gebaut mittels der jQuery Javascript Library und einer mir bis dato unbekannten […]
May 28th, 2007 at 5:16 am
Awsome !! no words left to appreciate..
May 28th, 2007 at 1:22 pm
Fantastic.
It’s even much better without any background pic for the doc. Try it.
May 28th, 2007 at 3:54 pm
Looks great! Going to give it a try!
May 29th, 2007 at 5:50 pm
very nice script. Have you got any more icons? I am well impressed :)
May 30th, 2007 at 5:50 pm
Top of the line icons. Will try to implement this icons on my iTheme blog. Thanks again.
May 31st, 2007 at 4:12 am
Very cool, respect!
May 31st, 2007 at 4:58 am
this is a cutie! nice work!
May 31st, 2007 at 12:24 pm
awwwww…. gorgeous, smokin’, lovely
June 1st, 2007 at 4:00 am
really fantastic - respect!
June 2nd, 2007 at 1:08 am
ah, so …
June 2nd, 2007 at 3:41 am
I wonder where did you learn all these from… really impressive. *thumbs up*
June 2nd, 2007 at 5:19 am
nice job :) thanks
June 2nd, 2007 at 9:50 am
i think it’s possible to make it in web.
but this is real!
nice job.
June 2nd, 2007 at 12:42 pm
Love your site and ALL your work. Excellent stuff ;) You have a great talent, keep it up :).
June 3rd, 2007 at 12:32 pm
The link to download the CSS dock menu zip package DON’T WORKS now!
This is the message: “Error 404 - Not Found - Sorry, the file you were looking did not find”
please fix it… thanks!
June 3rd, 2007 at 6:25 pm
Goooooood Job! This dock is amazing for a website…thx.
June 4th, 2007 at 12:40 am
Hi,
Great work.. keep it up..
planning to use this in my upcoming website
June 4th, 2007 at 5:27 pm
Excellent!!!!
Max
June 5th, 2007 at 11:23 am
Absolutly fabulous !
June 5th, 2007 at 1:29 pm
I like the menu
June 5th, 2007 at 2:13 pm
The demo link returns a ‘Error 404 - Not Found’.
June 6th, 2007 at 10:43 am
Very very nice. Linking to this site now!
June 7th, 2007 at 6:14 pm
Thank you! this is a great tool. Thankyou!!!!!
June 8th, 2007 at 1:37 am
Thank You!
It’s really Excellent!
I like it!
June 9th, 2007 at 6:34 am
hi! i like your dock menu! by the way, can u make a vertical version?? tnx..
June 9th, 2007 at 6:56 am
Great!
June 9th, 2007 at 12:20 pm
Hello. The css-dock-menu is excellent. However I have a some problems when change setter the css properties “position: absolute” to “position : fixed”. I want maintain the dock-menu “all time” in the “bottom: 0px” position. Thanks for the that excellent plug-in for the jQuery library.
June 10th, 2007 at 1:30 pm
Hello! I love this, absolutely great! —> Anyone with an idea how to make one item “active”? This should look like when you move your mouse over an icon as soon as the page loads. Possible? Again: When the page loads, one icon (for example “home”) should already be “big” (as it would be if you point the mouse over it). Please help :D Thank you!
June 10th, 2007 at 8:42 pm
Cool~
But I have one question about it.
I don’t know how use it after I had been completing.
Please give me a whole method.
Thx~
June 11th, 2007 at 1:27 pm
Very nice menu!!!
Thank you.
June 12th, 2007 at 6:33 am
Wow! This is awesome. I would love to implement this into my site. :)
June 13th, 2007 at 4:10 am
wow you are so amazing i wouldnt have thought this would be possible and also thank you for sharing how to do it.
June 14th, 2007 at 11:34 am
Thanks for the script…
but how I have to modify the css to attach it anywere?
I mean…
If I want to add this dock to a table, how I have to modify it?
Thanks a lot :D
June 19th, 2007 at 5:19 am
Awesome job dude..
June 20th, 2007 at 1:03 am
This is nice, however, your demo page returns to “404″. Hope you could fix it :)
June 21st, 2007 at 12:54 am
Fird - the “404″ error is fixed now.
June 21st, 2007 at 1:31 am
it is cool~~~
i love it~
thinks
June 21st, 2007 at 10:07 am
i have problem with IE…(i use version 7)…if i put
.dock img { behavior: url(iepngfix.htc) }
in my php subheader, i have blank page!if i don’t put png fix, when i go in IE and if you go with mouse over icons,they disappear…is there a fix or solution?!?!?
in FF all ok!!!
great fisheye and great icons!!!
June 22nd, 2007 at 1:23 pm
Thanks.
June 22nd, 2007 at 7:40 pm
Very cool!
June 23rd, 2007 at 7:27 am
Just to clarify something. A lot of comments here tend to believe that this fisheye menu was made entirely by nDesign. This is not the case. nDesign did just change icons and explained how to implement this on a webpage.
The source of this example is here :
http://interface.eyecon.ro/demos
Then click on the ‘fisheye’ link at the bottom of the page.
June 23rd, 2007 at 5:51 pm
very nice, 10x 4 sharing.
June 25th, 2007 at 12:36 pm
Wow! it’s fantastic.
Thanks for the script.
June 25th, 2007 at 11:27 pm
This is awesome! Seriously beautiful work, especially since it works on a couple of browsers. Damn fine.
June 26th, 2007 at 1:39 am
Still getting grey “halo” I’m a newbie so anyone willing to help?
June 26th, 2007 at 11:06 pm
Thanks a lot, Excellent job.
June 28th, 2007 at 12:21 am
Heeey man…..excellent work..! -From drlalinda.com
June 28th, 2007 at 5:42 am
I have seen your blog and its really very great and from my view i got the intresting things and you have impressive blog and i am very impressed about your blog
http://www.vividads.com.au/
June 28th, 2007 at 12:58 pm
hey man ,it is a nice tip for bloggers ,and it will help us to create our own nice web
June 28th, 2007 at 12:59 pm
it is nice ,and thx for your tips for the blogger css,it really great
June 29th, 2007 at 7:16 pm
Hola En el navegador Opera para mac el dock se ve horrible.
Buena idea =
July 1st, 2007 at 12:41 pm
Great job!!!
July 2nd, 2007 at 2:55 am
tankx
is best
July 2nd, 2007 at 9:20 am
Awesome will give it a try
July 2nd, 2007 at 11:04 pm
Nice
July 5th, 2007 at 6:13 am
thnx man… really great menu.. i was wondering about the fonts though… can we use them in a commercial project? :D
July 5th, 2007 at 9:14 am
Hi everybody
Has someone made that code working vor vertical menues or for a matrix of pictures (like in a picture gallery) where you can hover over them?
Best regards
P.S. Great menu by the way
July 6th, 2007 at 2:49 am
thanks.
nice
July 6th, 2007 at 2:52 am
tanks is best
July 9th, 2007 at 5:42 pm
hey that´s just fantastic work! I love it so much. I was searching a dock like thing but for mootools insteadt og jquery. if somebody has a clue on how to convert it for the mootools framework please contact me
July 12th, 2007 at 11:23 am
There is really no way to convert it over, but you can use this script.
July 13th, 2007 at 12:03 am
Great stuff!!
I’d really like to make it a vertical menu (icons down the left or right side). Having trouble seeing how to do this… any chance of another version or assistance? :)
July 14th, 2007 at 3:06 pm
Your iTheme is a really great idea. Thank you for sharing another addition for it =]
July 16th, 2007 at 10:26 am
Hi, Great tool but have some issues with safari3. you should check that
July 21st, 2007 at 1:58 pm
BRILLIANT!!!!
July 22nd, 2007 at 8:09 am
Am I the only person who finds this form of navigation extremely annoying?
Sure, it’s kinda cool for about 10 seconds, but when I’ve used a site that uses this navigation method, it drives me insane.
Anyone else find this?
July 22nd, 2007 at 11:43 am
@pino, try a website called “www.google.com”, it allows you to search the internet, really! for example, enter “mootools fisheye”, and guess what!?!?
;-)
or go straight to for instance http://www.chrisesler.com/mootools/fisheye/index.php
July 22nd, 2007 at 5:00 pm
Whoa! That looks really great :D
July 23rd, 2007 at 4:28 am
Great menu!
However, I implemented it into my web site and I found one little problem in Opera. On my web site, the dock is placed in a table 150px from the top. This works fine, but in Opera the resizing of the icons only happens when your mouse is at the top of the page.
OK, I can’t really explain, just check http://www.martenjacobs.nl/
July 23rd, 2007 at 12:24 pm
Hi,
I want to change the menu to start from top to down ,Can anyone help me ?
July 24th, 2007 at 10:14 am
wow!!!
thank u!!!
July 24th, 2007 at 10:23 am
yeah…there’s a bug with opera…
July 25th, 2007 at 1:19 pm
All I can say is.. beautiful!!!
July 29th, 2007 at 7:15 am
Hi,
how can i resize the length of the menu?
Thanks!
July 30th, 2007 at 3:45 pm
Hi
Thank You This Good Jobs
Cool Menu
August 1st, 2007 at 12:12 am
Can apple sue that dock menu?
August 7th, 2007 at 4:26 pm
I can place this cod in my site? this cod is free?
August 8th, 2007 at 8:46 am
Using this code together to lightbox, it simply stop the lightbox, knows what he can be? http://www.huddletogether.com/projects/lightbox2/
Already I forced initLightbox() in onload of body, but it did not function
August 8th, 2007 at 5:45 pm
This thing rocks!!! But I have a question. I cant find a info were the files from the ZIP have to be placed? root or anywhere else?
August 14th, 2007 at 5:19 pm
I am having problems installing this. First I dont knwo where the zip files content is supposed to go to (which foolder). Then its not clear which html or PHP file the code has to be put into.
Greetings
Andreas
August 16th, 2007 at 7:14 pm
Very nice!!!
However, I have a little problem w/ the bottom dock that stay on the bottom of the screen, right on my other data which is about the middle of the web page instead go to the bottom of the web page.
Could you please spare a little time to send me a mail for a solution for it.
Thanks a million.
August 19th, 2007 at 10:09 pm
just a couple of thoughts.
first off great work on this menu design, real impressive from a visual standpoint.
the one possible draw back I can see, besides the pre-existing issues with Opera, is that this jquerry function sets these images inside a table… I am not sure but isnt this in violation of W3C standards??? or am i being too much of a semantical elitist? regardless, great menu, i am considering it on many fronts
cheers
August 20th, 2007 at 5:34 am
hello,
i want to use this dock in the header of my phpbb2 bulletin board.
How must i change the code so it would work!!
Thx in progress
August 20th, 2007 at 12:24 pm
This is very nice work; however, I have a little problem with the bottom dock menu which is showing in the bottom of the screen that is right in the middle of the web page, so I hope you have a little time to drop me a mail that shows how to correct it.
Thanks a million.
August 22nd, 2007 at 1:33 pm
It’s pretty but couldn’t you have not used the $ function so that it was compatible with things like scriptaculous and lightbox aka anything that used the most popular javascript helper out there, prototype? or at least not have encrypted it so that I could have fixed it?
Currently the only fix i could find for this is to replace the $ function with something like $prot in prototype and all your other prototype using tools (scriptaculous, lightbox).
(note: Using replace all in your editor will replace some regular expressions that use the $ so be careful.)
Great tool btw.
August 22nd, 2007 at 3:29 pm
easy to overlook … http://interface.eyecon.ro/ for interface and jQuery uncompressed
August 26th, 2007 at 8:53 pm
kury,
If you put a the start of your javascript call:
Then replace all the dollar signs with jQuery, you should be good!
August 26th, 2007 at 8:56 pm
kury,
If you put a the start of your javascript call:
jQuery.noConflict();
Then replace all the dollar signs with jQuery, you should be good!
August 27th, 2007 at 1:59 am
This is one of the best examples of CSS and JavaScript. Absolutely perfect! By the way, this website is very nice and colorful too.
August 30th, 2007 at 2:52 pm
hi how i can block the menu in the botton of the page when the page have scrolling bar…… thanks
August 31st, 2007 at 12:39 am
Yeah Awsome but if the user hasn’t got Javascript enabled it degrades terribly!
Email me if you have a fix for that! And I’ll be impressed!
September 4th, 2007 at 10:57 pm
GOOD顶
September 6th, 2007 at 4:27 pm
Very nice. I will use this on my website. Very nice. I am new to web development and I appreciate such good examples to learn with.
Jimmy
September 7th, 2007 at 2:47 am
wow this is great and amazing design.
http://www.vividads.com.au
September 10th, 2007 at 3:07 pm
nice however I have to say the use of javascript means you can not really call it a css nav lol
I was thinking of making something like this however completely css without js and it most likely would not work out too well with older browsers.
I would suggest you release it with the source unencypted and give the ability to control the effect it scales the images too much and the mouseover starts way to soon.
September 15th, 2007 at 7:12 am
Nice work. Good luck.
September 19th, 2007 at 8:10 am
..this worked pretty good for me on my test site.. digitalimpact.ca/FACEBOOK .. ~t
September 19th, 2007 at 8:59 am
it is not working with mozilla 2.0 if you insert into php
September 20th, 2007 at 8:37 am
man htis menu is real cool … i thought it was flash perfect work keep it up !
September 22nd, 2007 at 10:36 am
Excellent example
http://quazimd.com/google/
September 24th, 2007 at 5:41 am
Wonderfull :D
September 25th, 2007 at 8:24 am
Very nice. I try it
September 26th, 2007 at 12:48 am
I love this! I will definitely try to work this into one of my projects!
September 26th, 2007 at 3:09 am
Real nice work.
September 26th, 2007 at 2:10 pm
I would like to know if you have an example
of as to place submenus as of apple in this menu.
thanks.
September 27th, 2007 at 3:38 am
Outstanding!
This menu structure is the poo! Dude, I am so going to implement is on my site!
Would you consider a library of other icons to match a variety of uses?
James.
September 27th, 2007 at 7:06 am
is that for real, i mean its like using the real dock from Mac!!
u r genius!
September 28th, 2007 at 1:11 pm
Sorry but i do not have a clue where to add those codelines (in which file) and in which category must the whole folder be uploaded??
October 1st, 2007 at 4:26 am
Brilliant menu.
October 2nd, 2007 at 4:14 am
its perfect, thank u so much
vay be kardeşim
süper olmuş ben daha ne diyeyim
October 2nd, 2007 at 8:21 am
Awesome menu!
Thanks a lot, ill implement in my website!
October 4th, 2007 at 6:10 am
I would like to know if you have an example
of as to place submenus as of apple in this menu.
thanks. - Designervn.com
October 4th, 2007 at 6:12 am
Thanks a lot!!!
October 4th, 2007 at 1:27 pm
I like this ! Thank you !
October 4th, 2007 at 10:20 pm
is it possible to add this in phpbb forum with same directions
October 7th, 2007 at 9:34 am
thank you
October 9th, 2007 at 11:05 am
What the beautiful Design has your Icon! Respekt.
October 10th, 2007 at 5:56 am
he valla ne güzel
heyy boy you are crazyy
October 11th, 2007 at 12:57 pm
This is a great dock design … I’ve applied it very well.
But, could you provide us the javascript code?
I’d like to modify it so the dock can be position anywhere in the page design and not only TOP or BOTTOM
October 11th, 2007 at 2:28 pm
your are one of the best designer in the world. I like your effects in design.
be happy.
bye
October 15th, 2007 at 5:30 am
Hi Awesome !! THanks!
Is it possible to make stick to the bottom of the page, no matter if the user scrolls down?
October 15th, 2007 at 10:07 am
Please make the JS available. I would like to create a jQuery noconflict version of this script so that it can be used with other js libraries.
Pretty please.
October 15th, 2007 at 10:36 am
I really like this effect — is there a way to make it work on the iphone?
October 18th, 2007 at 6:05 am
Wow. Excellent Job!
October 18th, 2007 at 11:43 am
Interferres with lightbox, any fix? Great job though….
October 19th, 2007 at 12:34 am
This is a great dock design … I’ve applied it very well.
I like your effects in design.
Thank’s
October 19th, 2007 at 10:08 am
I could not find this site in the Search Engines index
October 19th, 2007 at 6:45 pm
Thank you, Nick, for your great job! Amazing flash work! You’re really one of the best in the world! I like clean, neat and nice design job of yours. And you are a good artist.
October 22nd, 2007 at 11:05 pm
What is license ? can it be used in any website ?
October 29th, 2007 at 8:42 am
nice..very
thanks!
October 31st, 2007 at 6:45 am
this is just great! outstanding, easy to change the icons and publish… jeez! thanks
November 6th, 2007 at 1:46 pm
i think that it is good
November 8th, 2007 at 12:00 pm
thank you so much. but it isnt work with any ajax code like “ajax tab content, light box”. a fix needed.
November 10th, 2007 at 8:24 pm
Wonderfull,I certainly will try this menu
Thanks
November 10th, 2007 at 8:53 pm
This is a great dock design … I’ve applied it very well.
I like your effects in design.
Thank’s
November 11th, 2007 at 4:12 am
very nice info thank you
November 11th, 2007 at 1:16 pm
Hi I implemented your feature on my site here http://seedang.com ! I really enjoy it. It was easy to co-exist JQuery with Prototype also. Look forward to more great work from you.
November 12th, 2007 at 3:26 pm
@Lars: I don’t know who put this example up first, but in my mind nDesign did it best. At least nDesign gave us the code for how to use it.
November 13th, 2007 at 1:58 am
Thanks!
Btw, you have the best looking blog!
November 13th, 2007 at 4:06 am
非常好。
November 13th, 2007 at 4:24 am
Am I the only person who finds this form of navigation extremely annoying?
Sure, it’s kinda cool for about 10 seconds, but when I’ve used a site that uses this navigation method, it drives me insane.
Anyone else find this?
November 13th, 2007 at 4:30 am
Awesome! Very impressive and influential to see someone take so much time of their own to give this to all web designers. Thanks!
November 13th, 2007 at 5:28 pm
Looks great. You think there is a way I can make the menu vertical instead of horizontal?
November 15th, 2007 at 4:44 am
Impressive! Looking ahead for more creations.
November 15th, 2007 at 12:40 pm
Hi :)
Great work, but on IE6 images appear with the red cross over the images, if you have IE6 you can view it here http://www.metalorock.com/v2
There is a fix for this? or it’s an error of my share…
November 16th, 2007 at 3:26 pm
OMG awesome menu, thank you so mux :D
November 17th, 2007 at 6:15 pm
I have the same question as Zampano in #152: Is it possible to have space between the items? Since I want to use it for photos, and they don’t look that good without space.
November 17th, 2007 at 9:24 pm
This menu looks cool, but it looks a little bit pixelled.
November 18th, 2007 at 3:51 am
Great post. Exactly the kind of menu I have been looking for. Thanks!
November 18th, 2007 at 5:47 am
Where can I see this in action? Because I’ve mouseovered the bottom of your pages and don’t see any dock.
November 20th, 2007 at 1:58 am
Wow thats amazing. Thank you.
November 20th, 2007 at 8:47 pm
Great work! I would love to be able to make one customization in my implementation and that is where all the icons are in grayscale, but they colorize as you rollover them and they grow.
Whatdya think? Up for the challenge?
November 21st, 2007 at 2:55 pm
It would be great if you could put up a live demo!
November 22nd, 2007 at 10:15 pm
That’s pretty nice.
And nice blog.
November 23rd, 2007 at 8:02 am
Really Superb !
November 23rd, 2007 at 11:11 am
Very nice work! Thanks from Germany!
November 24th, 2007 at 10:01 pm
Space should be possible with CSS no? Anyway, a fantastic menu - love it.
November 25th, 2007 at 1:10 am
www.stardock.com?
They did it better and cooler. Owned.
November 25th, 2007 at 3:22 am
Thanks from China!
November 27th, 2007 at 9:46 am
Thank you from China!
November 28th, 2007 at 3:18 am
Wow thanks for sharing this.
November 28th, 2007 at 5:50 am
thanks from Italy
November 28th, 2007 at 8:46 am
Hi, excellent menu, but it doesn’t work in Safari 3.
November 28th, 2007 at 9:22 pm
Very cool! I wish it worked in Safari! Thanks for sharing it with us.
November 29th, 2007 at 2:16 am
Thank you from Japan！
November 29th, 2007 at 6:42 am
Tylrt, read carefully. This menu is web based while stardock is for your operating system.
This script rocks btw.
November 29th, 2007 at 8:26 am
Lovely work… You have a great job!
thankyou:)
November 29th, 2007 at 3:07 pm
For the record…
It DOES work in Safari, but has issues in Safari 2. Works perfectly in Safari 3. However, in Safari 2, the top example flies out, but the link names are messed up (are randomly visible), and the lower example doesn’t fly out, but all of the link names work fine.
November 29th, 2007 at 10:29 pm
That is the way the internet should be like! Beautiful!
November 30th, 2007 at 4:04 am
Thanks from Mauritius!
November 30th, 2007 at 3:11 pm
Hi there.
Did anyone fix the problem with the lightbox yet?
The post #283 says something like replacing the “$ function” but we couldn’t quite make it work…
Any help will be greatly appreciated. ^^
Regards
December 1st, 2007 at 8:22 pm
I Like This menu so much that i had to use it :>
December 5th, 2007 at 5:29 pm
Hola a todos
los felicito por su gran trabajo
es excelente
excelente el trabajo sobre CSS DOCK MUNU
ES 100% FUNCIONAL
Pueden puplicar un artiuculo sobre
Moo3DCircle Menu
aqui un ejemplo:
http://www.outcut.de/MooFlow/Moo3DCircle.html
Pero no lo entregan completo, no es funcional
Nuevamente gracias a Ustedes, excelente trabajo
December 6th, 2007 at 3:15 pm
Is it possible to do this vertically?
December 6th, 2007 at 4:31 pm
I’d like to use this vertically to, is this possible somehow?
December 7th, 2007 at 7:10 am
Hey there! What a great work! It’s exactely what I need for my website!
But I still have a little problem to solve… I hope you can help me.
My problem is that my icons are very detailed with curves and all. So when they are in a small size the quality they don’t look great at all.
Is there a way for me to change something in the code to use a small image size when the mouse is not over and then use the bigger size when it is??? :(
Thank you
December 8th, 2007 at 9:20 am
is so cool!!!!!!!!!
I like it…so much.
December 12th, 2007 at 10:18 pm
As Thoast stated I was wondering how to get this menu to work with lightbox, or in my case mediabox. If I want the menu to work, mediabox won’t work, but when I want mediabox to work the menu doesnt work (I.E. I change the order of the codes in head). Any help is greatly appreciated, thx in advance!
December 13th, 2007 at 5:12 am
hi!
What a great work!!
But i have one question!
I would like to put this dock on in a fixed position, because i would like it to be seen every time (when scrolling dowm..)
But when is set the position fixed the icons and the dock are no longer working very well.
thx
robin
December 13th, 2007 at 8:27 am
Very nice. If i ran a mac themed site - this would totally rock. I’ve saved this for later use.
December 14th, 2007 at 9:41 pm
Doesn’t Apple have a trademark on this?
December 15th, 2007 at 2:08 pm
this is awesome! really nice work. i have an idea though. add “stacks” like on Leopard. so it could b used for a drop down.
December 17th, 2007 at 1:07 pm
Nice bit of kit, it’s absolutely cool, was wondering, is there any way to shrink it down a fair bit? I’m off to read the script for it now, but if there is, could you tell me how?
Thanks!
December 21st, 2007 at 5:09 am
Really nice design. I really love it! Do you share this wp template?
December 21st, 2007 at 7:57 pm
VERY COOL!
So this is open source? Free to use?
December 22nd, 2007 at 2:23 pm
Hi,
Its a cool launcher-like menu. And the demo works flawlessly well, although the final implementation on my WP blog doesnt. :(
I configured it to suit the settings you have mentioned and it gives the following output. (no menu bar is displayed. It sticks to the left of the screen! :( )
http://img88.imageshack.us/my.php?image=idockproblemad2.png
Seems I have messed up something but what!? I am not a pro at CSS. Need your help in this. Thanks in advance.
December 22nd, 2007 at 10:06 pm
Superb! It looks pretty cool.
December 22nd, 2007 at 11:04 pm
its great! thanks
December 26th, 2007 at 8:51 pm
This is a great idea. Only one issue that I see for now. When your mouse approaches the element, they enlarge prematurely. It should not enlarge until you mouse over the actual element.
December 28th, 2007 at 8:01 am
Hi,
This is great, but does anyone know how to re-position the icons, for example, in a circular fashion? Rather than linear?
Please let me know. Thanks. Justin.
December 31st, 2007 at 1:28 pm
Thank you! I especially love the gradual size increase as the mouse approaches
January 2nd, 2008 at 2:05 pm
for a circular css menu: http://metalize.liveonstyle.com/wp-content/uploads/2007/03/index.html
January 2nd, 2008 at 4:51 pm
using this dock menu under a logo image that’s 265px tall, but on first load, the mouse over is fubar… when i mouse over the menu, it doesn’t fisheye, but if i mouse over the top of the logo image, the dock fisheye’s… (see http://www.pcrepairbytbare.com/test/pcrepairshot.jpg).
any ideas why? send me an e-mail @ tim@pcrepairbytbare.com if you have any ideas! thanks!
January 4th, 2008 at 3:52 am
I like.. i like…
January 4th, 2008 at 4:01 am
Great Work!!! Can I use it to my personal website?!!
January 7th, 2008 at 10:49 pm
I found some flickering with IE 6. The suggestion in the following page fixed the problem.
http://www.mister-pixel.com/#Content__state=is_that_simple
Added the following for IE:
try { document.execCommand(”BackgroundImageCache”, false, true);
} catch(err) {}
January 12th, 2008 at 1:40 pm
Work very rare in Safari
Work in Opera, but horrible
In IE and FF works good
anyway thx !!
January 13th, 2008 at 10:28 am
where to get more those Orange icon`s? :) great job!
January 14th, 2008 at 4:54 am
Amazing! What more can I say
January 17th, 2008 at 9:42 am
Amazing style
January 18th, 2008 at 3:33 am
I’v used it into my site,really great!
January 20th, 2008 at 10:11 am
Criticisms in some of the above comments are unfounded.
1. how could implementing this be easier than downloading a zip file, unpacking into a folder and opening the html page in a browser. I have been looking at several implementations and this is the easiest and best described implementation of a dock menu I have found.
2 Calling it a css menu is also reasonable, since the whole methodology of expanding and moving the images would not be possible without css capability.
3. The js is beautifully small and compact.
Well Done - Really cool
Tonypm
January 21st, 2008 at 5:48 am
ı have problem in plesk domain controlor what can ı do for ı can play in plesks ?
January 26th, 2008 at 1:58 am
hi, i was wondering if you can center this to the center of the page? if so, how?
email me please. vdsleo@gmail.com
January 28th, 2008 at 2:24 pm
Hi, thanks you very match for sharing this beautiful menu.
I’m traiyng to use in my website, and it works really fine ,but sometimes safari don’t show the menu and i need to refresh the page.
I don’t use yet on line, i’m working in local.
Is a problem only local or is a little bug with safari?
Thanks again you are a really nice designer.thanks to share your works.
January 28th, 2008 at 10:22 pm
I am trying to get this to work on my test site but it does not work like yours. I have followed the directions above but it does not “fisheye”. Path to js is correct. Can anyone help?
January 29th, 2008 at 1:16 am
wicked cool
January 29th, 2008 at 7:30 am
There are some problems with the fisheye script in safari 3 (on mac), sometimes it loads sometimes it doesn’t.
Also the demo on this page doesn’t work properly also….
Can this be fixed?
January 29th, 2008 at 2:00 pm
Ironic that you’re imitating OS X’s interface, yet the example you provide does not work in Safari 3, OS X’s default browser.
January 31st, 2008 at 9:23 pm
so far, so good
thanks for all
February 2nd, 2008 at 2:10 pm
What about when JavaScript is turn off? This is nice, but totally useless.
February 2nd, 2008 at 10:52 pm
Wicked Cool Friends, You have My Thanks dear..
February 4th, 2008 at 2:10 pm
Doesn’t work on Safari 3 Mac or PC !!!
Any fix ?
February 8th, 2008 at 4:35 pm
thank you kardeşim eline sağlık. sen yap biz sömürelim olmuyor aslında ama
February 10th, 2008 at 11:14 am
まことに thank you
February 11th, 2008 at 10:22 pm
What kind of license has the script? Can i use it in my site?
February 13th, 2008 at 10:14 am
Amazing,could u tell me how it works?
February 13th, 2008 at 10:20 am
But,could u make it without by jquery ,with normal js ? 3Ks!
February 14th, 2008 at 6:12 am
Can I use your script on my site. Its so great in my opinion and work in IE and FF.
February 14th, 2008 at 1:36 pm
This work with fonts?
I mean: Can I make this effect with text?
No images.
February 16th, 2008 at 6:17 pm
i dont know how to use so please can u suggest me how to use this
thank u
February 17th, 2008 at 7:14 pm
Vov. This is very good. It’s better than other blogs.
February 18th, 2008 at 12:55 pm
Well Well doesn’y work, i proved with all ways that i have it but nothing, when i upload the js and css files to googlepages it’s ok, but at the time tu put the code, the img appears, the text appears, but the effect don’t, so you can help me?? maybe if a send you the files you puted ok and send it to me??
Thanx, i love this style of menu so i want it
February 18th, 2008 at 3:49 pm
Wonderful ! o_O
February 18th, 2008 at 4:11 pm
incredible! now, I have to find some trasparent png’s for my new dock :D
February 19th, 2008 at 1:09 pm
No separators ?
February 21st, 2008 at 8:13 am
Its Nice!
February 21st, 2008 at 6:21 pm
Omg! This is huge! Just watched the demo and it totally rocks! I’m just laughing cause it’s so unbelievable. Thank you for sharing this! Got to put this on my website!!!
February 21st, 2008 at 6:46 pm
Very good. Bit misleading calling it a CSS dock menu though.
It requires Javascript as well so it’s not a true CSS menu.
February 21st, 2008 at 7:50 pm
Fantastic! Can i use it in wordpress blog?
February 22nd, 2008 at 12:13 am
man!..this is crazy!
February 22nd, 2008 at 10:44 am
Thanks for the tips!
I really *love* your site design btw, especially the way you’ve used the transparent gradient overlay in the top-left :)
Keep up the good work!
February 22nd, 2008 at 11:58 am
This does not work in Safari for the PC. When you rollover an icon, nothing happens except showing you the name of the icon.
February 22nd, 2008 at 5:15 pm
Awesome menu, this is something that i’ll definitely give a try once.
February 22nd, 2008 at 6:48 pm
broken in safari 5523.15
the menu responds to the mouse being at the top of the page, instead of over the icons.
but the animation is nice, good work :) i might use this
February 23rd, 2008 at 5:28 pm
Best fisheye effect! i’ve seen some 4-7 of those.
February 23rd, 2008 at 6:55 pm
Great idea. Cool its Jquery based.
February 24th, 2008 at 10:57 am
Gigantoflexibrutalofantastic!!!
Thanks for sharing!
February 27th, 2008 at 7:47 am
Looks great!
February 27th, 2008 at 3:04 pm
brilliant
February 29th, 2008 at 10:00 am
I’ll ask the dumb question:
where am I to edit the html? Let’s say I’m using your iTheme. Where would the dock go and how would I edit the html?
Thanks for your creativity and willingness to share.
February 29th, 2008 at 1:12 pm
Awww. I was hoping with the title being ‘CSS Dock Menu’ that it wouldn’t involve JavaScript, but sadly, it does.
Still though, nice.
March 1st, 2008 at 12:18 am
Hi,
Very nice effect!!
I’ll try to include that menu in my website in PHP. But all icon load one to other one. Do you know why it’s not working.
My work aroud an index which load all pages.
Thanks in advance for your help.
March 2nd, 2008 at 2:56 pm
This is a great effect. Thank you for making the function available.
March 5th, 2008 at 2:47 pm
This is definitely the best of all ! thanks for sharing.
March 6th, 2008 at 12:35 am
Apologize if this has already been said, but I couldn’t find any mention of it.
The new version of JQuery fixes some of the Safari 3 problems. Download the “Packed” version, change the downloaded file’s name to “jquery.js” and replace the file in the “js” folder with the one you downloaded. Voila! It fixed all of the problems I was experiencing with testing, so hopefully it works for you too!
Zach
March 6th, 2008 at 11:10 am
Your script is great but doesn’t work with Javascript disabled… to assume everyone has this is stupid…. I will fix it though, no worries :)
March 7th, 2008 at 10:23 pm
hi, wonderful widget, how can i do this widget gets all the widht screen long, sorry for my english
March 9th, 2008 at 8:13 am
Hello from a MAC n00b. have used it for 4 days now :)
Anyway this dock seems to work with Safari 3.
When it comes to JavaScript disabled. just put a text that syas that the page are using a menu that needs JavaScript enabled.
March 9th, 2008 at 9:31 pm
Bro, nice work :D congrats, can we put the dock in the left side? i mean, up to down. Like a list. Is it possible? Please write an email to me. Thx.
March 11th, 2008 at 5:03 am
非常精彩，值得借鉴和推荐。
这个特效加上唯美的页面设计会更炫！
March 11th, 2008 at 11:19 pm
good.thanks.with great tutorial and code.
March 12th, 2008 at 9:37 am
Saw other people asking but couldn’t see if it had been answered, any way to get this to dock on the left or right side of the browser?
March 13th, 2008 at 2:36 am
非常精彩，值得借鉴和推荐。
这个特效加上唯美的页面设计会更炫！
March 13th, 2008 at 2:37 am
This is definitely the best of all ! thanks for sharing.
March 13th, 2008 at 6:51 am
bro! very nice work… thank you
March 13th, 2008 at 6:55 am
The style and your script is great… thank you.
March 13th, 2008 at 8:40 pm
great work!
is it possible to change distance between icons ?
March 13th, 2008 at 11:37 pm
Hi. Just wanted to say good job. Also i am a beginner in css, and i wanted to put the menu lower on the page. I moved the actual menu, but the area where the mouse needs to be for the buttons to magnify is still at the very top? can any1 send me an email at alexsb92 [at] hotmail.com on how can i fix this? i’d really appreciate it.
March 14th, 2008 at 4:57 am
Great job!!I wanna learn more and if possible upload more of your great job…thanks!
March 14th, 2008 at 5:54 am
very good thank you
March 17th, 2008 at 5:43 am
Just read the article, and I must say it’s wonderful ;) Great job, mate. Keep it going ;)
March 18th, 2008 at 7:39 am
This is Possible in GWT.
March 18th, 2008 at 7:41 am
I want to use this Dock menu in GWT. This is Possible?.. Pls Replay Quick..
March 19th, 2008 at 8:35 pm
very nice !
March 20th, 2008 at 12:56 am
thank you for your generation,your good job is a
perfect visual effect solution!
i’m far away from you, still thank you very much
March 21st, 2008 at 3:37 pm
Just read the article, and I must say it’s wonderful
March 22nd, 2008 at 10:10 am
I love it but can’t just get it to work inside my WordPress theme! I call jquery.js and interface.js within my tags and then put the rest inside the body tag but all i get is a non moving icon (the last of the 6 icons i put) stuck somewhere in the middle-left border of the screen. what am i forgettin?
March 22nd, 2008 at 10:46 am
alright, it seems that there some sort of conflict inside the tags with the string: /js/prototype.lite.js”> that controls another element of my blog.
I’m not an expert but can’t I just make both js (”interface.js + jquery.js” and prototype.lite.js) altogether inside my head tags?
March 23rd, 2008 at 11:32 am
U ROCK!!!! who ever made this dock
March 24th, 2008 at 9:17 pm
very nice web site!
Resumindo: muito bonito.(pt-br)
March 27th, 2008 at 3:13 am
Hi, nice job. But how to put in into your itheme?
Please help!
March 31st, 2008 at 12:58 pm
Is there anyway to work around the Safari rendering issues? Everything looks great til I refresh!
March 31st, 2008 at 8:14 pm
Cool menu, but everytime i add some icons, it changes to “top” mode, expanding downwards and showing labels below the icons. What I’m doing wrong?
Thanks for the great job and hopefully advice.. :)
Peter
April 3rd, 2008 at 6:00 am
Let him have these comments, so that others come to know that, the design’s made by him, is of A class.
Great designs men, Keep it up !
April 4th, 2008 at 10:24 am
in short and simple words:
I just love it
April 4th, 2008 at 8:07 pm
wow… what can i say. Very impressive work Nick
April 5th, 2008 at 7:24 am
It’s great! But is it possible to change position from horizontal to vertical ?
April 5th, 2008 at 2:54 pm
respect!
April 6th, 2008 at 7:35 am
Really thanks
April 6th, 2008 at 10:35 pm
Nice, I really like it but…
I am trying to make it position: fixed as I want it on the bottom of the page at all times. if I fix the containing div the icons will remain on the bottom but the mouse over moves with the rest of the page. any suggestions?
April 8th, 2008 at 1:40 am
how can I change the background ?
April 8th, 2008 at 6:37 pm
hi,
i need this menü with the function as a warapper menue how i can open a link in a iframe. have this menu this feature? i thing no … ?? its a very nice menue!!
April 12th, 2008 at 3:27 am
Hi,
I need to put this Dock at right side of page. Do somebody know how to do that please?
Thanx
April 14th, 2008 at 8:45 pm
This is amazing…..Great job!!!
April 15th, 2008 at 11:36 pm
very very beautiful
thanks
April 16th, 2008 at 7:05 am
nice and too much informative and totally different look
April 17th, 2008 at 1:17 am
Really good.
Thanks a lot!
Is amazing can do this without using flash :)
April 17th, 2008 at 7:41 am
I love it. Thanx.
April 17th, 2008 at 11:19 am
super buenisisisisisismo que buena presentacion le dio a mi pagina
April 17th, 2008 at 2:24 pm
SUPERB!!!! Those Steve Job oughta hire you
April 18th, 2008 at 1:02 am
我喜欢
April 18th, 2008 at 9:30 am
Ottimo!!davvero bello!!
April 19th, 2008 at 9:55 am
Great work, thank you for sharing the zip file with all of us!
April 20th, 2008 at 9:47 pm
it’s awesome!
April 21st, 2008 at 5:07 am
Actually the quality of the zoomed image is not satisfactory. Isn’t there any way to make it less pixelized or something else like anti aliasing in order to improve the quality of the zoomed icon ?
April 21st, 2008 at 1:50 pm
Great! Very good!
April 22nd, 2008 at 5:40 pm
Does it always have to be at the top? I put it under a logo header and couldn’t get the fisheye function to work unless I had the mouse pointer all the way at the top. I can move the menu up top above the header, but didn’t want to have to. Thanks.
April 23rd, 2008 at 2:42 am
Thanks this is a cool article I haven’t seen it on a website yet but I would love to :)
April 23rd, 2008 at 10:38 am
You have missed a - at the top
.dock img { behavior: url(iepngfix.htc) }
Its suppose to be
April 24th, 2008 at 4:02 am
I really like this its pretty cool
April 24th, 2008 at 5:16 pm
I can’t figure it out!!
i need more detailed instructions!!
April 24th, 2008 at 6:54 pm
this seems pretty awesome …
documentations a little confusing though …
will give it a whirl … sure looks good …
April 26th, 2008 at 12:02 pm
thanks a lot : )
good job, like mac menu
April 27th, 2008 at 10:07 am
That’s really nice.
Can I use thisn dok menu for a commercial website?
April 27th, 2008 at 8:47 pm
It’s very nice and fun!
April 27th, 2008 at 10:26 pm
Hey, i just wanted to ask you where to upload the folder at….
into my theme folder? www? wp-content?
sorry :/ but can somebody tell me? i really want this on my website….
April 30th, 2008 at 8:59 am
Very slick, nicely done, but dear God, what the hell happened to creativity?? Must we constantly ape the likes of Apple?
April 30th, 2008 at 9:30 am
Hi,
Pls. i wish to have the same doc menu in vertical position. Kindly guide me.
Thanks
Manisha
May 1st, 2008 at 2:28 am
i am some problem facing
i want to vertical css menu.
And also i want to display the css vertical dock menu on button click event.so plz help me
May 8th, 2008 at 5:35 pm
Like the idea, would have been cool to look at the JS to see how its done as far as that goes - but I hate how you screwed it all up with some crap on one line, so im not going to bother even looking further. Deleting it, thanks anyway. Ill find some non-screwed up code for it elsewhere.
May 10th, 2008 at 7:45 am
Great menu!!
May 10th, 2008 at 3:13 pm
Hey…I’d like to have thiy very nice menu vertically…Could you send me the right “made” javascript files per email?Or have I to change the CSS-File? I’d be happy about an answeremail;)
May 11th, 2008 at 4:27 pm
Hi, I want to use the i3theme, but with the docking station. The above instruction on how to impliment the dock onto the iTheme is a bit greek, let alone adding it to the i3Theme.
Any help please?
the i3Theme is available at http://www.mangoorange.com/resources/i3theme/
May 11th, 2008 at 10:33 pm
It’s look good.
thanks.
May 15th, 2008 at 3:56 pm
this docket menu js, is veri nice, but consumes too much cpu, in new machines, P4 , dualcores, are fine, but for old machines like PIII, p4 1GHz, are quite non optimized…
May 19th, 2008 at 7:13 am
Where I can find the code of a lateral dock?
May 19th, 2008 at 7:01 pm
I want to add this on nav bar…what should I do…??
May 20th, 2008 at 3:22 am
some one plz help me… i need the css dock code in html form and css form .. i just cant get it to work. plz help me with this i get the pictures displaying but not the effect of it all..
thanx
josh
June 3rd, 2008 at 1:53 am
mDock3 (mDock 3) can do vertical alignment, reflection without images, and bouncing icons. It also displays and reacts PERFECTLY in every JavaScript-enabled web browser. No CPU eating, just clean code, around 700 lines.
http://www.mDock.org/
June 4th, 2008 at 11:28 am
hey, one question, is it posible to add this to the firefox, i mean directly use it any time I am looking at a webpage ?
June 4th, 2008 at 9:24 pm
I was wondering if there was a way to have a dropdown or flyout menu added to this?
June 6th, 2008 at 1:50 pm
i was just wundering if u need more imAGES then what it gives to make them pop out
and this isent working for me because of messups in js on the main document u need to close the coment or it wont work
June 9th, 2008 at 3:13 am
Hi, I have applied CSS Dock Menu in my website, but want to increase the image size (small as well as big), could someone plz help me to do that.
June 10th, 2008 at 11:31 pm
wow thats great,I’ll use thanks
June 16th, 2008 at 2:35 am
This is wonder full,
good work
keep it up
June 16th, 2008 at 12:19 pm
is there any way to set one doc item to be ‘open’ at the start?
June 17th, 2008 at 3:21 pm
As usual, it’s pretty the way it is, but once you try to change some things (positioning etc) it falls apart. Sigh.
June 18th, 2008 at 8:45 am
wow, that looks awesome, gonna download and test the code now.
June 19th, 2008 at 1:21 pm
thanks for this wonderful css dock menu…downloaded this and used on my websites..
thank you very much for sharing
June 19th, 2008 at 2:58 pm
This is the most amazing thing I have seem. Truly impressed.
June 19th, 2008 at 10:43 pm
very cool
thx so much
but how to disable this menu when user use opera !!
June 22nd, 2008 at 9:52 pm
Very nice, I like it a lot.
Just wondering, I could be blind but what licence is this released under. I don’t suppose it would be GPL by any chance?
Thanks.
June 23rd, 2008 at 5:11 am
Splendid! Just like Rocket Dock!
Have some more stuffs?? Do let me know!
June 24th, 2008 at 7:35 pm
Doesn’t work on mac OS X Tiger pre 10.4.11 and Safari 2.0.4
June 27th, 2008 at 5:22 am
I would say this is a one of unique CSS scripts i have ever come across.I have just downloaded a and tried it. I will explore its details for sure.
June 30th, 2008 at 8:09 pm
it doesn’t work when including prototype.js on the same page :(
a fix or work around anyone?
July 3rd, 2008 at 10:34 pm
I’ve been having one issue with the dock, I love it, but I can’t get it to work right when I add widgets to my page from LastFM or Flickr. All of the icons start at the far left of the page before they ’snap’ to the center, and then it works fine. Is there a fix for that?
July 8th, 2008 at 12:53 pm
Great job, you’ve done amazing thing
July 8th, 2008 at 10:55 pm
awesome menu!
looks good just like the layout of the blog page. nice background and cool coloring
respect
rome
July 10th, 2008 at 9:01 pm
awww Thank you very muchhh i like menu shape :D
July 14th, 2008 at 8:26 pm
how to make dock menu look fixed like dock menu on Mac OS X
July 16th, 2008 at 1:53 am
cool! any1 noe cn use keyboard arrows to control the menu navigation?
July 16th, 2008 at 5:06 am
Can anyone enlighten me how I can go about using keyboard arrow buttons to navigate left and right through the menu? Thx..=)
July 19th, 2008 at 12:37 am
wow, the best fisheye implementation i ever see, good work.
I will use jQuery because of this :)
July 23rd, 2008 at 9:47 am
this is some good shit!
July 24th, 2008 at 3:33 am
This does seem to contain several incompatibility problems; such as inclusion of prototype.js og jquery.js.
July 25th, 2008 at 7:41 am
hello, nice menu …but hey there are problems whn i’m trying to put together this part of code and the code for lightbox (2).
None of there are working …
I’ve also tested jquery.lightbox-0.5 but …. other errors break out :(
Any ideea ?
July 25th, 2008 at 4:26 pm
Can I use this on my website with the images?
This dock is awesome by the way!
July 26th, 2008 at 12:42 am
hi, this is Great ,but when i use it in a Page with (dir=”rtl”) it seems a little fuzzy. how can i fix it?
plz email me….
Tnx anyway
July 27th, 2008 at 10:53 am
Hi there,
I’m having an issue with the placement of the i guess:
When the site loads, the mousover does not work it is somehow working about the images but not exactely on the images.
Can anyone tell me why or is anyone experiencing the same issues?
http://www.afera-fashion.de
Thanks,
PHIL
July 30th, 2008 at 2:34 pm
Phil, try removing the margin-top on your .dock class. Seems to work after that.
August 3rd, 2008 at 6:27 am
This is amazing…..Great job!!!
thanks for this wonderful css dock menu
But how to make it work on firefox 3.
Thanks,
Cody
August 5th, 2008 at 6:31 am
Is it possible do a vertical dock menu? Thanks.
August 5th, 2008 at 11:20 pm
Great Job !! thanks for this amazing work !!
August 6th, 2008 at 3:19 am
Hi……Got a nice blog site.Some very interesting information. I like this.
Thank you
Pitter
August 6th, 2008 at 3:27 pm
amazing work. Love it. Thnx alot.
August 15th, 2008 at 12:53 am
what is the procedure to follow for this to work on rails framework..
August 16th, 2008 at 7:02 pm
Is there a way to get this menu to perform such an effect vertically rather than a menu bar that is horizontal?
August 18th, 2008 at 3:08 pm
I have a small bug at this script, i set the menu to show in the right side of the screen, and every time i load the site in a browser for the first time, it doesn;t work proprely, but if i refresh it goes to normal, how can i fix this little issue!?
August 19th, 2008 at 6:19 am
To those asking for a vertical menu:
You may try another dock menu named euDock ( http://eudock.jules.it/index-eudock2.0.php ). It’s nice.
August 20th, 2008 at 10:56 pm
I have found a bug when implementing this with a wordpress template. Where can I edit where the script looks for blank.gif? For instance the page will be example.com/page1 and the script will look in example.com/page1/images/ for the blank.gif resulting in the ugly red x indicating the image was not found. I’ve scoured through the code to not find a single mention of this. Is it in the jquery or interface js files? I’d like to be able to implement this on a dynamic site. Thanks for sharing this menu with us.
August 21st, 2008 at 1:55 am
amazing work. Love it. Thnx alot.
August 21st, 2008 at 12:01 pm
Hello everyone!
got a little question about it!
How can we make some changes in the *.js files?
Since i’m new to all of this, I have tried to open these files with notepad and dreamweaver but it did not work.
Why do I want to realise some changes?
Just because I want to get only one dock, on the bottom of the page and that I do not want the number “2″ to appears.
If you can help me it would be great.
Best regards
Silend
August 22nd, 2008 at 6:38 am
I’m having a slightly similar issue to Phil (#549), I have moved the placement of the dock higher(much like Phil) and now when I do a hard reload of the page, the animation only takes place when the cursor is hundreds of pixels higher than the actual images - but here’s the kicker, when I resize the browser window, even slightly, then voila ,everything works perfectly. Do another hard reload to dump the cache, and I’m back to having the same problem.
Ideas??
Pete
August 25th, 2008 at 4:31 pm
how do you reduce the hover point where the menu starts activating? i would like to not have the menu activate when hovered on the top part, where i have other stuff.
you can see it at www.kingbelvedere.com on the bottom.
any help would be awesome…
August 26th, 2008 at 6:46 am
hello every body.i try to use this exemple and i feel that it easy to use and funny.thanks :)
August 30th, 2008 at 11:23 am
It looks great, it works great, and it’s easy to install.. what else do we want?
Very good job!
Thanks
August 30th, 2008 at 1:05 pm
Cool! Can i make this dock appear as sidebar?
August 30th, 2008 at 7:04 pm
It Was Really Terrific !!
Than you Very Much …
August 31st, 2008 at 5:34 pm
Hey
I love the dock, but when I activate the NextGen Gallery Plugin with the Thick Box the Dock breaks down.
I don’t know why.
Has anyone an idea?
Thx in advance.
August 31st, 2008 at 6:13 pm
Addition:
It seems that the part inside the body is not used anymore:
$(document).ready(
function()
{
$(’#dock2′).Fisheye(
{
maxWidth: 60,
items: ‘a’,
itemsText: ’span’,
container: ‘.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
)
}
);
But I am not sure.
September 1st, 2008 at 6:07 am
Don’t copy past the code in your html file, but try to copy the source directly from the demo (http://www.ndesign-studio.com/demo/css-dock-menu/css-dock.html -> “View Source”)
It works great!
September 1st, 2008 at 6:49 am
Is there anyway to make the fisheye appear so that it doesn’t go behind my main div box?
When you hover over the dock goes behind it and people with small screens can’t read it.
http://www.dj23.net
Ta.
September 2nd, 2008 at 12:16 pm
this is an absolutely wonderful script! simply love it! =)
September 4th, 2008 at 7:49 am
nice dock.
jQuery really rocks.
nice job
September 4th, 2008 at 7:50 am
nice dock, smooth effects…
jQuery is awesome.
nice job
September 4th, 2008 at 12:58 pm
wow..i’m very love your menu …and very thanks to you …love your skill..
September 5th, 2008 at 12:31 am
what more can do with dock ..?
September 9th, 2008 at 2:12 pm
wow…i love the object dock..
Nice share …
September 11th, 2008 at 11:22 pm
Best job, man!!! Thank you
September 12th, 2008 at 11:50 am
Very nice! Thank you! How did you create the icons? They are very sharp also.
September 19th, 2008 at 5:03 am
Quiet nice work!
September 20th, 2008 at 4:57 pm
Hi there, I have a client that requested for this effect on her site, may I know what’s the license for this? Also, is there any way to put it in a table in the middle of the page instead of the top or bottom?
September 23rd, 2008 at 1:57 am
Really wonderful. Thanks for sharing it.
DON.
September 23rd, 2008 at 6:51 pm
Css Dock Menü Blogger Entegration Tutorial Turkish Langue Visit to http://teknomobi.blogspot.com/2008/09/blogger-css-dock-menu-design-tutorial.html
September 24th, 2008 at 7:46 am
I love this CSS dock menu.. Great work..
September 25th, 2008 at 10:58 am
wow, good css menu. but I have a problem, i open with frontpage and the menu dont run well, dont read the images and other things, why?
September 27th, 2008 at 2:06 am
Thank you so much for this free menu (works nice on FF3)!
Very nice site and design!!
October 1st, 2008 at 12:01 pm
Hey man.. This dock is really cool… But is there any way of using an image strip with your current code.. I’ve tried with the background image style attribute, but the image resize results in undesired effects… If your answer is NO… could you please release the source of your dock… I know its a lot to ask, but its always great to do charity ..:)
October 5th, 2008 at 1:42 pm
Absolutely amazing work buddy.
October 7th, 2008 at 5:05 am
Very nice, thank you for share
October 7th, 2008 at 12:48 pm
Hey there! I’m looking to make a taskbar that actually clips itself to the bottom of the page no matter where you scroll. If inserting your code here, it works fine until the page scrolls, and then the effect of hovering over the icons gradually loses its proximity. An example would be putting your html in , where the css for the toolbar is defined as follows: #toolbar
{
position: fixed !important;
position: absolute;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
height: 100px;
min-height: 100px;
z-index: 20;
background: url(../images/bg_gradient_toolbar.gif) repeat-x;
background-position: bottom left;
text-align: center;
}
October 8th, 2008 at 8:40 am
This is really awesome. I am searching for stuffs like this for my art work portal. :) Its really good.
October 13th, 2008 at 9:00 am
Well, your fisheye menu is damn good, but a problem with it is that is starts even if mouse cursor is a bit far away. It would be good if you look at the one made available at http://marcgrabanski.com/pages/code/fisheye-menu
October 14th, 2008 at 12:18 pm
I integrated it into PHP-Fusion and works excellent! Thank you!
October 14th, 2008 at 2:49 pm
Hi,
I’ve integrated and arranged my own version of this CSS menu on my website. It floats and follows the user from top to bottom. I’ve found it hard to make it work on many different browsers. Does it work well for you all?
http://www.sites-web.info/home.php
October 16th, 2008 at 3:12 pm
great work!
however I have a problem. I want to start dock from left not centered. I changed halign : ‘center’ and sth is wrong: the biggest icon isn’t under my cursor:
http://img511.imageshack.us/my.php?image=dockfo6.png
this is FF3, bug?
October 19th, 2008 at 4:43 pm
I had the same Problem!!!
October 21st, 2008 at 8:51 am
Works well with Safari!
October 22nd, 2008 at 4:56 am
This looks very nice!
Just to point out a bug, I guess, as it acts kinda funny in Google Chrome. The top menu works fine, while the bottom menu doesn’t do the fish eye effect. When using the top menu, the bottom one mimics fish eye behavior of the top menu simultaneously. Weird :)
October 23rd, 2008 at 5:48 am
I’d actually like to know if there is a call for centered v-align. The vertical centering as it is in this url - [ui.jquery.com/demos]
Thanks so much for the jquery plug.
October 23rd, 2008 at 8:56 am
Here is a other version of the same thing, without jQuery or other libraries:
http://www.dhteumeuleu.com/run/s-dock/
October 27th, 2008 at 1:59 pm
It seems to have chrome issues regarding focus area. Other than that, it’s pretty smooth.
October 27th, 2008 at 2:33 pm
Good!!!The best menu!!!I like this)))
October 28th, 2008 at 9:49 am
Hi
It seems the code only work if I use 128×128 icons.
How can I use 64×64 icons?
Thanks
October 29th, 2008 at 4:51 pm
Hi
I have LITTLE problem with dock-menu and SuperSleight solution for png transparency ( http://24ways.org/2007/supersleight-transparent-png-in-ie6 )
In Firefox, Opera, and others looks fine, but in IE 6 menu collapse ( http://www.fotosik.pl/pokaz_obrazek/pelny/c92edf675e89a983.html )
Any ideas? Why SuperSleight break down this wonderful menu?
Regards!
P.S. email in nick-name is correct
October 29th, 2008 at 7:56 pm
This is a fantastic menu, but I do have a question.
Is there a way to reduce the area that activates the menus animation? I would love to use this as a second menu under a horizontal text menu but when using the text menu above the dock menu, it activates the animation of the dock menu.
Cheers, Simon
November 1st, 2008 at 12:19 pm
Hey, love the dock! Great work! Quick question, I’m combining this with a javascript to open movable, resizeable content windows. I can open as many windows as I want and everything works fine, but as soon as I minimize a window or close one, the fisheye for the dock stops working. Do you have any ideas why this would happen? I’m speculating that because your script is calling out a function that is “unnamed” and the other script is calling out “named” functions, that when the close or minimize functions are called out, it causes your script to stop working… (not that I’m blaming your script- please dont get the wrong idea!). I’d really appreciate any feedback I can get, both from you or from the community, thanks in advance!
November 1st, 2008 at 2:13 pm
BUG: (used Firefox 3.03 when I found this)
Move your cursor over the icon, then right click on it. You’ll see.
November 6th, 2008 at 5:29 am
Thanks for the source code.
November 10th, 2008 at 7:41 am
hello its a great script
how easy is to expand the dark background vertically also so it will
made the titles more distinguishable on busy backgrounds
thanks ioannis
November 11th, 2008 at 6:19 am
is it posible to combine dock navigation and carousell … i need some solution for web shop where there are for example 5 elements visible, others not and you can scroll but I need also this dock effect… does anyone knows working example or plugin? i have tried to combine http://www.gmarwaha.com/jquery/jcarousellite/ and http://ui.jquery.com/repository/latest/demos/functional/#ui.magnifier but it doesn’t work as expected.
November 11th, 2008 at 8:18 am
i try to use it which lightbox or greybox, but don’t work… you know how to use witch css-dock ?
November 11th, 2008 at 4:58 pm
Cascading Style Sheets (CSS) web design lessons
Css link Properties Attributes - examles
http://css-lessons.ucoz.com/link-css-examples-1.htm
http://css-lessons.ucoz.com/link-css-examples-2.htm
November 11th, 2008 at 5:45 pm
Hi, I found a bug in the demo. So, under firefox ver.3. if you click w/ the mouse right button on the fancy menu, then the icon dont will goes small again. exept this problem its a really nice script.
November 12th, 2008 at 1:29 am
I have a request for a bug fix. I have fixed it on my own implementation. You should look into how you are getting the oldDisplay and oldOverflow variables. The error surfaced in IE 7 when I was using the Flexigrid. The errors seems to come from the fact that if the Display style or overflow style is not set inline it returns “undefined” instead of “” in IE 7.
Quick fix(not the best)
var oldDisplay=jQuery.css(elem,”display”);
CHANGE TO
var oldDisplay=jQuery.css(elem,”display”)==undefined?”:jQuery.css(elem, “display”);
var oldOverflow=jQuery.css(elem,”overflow”);
CHANGE TO
var oldOverflow=jQuery.css(elem,”overflow”)==undefined?”:jQuery.css(elem, “overflow”);
November 13th, 2008 at 2:55 am
It is working fine for me! thanks a lot.
November 14th, 2008 at 3:09 am
it’s better idea for end users to make more friendly….
November 14th, 2008 at 7:28 pm
hey since you don’t require a link back i’m going to use some of your pictures in the menus and add your link in my footer if you don’t want me to do that please send an email to me asap.
November 15th, 2008 at 9:35 pm
I love dock menu. I’m using it on my site: http://altamiraweb.net/webs.htm
November 21st, 2008 at 3:22 am
yeah
i like it very much
it’s so nice
November 22nd, 2008 at 3:39 am
Hi guys, is there any way to make the labels appear all the time instead of just hover?
November 24th, 2008 at 2:00 am
So, I can change the images, right?
December 4th, 2008 at 3:41 am
My site is in process. It’s a drupal site and as of right now jquery is only called in the admin area, so I have nothing to show unfortunately. I need help making the styles I am using center the application. Currently everything seems to float left.
December 11th, 2008 at 1:14 am
Hi,
Thanks for the menu, i use for sgdnetworks.com
Regards
Venkat
December 14th, 2008 at 12:14 pm
I love this menu! great job!
December 15th, 2008 at 6:16 pm
Hi. it’s a fantastc menù, but i need a little help! I’ve changed the css, changed a position:absolute to position:fixed (i don’t remember, maybe in dock2). So images scroll with the page, but the sensible area remain on the same coordinates (ehm.. to same X and Y, i don’t know how to explain in english) and doesn’t scroll with the page.
any idea on how to make this menù scrolling down? (ps: it scrolls down with ie6 but not with ie7 and ff3)
thanks!
December 15th, 2008 at 7:14 pm
ps: if you want to take a look to understand my problem, here’s a test link: http://www.stephenking.it/frm/viewtopic.php?f=12&t=37160&start=0
try tro scroll down the page. After put your mouse on menù and you’ll see what i meant!
December 16th, 2008 at 1:07 pm
Hi.
I’m using dock menu in my website but I see a conflict with another very useful jQuery plugin: http://flesler.blogspot.com/2007/10/jqueryscrollto.html
I noticed that some jQuery functions seem to be corrupted after the dock menu code.
Do you have any experience about that?
Thanks a lot.
Michele
December 22nd, 2008 at 1:09 pm
I too am experiencing the scrollTo jquery functions breaking after the implementation of the interface.js file.
Is the uncompressed source for interface.js available? I need to try to fix this conflict.
Awesome menu though!
December 24th, 2008 at 4:27 am
Awesome menu!!! exist a limit for items ??
December 24th, 2008 at 12:04 pm
be ! devo dire che ho provato ma mi segnala che c’è un errore in due script !!!
come posso risolvere ??
gli script errati che mi segnala il computer sono ( LA PARTE ERRATA è IN MAIUSCOLO ) :
$(document).ready(
function()
{
$(’#dock2′).Fisheye(
{
MAXWIDTH: 60,
items: ‘a’,
itemsText: ’span’,
container: ‘.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
)
}
);
e poi il secondo script errato :
$(document).ready(
function()
{
$(’#dock2′).Fisheye(
{
MAXWIDTH: 60,
items: ‘a’,
itemsText: ’span’,
container: ‘.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
)
}
);
December 24th, 2008 at 12:06 pm
be! I must say that I tried but I note that there is an error in two scripts!
how can I fix?
Incorrect scripts that I recommend computer (LA is WRONG PART IN CAPITAL):
$ (document). ready (
function ()
(
$ ( ‘# Dock2′). Fisheye (
(
Maxwidth: 60
items: ‘a’,
itemsText: ’span’,
container: ‘. container2-dock’,
itemWidth: 40
proximity: 80
alignment: ‘left’,
valign: ‘bottom’,
halign: ‘center’
)
)
)
);
and then the second script wrong:
$ (document). ready (
function ()
(
$ ( ‘# Dock2′). Fisheye (
(
Maxwidth: 60
items: ‘a’,
itemsText: ’span’,
container: ‘. container2-dock’,
itemWidth: 40
proximity: 80
alignment: ‘left’,
valign: ‘bottom’,
halign: ‘center’
)
)
)
);
December 29th, 2008 at 5:47 pm
Hey, Thanks everyone here gets impresed by your menu. I’m using it on a Intranet Site :oD
January 4th, 2009 at 11:49 pm
that’s my fav object dock…
January 7th, 2009 at 2:09 pm
Curious, is there a way to make this work vertically.
it is done with a different script here:
http://www.wizzud.com/jqDock/
but it’s response time is much slower and seems jumpy
January 13th, 2009 at 10:34 am
hellow, this is amazing, I loved it. But a small problem occured while browsing with ie6. sizes of the images change in ie6. it looks like squized :o((( any help on this pls? in iepngfix.htc which code changes the sizes of the images? I couldn’t find unfortunately :o( it says auto for the sizes…any help pls? :o(((
January 13th, 2009 at 10:52 am
Also, when we click the menu items a red line frame is seen around it. where can I change this?
January 15th, 2009 at 4:32 am
i come from china this site is so good
January 20th, 2009 at 2:16 pm
Thanks, this is fantastic! Where’s the donate button? haha nvm, I found it!
Could you clear something up for me before I use this on a commercial site? I read the other day that apple has a copyright on the Dock or Dock effect, I doubt they heavily enforce this on websites, but could I potentially run into any trouble if I use this in my design? It is my website so I’m not worried about getting in trouble with a boss or someone that’s hired me, I’d just hate to get a letter from apple than have to redesign.
I find it quite ridiculous that such a basic UI effect could be copyrighted but then again we live in an age where corporations have more rights than people.
Anyways thanks again, you rock.
January 23rd, 2009 at 10:00 am
Amazing stuff.But i want to customize it.I am in the process of building a classified ads site.On the front page i just want about 20 icons representing different categories.So i want to use this menu. but i am out of ideas how to customize it so that it takes the form of a big square on my sites front page rather than just a strip of icons on either the top or bottom.
January 24th, 2009 at 7:27 am
hey congrats for such a good site and specially for this dock-menu. Now currently i have download your code and it works fine. Can you please do me a favour ? i want this menu in vertical and horizontal both manner. can you guide me for that ? waiting for your sooner reply.
Thanks again
January 26th, 2009 at 8:01 am
Almost perfect. One small issue I have is that it seems a little jumpy, almost a bit too reactive to the movement of the mouse. So if your mouse movement is slightly juddery it reflects in the movement of the icons.
Is there any way of ’smoothing’ the movement of the icons slightly, sort of like a max animation speed, easing in and out.
Cheers.
January 26th, 2009 at 8:29 am
Sorry, just noticed that this only seems to happen in Firefox 2.0 for OSX. Seems very smooth in Safari, IE6, Firefox 3.0.
I disabled Firebug which seems to make it slightly better, but its still a little jerky. Since Firefox 3.0 is out I suppose it doesn’t really matter.
Thanks.
January 26th, 2009 at 9:18 am
Just noticed the Safari 3 bug, its definitely a bit of a show stopper. This is the problem where the hover area for the animation is stuck at the top of the screen, rather than at the bottom where the actual icons are placed.
It seems to work at first and then break the second time you visit (or refresh), maybe there is some kind of caching problem.
January 29th, 2009 at 8:24 am
I’ve found a solution to the Safari/Webkit problem. Its a Jquery problem where the onload (ready) functionalty starts running scripts before the CSS has loaded.
To solve this, just remember to put all your scripts AFTER the CSS in the head of your document. This also applies for the demo of this script.
Further info:
http://dev.jquery.com/ticket/1319
January 29th, 2009 at 10:06 am
How can we show this icons vertically
January 30th, 2009 at 8:46 pm
i just have a quick question on positioning.
im having troubles with the docking on the bottom. as to i want the bar to stay on the bottom at all times when people are scrolling its “fixed” to that position on the screen. unfortunitly when i do that the proximity area is above the images of the dock bar. the bar works when the page is on the top but when u scroll down the page the dock bar follows but the “hover area” is still in its spot. do i have to do anything special to fix that?
February 2nd, 2009 at 8:59 am
hi,
That was not working in Apple Safari for windows.. please guide me.
thanks
maran
February 2nd, 2009 at 6:06 pm
I want to use this for my phpBB forum. Can you or anyone else tell me how to install it there. Thanks in advance.
February 3rd, 2009 at 2:21 pm
Please ! How Do You Change It SO That WHen I Click On A Icon It Leads Me To A URL?
February 7th, 2009 at 7:06 am
I am using this menu in my local website. I am facing a problem after including a label tag to display the menu name. Since the names are 10 to 20 character long, there is no enough spacing between the icons and looks congested. Can any one tell me how to increase the spacing between the icons?
you can mail me at sysarcweb@gmail.com
February 7th, 2009 at 9:55 am
JackMan, In the following code you have to replace the “#” with a link.
Home
———-
February 7th, 2009 at 9:55 am
EDIT: The code above “Browser Compatibility”. Scroll a bit up.
February 13th, 2009 at 7:24 am
is it possible to use this for a layered menu? i’m not that fluent in JS and CSS..
so that an Nav-layer hovers over/under the selected menu item?
February 20th, 2009 at 6:52 pm
um i put it at the bottom of my page and it dosent do thee fish eye but when i move my mouse up to the top in a non dock area the fisheye activates help
February 22nd, 2009 at 8:37 am
This is some really nice work man! Keep it up;)
February 24th, 2009 at 5:49 am
I am new to the whole CSS thing and am really excited about maybe using this apple style dock in one of my next web sites. I like it because it is something different.
I notice some people, however, are having problems with the code side of it, which is slightly worrying but never-the-less i’ll give it a go.
I’ll let you know how i get on and if i need any help….which may be likely. :)
March 5th, 2009 at 1:12 pm
Hi,
very nice work so far :)
Is it possible to change the size of the distance of the Icons and the Icon size > except to set the css .dock-item2 img width to 123%, i really try out everthing i know, but i didn’t get it. Thanks for an advice.
bests,
matthias
March 6th, 2009 at 6:02 am
it’s realy so great but, i have a probleme with the png icons they show up with blue bg help me not transparente
March 10th, 2009 at 2:18 pm
@Tom (#645) - THANK YOU. that was driving me crazy, and no one else seemed to be able to find that answer.
March 10th, 2009 at 10:44 pm
@destrukt i have the same problem as you CAN ANYONE TELL ME HOW TO LOCK THE DOCK AT THE BOTTOM OF THE PAGE NO MATTER HOW I SCROLL
March 11th, 2009 at 7:27 am
Hi, I want to use this with images of different width but same height.. I guess this requires just a few changes.
Please help - contact me on my mail…
thanks
March 13th, 2009 at 7:05 pm
pimp… love the action… it’s very smooth. and those are some slick icons too. bravo!
March 14th, 2009 at 1:51 am
I love it!
Added to my blog. Awesome menu.
March 27th, 2009 at 5:57 pm
Hi everybody,
Does anyone know how to lock the dock in the bottom of the window ? In my css file, i write position:fixed, for the dock. But there’s a big problem : when you scroll down the page, the dock is correctly “fixed”, but the “hover area” is still in its spot (i.e. higher than the dock, too high) :-(
Any idea, please ?
Thank you…
March 29th, 2009 at 5:29 am
Hi, Very nice!!! I like this but how do i make it to go to the left or right side of the screen instead of top or bottom. I mean left side of the page so, it will be vertical instead of horizontal? This will give me more vertical space for the web site.
March 31st, 2009 at 3:11 pm
omg, this menu is amazing!! thank you
April 1st, 2009 at 4:24 am
Amazing.. can’t belive !! i only thought its only posible in flash… wonderfull i live very much.
April 7th, 2009 at 10:16 am
That is very great. Thanks for sharing buddy, I’ll be sure to use it in my university project :)
April 7th, 2009 at 11:48 am
Is there an updated version of the interface.js file that works with the newer versions of jQuery?
When I try to use 1.3.2 all the icons group together in a big pile on the screen.
BTW, absolutely everyone I have shown these menus(using jq 1.2.6) think they are brilliant.
April 7th, 2009 at 12:00 pm
Sorry. I take it back. The problem appears to be with another plugin I was linking to (and not using?)
April 8th, 2009 at 8:23 am
This is marvellous job and i would like to thank you a lot!!!Excellent creativity!!!
April 16th, 2009 at 9:26 am
Hi.
I have a question about the JS code.
I need to show the images bigger in the “OnMouseOut” event.
How can I do this?
Please, answer me by mail.
Thanks for all.
April 18th, 2009 at 4:06 am
Hello:
I would just like to say:
This is a very nice website. And great Work..
Here you can find a lot of nice things ..
Thanks
Ina
April 19th, 2009 at 7:02 pm
I have the same problem as Jilo, everything scrolls correctly but the hover area for the fisheye remains in it’s default position. So how do I get the fisheye to scroll with the dock.
April 30th, 2009 at 4:15 am
Hi firstly That’s great design
I have question I want this dock on the left side of page how can I do that
Thank for your great job
April 30th, 2009 at 1:08 pm
i can’t use this code someone can explain me ?
please
thank you
May 6th, 2009 at 5:45 pm
Brilliant extention - I think there are going to be a lot of people usuing this menu now :)
May 11th, 2009 at 1:01 pm
I have this excellent DockBar, but I have problem with the zoom effect, I use the DTHMLWindow script for generate windows on my website, by default I create two windows, all is gone fine with the this DockBar, but only when I touch or focus the DTHMLWindows the Zoom effect of dock bar it lose. I would like some help.
May 19th, 2009 at 8:52 am
Hi,
I would just like to say:
This is a very nice website. Very nice menu i will use this code. And great Work..
Thanks.
May 20th, 2009 at 10:34 am
I would like to use follow scrolling, but this doesn’t seem to work if the menu uses relative positioning. Is there anything I can do to set this up?
May 26th, 2009 at 6:16 am
Hi!
Very nice Dock. But the use as a menu requires enabled JavaScript. without JavaScript is it useless. It’s a pity…
Greetings from Germany,
Andreas
May 27th, 2009 at 8:24 am
Not working fine in chrome
May 27th, 2009 at 8:53 am
hello its a great script
how easy is to expand the dark background vertically also so it will
made the titles more distinguishable on busy backgrounds
thanks Miro
May 27th, 2009 at 4:57 pm
Hey how can I get this docks “zoom-effect” to go up instead of down as it is now ?
May 30th, 2009 at 4:09 pm
Please,
how to specify the image size at the loading.
i mean the size of the images when the menu is not actived is small.
how to specify a size in the config section
(the srcipt tag at the end)
please help me!!
May 31st, 2009 at 5:43 am
Erm.. I love the bottom-dock, but its really _not_ placed in the middle! And it looks quite bad when you place a background picture at the center of your screen, and you that dock doesnt fit with its position. What should I overwrite in the code, to get it exacly in the middle (at the bottom still)?
June 2nd, 2009 at 8:02 am
it’s greate man i will use it
June 3rd, 2009 at 11:19 pm
Very good plugin…
but how to make a vertical dock menu?
June 4th, 2009 at 6:24 am
Thanks. I would recommend you to take a look on mac-like dock example at coderun.com/ide/?p=dock_menu
June 4th, 2009 at 6:40 am
Mh i just wonder if it is possible to display it not on top or bottom but on the left side. and the menu items from top to down like:
ITEM
ITEM
ITEM
Is that possible?
June 4th, 2009 at 3:30 pm
I loved the floiedity of this bar.
I also found a code example in
www.coderun.com/ide/?p=dock_menu
is alows you for a play-in-code enviroment
lot’s of fun :)
June 5th, 2009 at 7:52 am
a good navigation menu,it’s wonderful!
June 6th, 2009 at 3:34 pm
Cool :)
I’m late ! I tried the demo using Google Chrome.
Everything is nice. But, in the example css-dock.html the bottom menu doesn’t work :(
I will try to fix this bug !
June 7th, 2009 at 4:53 am
Just use the bottom dock in your css top dock code instead of the top dock
June 8th, 2009 at 3:27 pm
Its unfortunate that this is not really done as a more generic jquery plugin. The mechanics of the bar are done really well… just to much of a pain to customize.
June 10th, 2009 at 8:53 am
Really cool and easy to use, thanks!
June 16th, 2009 at 3:42 am
I wish it worked with a scrolling page :(
BUG! When setting #dock2 position (CSS) to “fixed”, scroll down the page, the component does not work properly. The mouse sensing area is invisible, not in html and not in CSS.
JS is packed and can’t update ! Damn :( !
June 19th, 2009 at 8:47 am
Why this scroll with the page?
In the Bottom view if the container,if the page is bigger to need a scroll, the menu follows the scroll.
Have some fix to that?
June 23rd, 2009 at 11:42 pm
Hello there I’m not sure if you’re taking any questions for this anymore since you said you’re not.
But it seems like the download document is broken. Or is it just my problem? Can you please check it >
June 24th, 2009 at 5:40 am
Killer menu, will use it on my site! Thanks!
June 24th, 2009 at 11:38 am
can u add a submenu item to this? if so, how?
June 25th, 2009 at 4:10 am
Few questions:
1-can I generate a simple horizontal text sub-menu that will appear under a certain icon on the dock menu?
2-how can I get/create my own menu icons?
Thanks :-)
June 26th, 2009 at 6:00 pm
I like it menu!!! Very nice work. Please, don’t forget to visit my Portal Of Web-Masters NullSpace.Ru
June 28th, 2009 at 1:27 am
How can we acheive to have multiple rows ( that is two horizontal menus one after another ) is it possible ???
June 28th, 2009 at 2:07 pm
Hi there.
Thanks a lot for this exceptionally cool menus. We use them ALOT on our sites.
July 2nd, 2009 at 5:45 pm
hi, is there possibility to add spacing between icons with padding or margin? I have tried this and jquery ( or who ever) is hot calculating positions of mouse and icons correctly..is there a solution for this?
July 3rd, 2009 at 10:29 am
Its amazing… I never imagine there is stuff like this, I mean, its implemented in web..!
Great..!
^^
July 7th, 2009 at 11:18 pm
Is it possible to nest another dock menu underneath the main menu? Kind of like a dropdown menu?
July 15th, 2009 at 2:03 pm
I like big macs but i don’t see why i would love this…
July 17th, 2009 at 9:33 am
CSS Dock rocks! I am going to use it!
July 20th, 2009 at 12:24 pm
Anyone find a fix for the scrolling issue? Whenever the page length is more than one browser window the bars no longer work when scrolling. The hit zone for the menu appears to be fixed on the page and not on the menus position on the page. I have the menu fixed to the bottom the entire time the user is scrolling and the hit zone moves as I scroll. Same for the top menu.
July 22nd, 2009 at 8:44 pm
hi, i am using the css dock menu for my site. but apparently i want the menu to be floating, i get some code to make it. but after i scroll it, the “fish eye” effect could not “run” again? any suggestion?
TIA
July 22nd, 2009 at 9:32 pm
i implement this menu in my site. but apparently when i used i as floating menu, i stop the “fish Eye” effect after i scroll it, and it follow by floating. but when i scroll back to its original position. the fish eye effect works fine.
can somebody help my with this. TIA
July 23rd, 2009 at 8:42 pm
Wow . . . that’s great. Thanks for your effort.
August 1st, 2009 at 8:55 am
Hi, this is really cool, but i’ve one question…. how do I set this css dock menu so it would scale to full height on page. Thanks
August 19th, 2009 at 5:33 am
Wonderful!Nick. This is very nice. I would like to use it for the upgrade of my site. Thanks a lot.
August 21st, 2009 at 9:55 am
cool. i would love to implement it! great job! keep up the good work.
August 27th, 2009 at 1:03 pm
Hi, I discovered your css dock through net.tuts and I used it for my website www.cluzeauwebdesign.com, thanks a lot for this one.
September 1st, 2009 at 3:55 am
what a wonderful menu! I like it thanks!
September 3rd, 2009 at 5:41 pm
I’ve tried everything, but I can’t get the block to be FIXED to the bottom of the screen. I.e. If the page has enough text to scroll, the icons don’t stick to the bottom when you scroll. I got as far as setting
#dock2’s position to fixed, which sorta did the trick, but then when you scroll down, the fisheye effect no longer works. But, if you scroll over the original location, the effect does works.
This leads me to believe that the location of #dock2 doesnt get recalculated each time.
Please help!