CSS Dock Menu
May 08, 2007 269 Comments
If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page.
CSS dock menu screenshot
Update: I no longer support the questons regard this dock menu. If you like the HiGloss icons used in the demos, you can get them as stock icons at IconDock.
1. Download Source Files
Download the CSS dock menu zip package.
2. Insert Code
In between the HTML <head> tag, add the following code
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script><link href="style.css" rel="stylesheet" type="text/css" /><!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>The first part is the Javascript, second part is CSS stylesheet, and last part is the PNG hack for IE 6.
3. Configuration
Don’t forget to add the following code to anywhere within the <body> tag:
<script type="text/javascript">
$(document).ready(
function()
{
$('#dock2').Fisheye(
{
maxWidth: 60,
items: 'a',
itemsText: 'span',
container: '.dock-container2',
itemWidth: 40,
proximity: 80,
alignment : 'left',
valign: 'bottom',
halign : 'center'
}
)
}
);
</script>4. Add or Remove Items
To add menu item to the top dock (note: span tag is after the img tag):
<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a> To add menu item to the bottom dock (note: span tag is before the img tag):
<a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>Browser Compatibility
I have tested on IE 6, IE 7, Opera 9, Firefox 2, and Safari 2 (although there are some minor rendering issues with Safari).
Design Process of The Phoenix Illustration Illustrator knowhow
Collapse All
Dec 09, 2009 @ 06:31:18
Sergio Marin
Hello, good job this dock is very nice.
But i want to use this dock in the bottom of one site, but when i use the scrool the dock dont move…its in the same place where he start.
i chance the css, but the zone of mouse hover dont move only the images
Dec 17, 2009 @ 20:59:53
Denis Michaud
Hi, if you find a solution, can you tell me please?
I have the save problem.
dmichaud80@hotmail.com
Dec 18, 2009 @ 15:46:53
Denis Michaud
Try this, it worked for me :
form
{
min-height:92%;
}
Dec 23, 2009 @ 22:02:51
Peter
Google page speed seems to hate the dock menu, mainly because you size a 128 x 128 image as a 60 x 60 image and you don’t specify width and height in html.
Anyway around this?
Jan 11, 2010 @ 16:51:46
Denis Michaud
You can see the result here : http://www.religion.qc.ca/bouddhisme/bouddhisme.aspx .
Apr 14, 2010 @ 20:02:29
diego
hi this is just a test
Mar 01, 2011 @ 03:55:09
KANG Ghee Keong
To allow the dock to flow with the page, the CSS file just needs to be changed to the one below. And I’m using the bottom dock only, I don’t need the top one.
(This is useful for our system that manages university student activities, to show the upcoming activities as interactive images.)
—
body {
font: 11px Arial, Helvetica, sans-serif;
background: #ffffff url(images/main-bg.gif);
padding: 0;
margin: 0;
}
img {
border: none;
}
/* dock */
.dock {
position: relative;
height: 0px;
text-align: center;
}
#dock2 {
xwidth: 100%;
xbottom: 0px;
position: absolute;
xleft: 0px;
}
.dock-container2 {
xposition: relative;
height: 50px;
xbackground: url(images/dock-bg.gif);
padding-left: 20px;
}
a.dock-item2 {
display: block;
font: bold 12px Arial, Helvetica, sans-serif;
width: 40px;
color: #000000;
bottom: 0px;
position: absolute;
text-align: center;
text-decoration: none;
}
.dock-item2 span {
display: none;
padding-left: 20px;
}
.dock-item2 img {
border: none;
margin: 5px 10px 0px;
width: 100%;
}
—
Dec 09, 2009 @ 06:38:14
Sergio Marin
you can see the example here:
http://www.kontenedor.com/prototipos/sergio/index2.html
Jan 30, 2010 @ 03:27:31
alex
try this
http://www.dynamicdrive.com/dynamicindex17/ajaxincludes.htm
Description: This script uses Ajax (DHTML interacting with the server) to let you dynamically include the contents of an external page onto the current document. It’s similar in function to our Iframe SSI script, though uses no frames, obviously. :)
worked just fine for me!
Dec 09, 2009 @ 10:26:14
Michael Behrens
Hi, i’m having some problems with CSS Dock menu in IE. its works great in Firefox but all the images display on the right and are really small. the fisheye is also wrong… does anyone have a fix for this?
Dec 10, 2009 @ 20:21:53
Mr Đại
Wow !….Thank you for sharing it ! Very nice …
Jan 19, 2010 @ 10:24:52
kwl
yes,i am enjoying the wonderful conposition .from China.
Dec 18, 2009 @ 11:20:18
Web Tasarımı
I still find Drupal templates sites are lagging behind the number of Joomla template sites. The more templates available free or otherwise will help the popularity of Drupal.
Dec 18, 2009 @ 15:37:35
iman&maroc
svp, j’ai testé sous IE8, mais àa l’air ne fonctionne pas,
Dec 20, 2009 @ 11:48:04
zabery
good!!!,it’s very strong ,javascript is also very strong
Jan 13, 2010 @ 13:05:46
Denis Michaud
Il fonctionne très bien sous IE8. Vérifie que ton fichier JavaScript et ton CSS sont bien en place.
Jul 27, 2010 @ 07:35:01
yazar kasa
Description: This script uses Ajax (DHTML interacting with the server) to let you dynamically include the contents of an external page onto the current document. It’s similar in function to our Iframe SSI script, though uses no frames, obviously. :)
Dec 21, 2009 @ 02:03:18
shuvro
let me try to my site. it’s awesome.
Dec 23, 2009 @ 11:47:51
Web Tasarımı
I still find Drupal templates sites are lagging behind the number of Joomla template sites. The more templates available free or otherwise will help the popularity of Drupal
Dec 24, 2009 @ 00:24:54
Peter
Google page speed seems to hate the dock menu, mainly because you size a 128 x 128 image as a 60 x 60 image and you don’t specify width and height in html.
Anyway around this?
Dec 25, 2009 @ 02:13:36
webb
Simple and straight tutorial.
Dec 25, 2009 @ 02:22:32
Hayden
can anyone help me? I can;t figure out how to get a background on this! i have tried inserting bgcolor in certain spots but nothing! please help!
Dec 25, 2009 @ 06:22:45
Saif
Thanks for the sharing
Dec 25, 2009 @ 11:56:07
Ooty
Thanks for sharing, i will try on my web site
Dec 25, 2009 @ 13:53:57
SmarterTech
I want to use a vertical menu instead of the horizontal one shared here.
Can anyone help me…
Dec 25, 2009 @ 22:57:40
video75
Thank you for sharing it ! Very nice
Dec 26, 2009 @ 10:35:05
ekonomi
I have been wondering about the question of selling the ebook or just giving it away. thanks
Dec 26, 2009 @ 11:00:43
Teknoloji-Saglık-Cinsel
I can’t wait to get my hands on that report! Thanks Brian!
Dec 26, 2009 @ 11:19:05
Dinle
Thanks for writing
Danke shön
Dec 26, 2009 @ 11:22:23
Film Seyret
let me try to my site. it’s awesome.
Dec 26, 2009 @ 11:35:03
Yemek Tarifleri
Thanks, have never seen this article before. Very useful. Regards Khalid.
Dec 26, 2009 @ 12:03:58
Türk Porno
Nice features, some a bit overexposed already, but nontheless nice ones.
Dec 26, 2009 @ 12:25:29
Okey Tavla Batak
Very Good Thanks ı love you ndesign-studio.com
Jun 13, 2010 @ 01:58:26
Herve Leger Bandage Dress Sale
That’s an article worth imagining!!!
Dec 26, 2009 @ 12:53:18
mp3
you are exactly right brother i love you
Dec 26, 2009 @ 12:53:47
dau
i will use these informations on my design
Dec 26, 2009 @ 13:57:27
sağlık yaşam
can’t wait to get my hands on that report! Thanks Brian!
Dec 26, 2009 @ 17:32:46
Surf Is My Life
thanks everyone. ı use css my design
Dec 28, 2009 @ 17:34:19
tel çit
thanks for alot for information
Dec 30, 2009 @ 04:50:18
招聘
thanks for alot for information
Dec 30, 2009 @ 23:05:40
sikiş
Thank you from css menu, very very menus please :)
Dec 31, 2009 @ 00:06:48
Firma Rehberi
Thank you very very much nice work,
Dec 31, 2009 @ 17:54:50
StyLe
Very nice:)) thanks.. ndesign-studio
Jan 04, 2010 @ 20:21:23
Loaden
With this patch the Fisheye works after scrolling while it’s fixed positioned:
http://www.monkey-business.biz/181/jquery-interfaces-fisheye-position-fixed-patch/
Jan 23, 2010 @ 10:39:35
lee
Doesn’t work in IE for me. In Safari it does.
Feb 12, 2010 @ 03:43:55
Loaden
I fixed the plugin also for IE now. Try it. It works. :)
Feb 18, 2010 @ 08:57:30
Dusso
Thank you! Your patch saved me daays of work =)
Jun 22, 2010 @ 07:35:30
roei
Hi,
can you please tell me how do I get this fixed position to
work at the bottom of the page?
Thanks
Jan 04, 2010 @ 20:30:35
romacron
Thats really nice and it has a good functionality
Jan 05, 2010 @ 17:04:53
sohbet
good! thank you very much admin..
Jan 06, 2010 @ 13:09:26
Bsten
Great!! :)
How to use it on two or more rows?
Jul 27, 2010 @ 07:33:36
göğüs büyütücü
thanks you Very good..Thanks for post
Jan 06, 2010 @ 21:39:50
Gunner Doyle
This is fantastic. I have been able to implement in a regular website using css, but have yet to be able to implement into my wordpress theme. Has anyone been able to add this to wordpress theme? If so, could you lend a hand?
Jan 07, 2010 @ 04:16:22
外汇
Thats really nice and it has a good functionality
Jan 07, 2010 @ 13:56:57
Lolly
awesome love it!!!
Got it to work with ease, brilliant!
Jan 10, 2010 @ 14:14:49
hmtal
Interesting post thanks – best male enhancement products
Jun 13, 2010 @ 01:42:41
timberland mens 6 inch boots
I had a quick look in the wonderful blog and I was magnetized by the plot.
Jan 11, 2010 @ 16:22:54
Eric Di Bari
I don’t know if I see have a way to include this in my site, but I wish I did.
Jan 15, 2010 @ 13:25:29
Paul
See this site, where our friend just copied and added some icons: http://interface.eyecon.ro
Jan 17, 2010 @ 07:19:40
Star Config web design sydney
Thank you for showing us how to do it css dock menu, it is really good article, especially i like it becouse you showed all coding here in this article, so it is going to make it easire wehn we design it. Well done.
Jan 17, 2010 @ 09:33:16
Argent Facile
Merci ! c’est excellent !
Je vais le mettre sur mon site : http://www.gagner-economiser.com
;)
Jan 18, 2010 @ 17:28:48
graphic design colleges online
Very cool web freebie I love this css dock menu!
Jan 18, 2010 @ 20:54:48
picture scanner
Thanks heaps for this! This CSS Dock menu is simply the best, at least for me, among the menu effects out there. Again, thanks a lot!
Jan 18, 2010 @ 21:16:42
purple comforter set
Yeah, whether your a Mac fan or not, this CSS Dock Menu definitely rocks. Now, how do I add this into a wordpress site?
Jan 21, 2010 @ 17:49:02
lee
I might be a simpleton, but how can i allign to images on the left and right side of the dock? Can’t seem to get it working… Anyone got a solution?
Jan 23, 2010 @ 10:20:28
likbez
Thank! I liked the menu very much!!!
max-pix
Jan 25, 2010 @ 13:38:17
D Bhana
Dear ndesign-studio,
Could I please have your permission to use the CSS Dock Menu for my school project.
Kind regards,
D. Bhana
p.s. This will be used for non-profit purposes
Jan 29, 2010 @ 17:06:47
Per
Fantastic! Much appreciated.. great page.
Jan 31, 2010 @ 03:47:31
Alex
Super DOCK!!! works perfectly on my site :D
CSS-DOCK preview–> http://www.pcgames.ucoz.com
Jan 31, 2010 @ 09:23:19
webmaestro
So cool. I love it ! Thank you.
Jan 31, 2010 @ 10:56:18
community classsifieds
Superb designs. Truly a masterpiece.
Sure a lot of intelligent brain behind this,
Thanks a million.
Regards,
Sean Preton
Feb 01, 2010 @ 08:31:24
Hotte
Heyho, thanks a lot! I luv this script! Go on and I hope you´ll have much fun by working on websites :D
Feb 02, 2010 @ 04:48:24
toddlers car seat safety guide
Great Job.!
Thank you vey much
Feb 02, 2010 @ 09:38:39
Milind
Really great work !!!
Thank you
Feb 03, 2010 @ 07:12:35
astuce
merci pour cette astuce! moi qui suis fan de mac, c’est très sympa comme truc :-)
Feb 03, 2010 @ 13:23:08
Luciano
You can see the result here :
http://www.lucianomarcio.oi.com.br/indexinicial.html
Feb 03, 2010 @ 17:43:33
isimiznet
yes,i am enjoying the wonderful conposition .
Feb 04, 2010 @ 00:02:15
Alec
great sharing just installed on my forum :)
http://thecashchat.com/forum/index.php
Feb 04, 2010 @ 02:00:30
tamil
Thanks for sharing. keep it up.
Feb 04, 2010 @ 02:01:43
tamil
Thanks for sharing. Keep on going
Feb 04, 2010 @ 02:06:18
tamil
Thanks for sharing. Nice work.
Feb 04, 2010 @ 03:13:44
Mesothelioma
Thanks for sharing. keep it up.
Feb 06, 2010 @ 21:42:07
Zerred
,. how can i make the dock always on top?, like a navigation? please help,.
Feb 06, 2010 @ 21:52:09
Zerred
,uhmm,.? can somebody help????
Feb 08, 2010 @ 12:00:18
pratik agrawal
your dock is really awesome….
nice thinking..
Feb 09, 2010 @ 09:07:32
vpsbul
Thanks for sharing. keep it up.
Feb 09, 2010 @ 11:29:08
435BruxutsNast
Per dimagrire
para adelgazar
Pour Maigrir
Feb 10, 2010 @ 00:25:36
Bharati
Very Nice………………..
Gud Bloggggggg
Feb 11, 2010 @ 08:02:44
kobiler
uu thanks very nice blogg ….
Feb 11, 2010 @ 08:04:24
Firmalar Rehberi
Great Job.!
Thank you vey much :)
Feb 11, 2010 @ 08:06:40
bilgisayar firmaları
Great Job.!
Thank you vey much
this is perfect bussines directory
Feb 12, 2010 @ 13:14:51
it050115
wow! May I use it as my windows7 desktop/theme instead?
Feb 13, 2010 @ 16:07:28
Java developer
Big thanks. Really great stuff
Feb 14, 2010 @ 08:51:12
Bernd
Hello, the dock looks realy nice, but I can´t download the pack, it says ” The File does not exist”. I would realy apriciate it, if you could fix it.
Bernd
Feb 14, 2010 @ 12:15:48
hanip
hi, please update link for download css-dock-menu.zip!!! file not found…
Feb 14, 2010 @ 12:54:03
Michael
awesome menu!!!
But how do i get the bottom menu in the middel of my page that the zoom effect is use with mouse from over and under the menu???
Please help me. My html knowlege is not so good that i can do it on my own.
Sorry for my bad english
Feb 14, 2010 @ 12:56:56
Michael
Here is a new download link:
http://rapidshare.com/files/350596785/dock.zip.html
Feb 15, 2010 @ 17:42:15
Bernd
Download limit has been reached…:(
Feb 16, 2010 @ 09:13:47
Miele Servisi
Bosch Servisi
Feb 15, 2010 @ 05:34:07
web optimizasyon
web optimizasyon konularında bilgi ve destek alabilirsiniz
Feb 15, 2010 @ 05:35:48
Firma Rehberi
Firma rehberi turkiye genelindeki bir çok firma bilgisi ve ürün hizmetlerinin yaynlandığı firma rehberi sitesidir.
Feb 16, 2010 @ 09:11:25
Miele Servisi
Miele Servisi , Tamiri ve Bakım Hizmetleri
Feb 16, 2010 @ 11:28:23
Victor Klaus
Icons don’t have to be very small, you can also use it as kind of eye-catcher. See our site: http://www.degeustwins.nl.
Beautiful menu!
Thanks
Feb 16, 2010 @ 12:00:22
Lau
the link is broken :(
can’t you fix it please?
Feb 16, 2010 @ 12:33:41
Victor Klaus
here comes the link again:
http://www.degeustwins.nl
bye
Feb 17, 2010 @ 05:13:57
Victor Klaus
two good download-links:
http://www.wizzud.com/jqDock/
and
http://eudock.jules.it/index-eudock2.0.php
Last one is funny and very useful!
Victor
Feb 16, 2010 @ 19:49:48
sven
Hello,
the download link is Broken. Have you an alternative? And this was great work. Very nice
Feb 17, 2010 @ 00:22:22
Victor Klaus
There are more places tofind Fisheye menu downloads, here are two of the best (as far as I know):
http://www.wizzud.com/jqDock/
and
http://eudock.jules.it/euDock.php (f*cking brilliant site)!
good luck,
Victor
Feb 17, 2010 @ 09:11:44
Nick La
The download link is fixed. Thanks.
Feb 17, 2010 @ 02:04:39
Victor Klaus
Good links for Fisheye-menu can be found here:
http://www.wizzud.com/jqDock/
and
http://eudock.jules.it/index-eudock2.0.php (f*cking brilliant site!)
Good luck,
Victor
Feb 17, 2010 @ 09:44:14
Weddings Fashion
But how do i get the bottom menu in the middel of my page that the zoom effect is use with mouse from over and under the menu?
Feb 19, 2010 @ 10:26:03
Structured Settlements
Nice Collection Thanks for share…
Feb 20, 2010 @ 13:10:03
Luciano Marcio
You can see the excellent result on my web site:
http://www.lucianomarcio.oi.com.br/indexinicial.html
Feb 22, 2010 @ 11:56:49
marc
Good stuff! Thanks for sharing!
Feb 23, 2010 @ 00:50:44
XHTML TEAM
Great collection. Thanks for sharing…
Feb 23, 2010 @ 18:34:13
Beau Chevassus
Here’s my example:
http://www.b.eaudacio.us/
I used these for icons:
http://icons.mysitemyway.com/category/antique-glowing-copper-orbs-icons/
Looks awesome I think! Thank you very, very much! (too me all day to implement it, but I’m getting better I think…)
Feb 25, 2010 @ 11:04:57
black leather jacket
Hello Very nice the download link is Broken. Have you an alternative? And this was great work.
Mar 01, 2010 @ 07:08:50
stef
Hello, I placed the script on my site but I’ve got a JavaScript error with : $(document).ready
Can someone help ? Thanks !
Mar 01, 2010 @ 15:16:31
AdeL
thanks alot
how can i put the menu in any place in the page not only in the top and bottom ???
Mar 03, 2010 @ 04:27:30
Capsloc
Same as AdeL. I tried editing the CSS to no avail. CSS is not my specialty. Any way to get this to fit in the location i place it?
Thanks!
Mar 04, 2010 @ 03:27:39
turismo china
it’s very usefull,thanks for sharing!
Mar 05, 2010 @ 03:19:27
Radik
Nice work! It perfet job!)))))
Mar 05, 2010 @ 04:14:25
Fernando
Hi…this is a fantastic module. I’m trying to use under a Joomla project. I’m not using all of the itens, just 4 icons on the dock and i’ve positioned on the header but i’ve been looking for an another position, aligned on the right of the header but i couldn’t do it. I’ve tried to do the positioning on CSS but it’s not working.
You guys know how to do it??I supposed that the positioning is determined by jquery but i simply couldn’t understand the code. I’ve just found that is a inline CSS with left atribute.
Anyone can help me please? thanks!!
Mar 07, 2010 @ 16:54:09
Brownie
Hi,
I’ve been using your fabulous Mac style dock, but I don’t know how to get spacing between the icons. It looks awful for now if I don’t get some spaces between the icons I made..
Could you help me please ?
Thank you :)
Brownie
Mar 08, 2010 @ 06:06:38
Dmitry Dulepov
Wow! Really cool effect! I’d love to have that with ExtJS framework too!
Mar 08, 2010 @ 13:49:37
kayseri sohbet
ur a great blog. I have been continuously followed with interest your article
Mar 09, 2010 @ 07:35:33
Aurélio Lima
Your patch don’t worked for me.
Mar 09, 2010 @ 12:07:26
Website Design
that’s really a fantastic post ! added to my favourite blogs list.. I have been reading your blog last couple of weeks and enjoy every bit. Thanks.
Mar 11, 2010 @ 16:16:32
Victor Klaus
Placement of the module is very easy, once you know how to work with layers. Placed 4 menu’s in layers all over the mainpage (the two top menus consist of only one item each). http://www.degeustwins.nl
Success, Victor
Mar 12, 2010 @ 04:13:00
McDonalds
oh, yes, i’m a “big mac” fan!!
Mar 14, 2010 @ 12:53:07
oyun hileleri
thaks for this subject.oyun hileleri
Mar 16, 2010 @ 07:30:11
hiroshi
when the cursor comes close to the CSS dock menu.
It start to enlarge.
But its start point is too far for my website.
I want to start enlargement much closer point.
How can I adjust the distance it start to move between cursor and menu
Mar 16, 2010 @ 09:24:20
虫虫博客2009
博主太有才了 学习了
Mar 18, 2010 @ 06:55:12
San Francisco web design
great tips… thanks a lot for sharing the useful stuff… will let u know of my success after applying these on my own
Mar 18, 2010 @ 16:03:34
mustafa
your reads perfect :D
http://www.hdsinemaizle.com
http://www.mecburumsana.com
http://www.saglik16.com
http://www.lifeinhealth.net
Mar 21, 2010 @ 15:17:40
Nikita Sumeiko
This tutorial really helped me. Very nice and useful tip on creating Mac’s Dock menu.
Thanks a lot and keep working in such a cool way.
Jun 12, 2010 @ 04:37:41
christian louboutin mary jane shoes
Super post.
Mar 24, 2010 @ 01:56:52
Turkey Tours Travel
thank you for usefull information. we can need these codes.
shashot travel
Mar 24, 2010 @ 07:44:42
Nikolaev
I definitely like this menu, but as far as I can see the iTheme doesn’t use it any more. It’s a pity because the menu looks really fascinating and would make the theme stand out from others
Mar 25, 2010 @ 03:52:30
isimiznet forum
Good stuff! Thanks for sharing!
Mar 27, 2010 @ 18:44:07
Chris
Thanks Nice Post
you for usefull information
Mar 28, 2010 @ 07:23:55
SiNCrO Online
This is really cool…
but, can someone please help me?
i’ve been trying to change the background of the dock… i saw other examples where it was transparent and a rainbow, so i’m just curious to see if i could get my css dock like theirs…
Mar 28, 2010 @ 09:45:17
SiNCrO Online
nevermind.. i got it fixed…
but does anyone know why the wibiya bar cant work when this is on my site?
Mar 28, 2010 @ 20:42:40
SiNCrO Online
nevermind, again.
i found that this uses an older verison of “jQuery”, so i just need to update that… lol
thanks, if any1 tried to help anyways…
Mar 29, 2010 @ 04:48:25
格安レンタカー比較
The trick, if there is such a thing, is variety. Make certain you collect a steady and varied collection of links
Apr 01, 2010 @ 10:36:16
Bella
Is there a way to add left and right arrows to make the menu scroll?
I would like to be able to add more icons as needed but I have no clue how to do this since I am not a programmer :(
Apr 04, 2010 @ 05:25:51
website design
This is really awesome……..Keep it up!!
Apr 06, 2010 @ 22:27:57
Baatarchuluun
hello, thank you very very …. much. I’m from Mongolia.
Apr 07, 2010 @ 15:16:11
reseller
thanks for you cool css menus.
Apr 08, 2010 @ 21:44:31
Chicago Web Design
Just think of the custom CMS you could make with something like this! Awesome post author.
Apr 09, 2010 @ 09:12:38
nimedk1
Hi can anyone please tell me the best way to increase the spacing between the icons? margin doesnt work bacause the absolut positioning for the . I ran out of ideas! Anyone?
Apr 16, 2010 @ 05:47:46
Ari
same question here!
I love your dock…. but how can u set more space between the icons??
I’m trying to do this for quite three days now….. and I’m really not sooo new in css…..
help appreciated!
And thank you for sharing this great work!! :-)
Apr 10, 2010 @ 03:14:25
acne clearing
i agree with u. thanks for share it.keep good working
Apr 11, 2010 @ 03:16:42
Canlı Sunum
thank you very very …. much. I’m from Turkey.
Apr 14, 2010 @ 04:38:36
psp games
I will try this way.It’s very co0l.
how you can make it?
Apr 19, 2010 @ 01:49:14
ikinci el network
Okey Thank you for go go go
Apr 19, 2010 @ 04:22:45
mahendra
i have finding a css menu then a show this result i am regular digger on digg i am fined on you on digg thank for sharing . but i have need css menu .
Apr 19, 2010 @ 14:54:14
dreambox 800 HD
I will try this way.It’s very co0l.
how you can make it?
Apr 19, 2010 @ 14:54:38
dreambox 500
thank you very very …. much. I’m from Turkey.
Apr 19, 2010 @ 14:56:09
accessoires iphone
i’ve been trying to change the background of the dock… i saw other examples where it was transparent and a rainbow, so i’m just curious to see if i could get my css dock like theirs…
Apr 21, 2010 @ 11:14:13
Laptop Etiketleri
good! thank you very much admin..
Apr 22, 2010 @ 11:32:34
slimjim
Hi guys, i absolutely love this menu, but i can’t get it to work with the latest jQuery?
Is anyone else experiencing this?
You can see from my site (under construction) that it’s not quite working. If I simply move the include script tag for the interface.js below the jquery.js then it works but subsequently stops anything that’s referencing the jQuery.js
I’m expecting anyone to fix this for me but if you have experienced the same problem i’d love to hear your solution.
Once again, LOVE this menu style.
Apr 22, 2010 @ 11:34:14
slimjim
EDIT!
“I’m NOT expecting”
Apr 24, 2010 @ 00:59:18
Raj Vaghela
excellent work, i want this style menu use some extra ordinary site. thanks i and more this type of extra ordinary menu.
Thanks
Apr 24, 2010 @ 09:01:00
Anil
i appriciate the menu but i have a problem i have 30 buttons how do i auto scroll on mouse over
Apr 27, 2010 @ 11:09:47
Mitch
It’s really very nice work. TKS alot
But I can’t get around two major problems …
1.
the interface script interferes with other jquery.js files and causes malfunction of other jquery depending scripts
2. the bottom dock only stays on the bottom in a “non”scrollable page. The moment a page is longer than the screen and you scroll the page down. the dock would not move with the scroll (meaning it would not stay at the bottom edge of the screen) but would move into the screen and up the screen as you scroll further down.
Cheers
Apr 29, 2010 @ 09:15:14
Rich @ web design leeds
Nice menu, maybe users will be so overwhelmed with the menu they will invest in an apple mac and have far happier lives.
Apr 29, 2010 @ 11:04:51
FrankieFilm
полет фантазии надо срочно остановить, а то улетит незнамо куда и не поймаешь :))
Apr 30, 2010 @ 14:04:09
parisdugunsalonu
thanks for you . add site paris ve berlin düğün salonu.
May 04, 2010 @ 16:38:28
Ricardo
Hello,
I am very thankful for this script, however I have installed a plugin in wordpress where I had this working, and the dock menu stopped from working, the plugin is a page flip plugin, any ideas on this one?
Best Regards
Ricardo
May 05, 2010 @ 02:46:40
peng
very nice thanks 还没中文呢
May 06, 2010 @ 04:47:47
ipad case
i will use this tip for my site. thanks for cool tips.
May 08, 2010 @ 22:00:42
Mitch
I LOVE THIS NEW AGE FREE SUPPRT BLOGS FORUMS FREE BUT VOLUNTEER AND FREE SUPPORT
It’s all super cool as long as you JUST DONT ASK A QUESTION – OK! No-one of these over brainy kids todays will ever understand why you would ask a question anyways, They are SO EXTREME PERFECT AND GOOD! oh- and free
just keep on praising each other you are all so marvelous and exceptional intelligent WOW WOW WOW WOW WOW.
And – there we go – no one asks you to accept this free super fuck-up!
May 12, 2010 @ 14:08:55
Andy
Awesome!! I love it. This will come in handy, thanks! Great job.
May 12, 2010 @ 21:43:57
Devacd
I can get the images to come up however their sliding back and forth is not working….I am sorry about being so vague however if anyone can help me i’d greatly appreciate it!
May 13, 2010 @ 06:59:40
Devacd
nevermind i figured it out. This is great! Thank you
May 14, 2010 @ 07:19:56
Wener
well ~~~i use it to make my blog~~~~thankssssssssssssss~~~~
May 24, 2010 @ 05:32:10
red pepper
nevermind i figured it out. This is great! Thank you
May 14, 2010 @ 12:03:33
porno
Simple and straight tutorial.
May 14, 2010 @ 12:04:40
türbanlı porno
thanks.It’s really very nice work.
May 18, 2010 @ 11:52:04
GuoKai
the css
#dock {
bottom:0;
left:0;
position:absolute;
width:100%;
}
when
#dock {
bottom:0;
left:0;
position:fixed;
width:100%;
}
I want to fixed it at bottom,but it doesn’t work.can you help me?
My Mail :mail@guokai.name
May 18, 2010 @ 16:23:42
Nikki
Hi there, i am trying to make the icons in my dock menu bigger. i have 128×128 px icons and it stays small. how do i manipulate the css to make the icons bigger and the dock menu bigger? Please will you respond and help me as soon as possible. I would really appreciate the help. i am a great fan of this site.
thank you
May 18, 2010 @ 16:28:29
Nikki
i am able to make the icons bigger by changing the width and height of .dock-image-item but then the fish eye effect is not visible, it shifts the icons to the side then. PLEASE help :)
May 22, 2010 @ 05:33:56
web dizayn
Incredible post. Thanks!
May 22, 2010 @ 05:35:57
rüya tabirleri sözlüğü
Great Job! Very nice work.
–
rüya tabirleri sözlüğü
May 22, 2010 @ 05:37:30
kredi hesaplama
This is exactly what I was searching for. Thanks.
Kredi Hesaplama
May 22, 2010 @ 05:59:24
Alex
Just though you might be interested to know – I’ve created my own plugin for jQuery creating the same effect, but not requiring the fish-eye plugin…. It can also be used to animate a single icon anywhere on the page.
http://roslindesign.com/blog/2010/05/21/create-a-apple-style-dock-bar-with-jquery-using-the-resize-on-approach-plugin/
May 23, 2010 @ 01:05:05
telmo
Gracias… esta espectacular…
May 25, 2010 @ 08:37:22
Medyumlar
Gracias… esta espectacular…
May 27, 2010 @ 21:28:03
Hoque Md.Nazmul
Implemented docking style in one of pages in
http://nazmulweb.com/news/
May 28, 2010 @ 20:23:12
jacklisea
thks, i study now.is very useful for me.
Jun 01, 2010 @ 01:48:37
laptop tamiri
hi this is just a test
Jun 01, 2010 @ 01:49:12
laptop tamiri
Gracias… esta espectacular…
Jun 03, 2010 @ 03:25:28
baby toys
Apple css dock is very simple and perfect, and I downloaded, the icon will replace the windows would be very cool
Jun 28, 2010 @ 22:27:14
anonymous
the icon will replace the windows,
the DOS will replace the icons,
time is like that.
Jun 03, 2010 @ 16:43:24
hmmmm
no go on wordpress…. :(
Jun 03, 2010 @ 16:45:01
hmmmm
Nice update::::::> “Update: I no longer support the questons regard this dock menu.
Anyone have a clue how to get this working on wordpress???
Jun 04, 2010 @ 15:02:31
adrienne
this code isn’t working for me.
i’m doing a we design final next week and i would really like to use this menu.
PLEASE HELP!
and if any one has any ideas for a web page, any comments would be great! email them to me.
adriennedziemieszko@live.com
Jun 10, 2010 @ 02:06:47
karsono
I would like to take this menu in my free template, please let me do it, thank you.
Jun 11, 2010 @ 16:02:28
Bebek isimleri
Bebek isimleri anne bebek hakkında herşey :)
Jun 12, 2010 @ 08:22:42
katalog tasarımı
nice sharing.. thank you for post..
Jun 14, 2010 @ 01:26:13
M.Azeem BAig
“MashaALLAH” , may ALLAH gives happiness & much success to those people who share the knowledge, in both side in the world & also after the world.
Jun 14, 2010 @ 02:40:39
Matbaa
thanks.It’s really very nice work.
Jun 15, 2010 @ 15:41:36
Kişisel Blog
I agree with you, good luck.thanks
Jun 17, 2010 @ 04:42:23
Alex
Thanks for you cool css menus.
I’m using css-dock-bottom but I want position the “” under the images.
Can I?
Jun 17, 2010 @ 07:16:54
Alex
Thanks for you cool css menus.
I’m using css-dock-bottom but I want position the “span” under the images.
Can I?
Jun 17, 2010 @ 11:11:26
Alan
I got this working on a HTML page. But does any one know how i can make it work on a SharePoint “default.aspx” page?
Jun 18, 2010 @ 06:04:56
suvosaha
Thanks for very wonderful creation. It’s one of the coolest menu i have ever seen.
Jun 20, 2010 @ 12:08:47
devilngod
hi thanks for this cool plug in can any please tell me how can i increase space in between images. Thanks
Jun 22, 2010 @ 09:40:52
kkpo
k,pokp
Jun 22, 2010 @ 19:05:59
Kampanya
thanks.great post.we love you
Jun 25, 2010 @ 14:36:36
Games Ptec
Hi!
Is it working to blogs?
Can you send to my e-mail how to do it?
If its possible send it in portuguese please.
/***tanks***\
Jun 28, 2010 @ 22:23:30
anonymous
would you like fries with that?
Jun 27, 2010 @ 05:02:17
bilgi yarışması
really good post Thank you
Jun 29, 2010 @ 14:35:53
lockerz
very good post. thank you.
Jun 29, 2010 @ 14:36:49
Büşra Pekin
very good post. thank you. very good.
Jun 30, 2010 @ 02:42:10
Kapil
first of all sorry for my english .
hai very nice example of the dock . i am using it for my new project but i need help in little bug fixing of the dock used at the template can be accessed at :-
http://testing.ornatelogics.com/hecards/alpha/
I need to insert the margin between the dock items .
Jul 03, 2010 @ 12:16:24
John
First set
.dock-item img {
border: none;
margin: 0 5px 10px 0px;
width: 50px;
}
width from auto to some value (50px) and then
$(‘#dock’).Fisheye(
{
maxWidth: 30,
items: ‘a’,
itemsText: ‘span’,
container: ‘.dock-container’,
itemWidth: 70,
proximity: 40,
halign : ‘center’
}
)
set itemWidth to some value form item distance
it worked for me
Jul 03, 2010 @ 11:57:54
John
Hello there, very nice script. I was wondering if there is a way to expand icons top & bottom, not just top or bottom
Thanks
Jul 04, 2010 @ 09:31:43
Lawyer Emloyments
yes, i am enjoying the wonderful conposition
Jul 05, 2010 @ 09:50:49
red pepper
Thanks for css menu. very good
Jul 06, 2010 @ 14:30:59
Web Tasarımı
Css dock menu is very nice. Thanks for the web design tools.
Jul 07, 2010 @ 05:14:39
Filmdizi
Your site is very nice touches on a beautiful subject
Jul 08, 2010 @ 12:04:30
tacirler nakliyat
Thanks for css menu. very good
Jul 10, 2010 @ 09:19:17
Naida Nely
thank you sharing… Good job ;)
Jul 10, 2010 @ 09:20:50
gogus
Bitkisel Göğüs Büyütücü
Jul 11, 2010 @ 13:13:25
Kabataş
Thank you share… Great post…
Jul 11, 2010 @ 13:26:30
ucuz web tasarım
Hi, Thanks for you cool css menus.
very good post.
Jul 13, 2010 @ 12:20:37
notebook tamir
thanks for sharing thanks for sharing
Jul 15, 2010 @ 06:02:38
Raghuraman
I made use of this beautiful mac-like dock in my application. Initially, I tried to place the dock fixed at the bottom of the page. But, the dock behaved anomalously in IE(always at top) as anticipated. Hence, I made use of a fixed position jQuery plug-in in order to achieve this functionality. The fisheye works fine when the page is scrolled down to the maximum extent, otherwise the fisheye doesn’t work. Even I applied the fisheye patch but it was futile. Any insights on how to accomplish this?
Jul 17, 2010 @ 02:59:00
Freek
I’m sorry quys, but I tried this on my website and it didn’t work. First I had to fix a couple of positioning problems in the codes, because it didn’t stick under your screen after scrolling…. To make my story shorter, I have the dock on my website now, but the rollover effect is now turned of, because that caused a lot of problems… this dock is better and more mac: http://www.zurb.com/playground/osx-dock
Jul 20, 2010 @ 17:40:33
Евгений
А я давно сделал это на своем сайте
Jul 20, 2010 @ 20:00:43
Arnoldo Blanco
I have a problem, adding an OnClick event not work for me, as I can make this work I
Jul 21, 2010 @ 17:01:57
kralbiziz
Thanks!
Very good..Thanks for post..
Jul 23, 2010 @ 18:34:07
aiva
Definitely good information (a given considering the source). Thanks for the post!
Jul 24, 2010 @ 17:03:03
Tuna
thanks for share …
Jul 24, 2010 @ 19:14:47
ali
thanks you Very good..Thanks for post
Jul 25, 2010 @ 00:49:50
toyochisami
thanks you Very good:)
free download satellite tv
Jul 26, 2010 @ 10:22:35
saat
thanks you Very good..Thanks for post
Jul 26, 2010 @ 15:29:12
sanal şirket
thats great post.. thanks for all sahirng
Jul 27, 2010 @ 04:55:41
Rengarenk
Thanks!
Very good..Thanks for post..
Jul 27, 2010 @ 07:34:25
göğüs büyütücü
The fisheye works fine when the page is scrolled down to the maximum extent, otherwise the fisheye doesn’t work. Even I applied the fisheye patch but it was futile. Any insights on how to accomplish this?
Jul 28, 2010 @ 10:49:57
Thomas
Thanks, that is very nice. I like it very much!
Jul 28, 2010 @ 14:26:40
Mandvika
I want to put this menu on my site but I want the labels to be there with the image when the page loads. I don’t want it come when I hover over it. On hovering only the image should become bigger. Can you suggest how this can be achieved?
Jul 31, 2010 @ 03:04:30
Tahsin Hasan
Hello,
everyone see new boxy menu on tahSin’s gaRAge. Thanks.
Aug 05, 2010 @ 11:18:47
fbml kodları
I want to put this menu on my site but I want the labels to be there with the image when the page loads. I don’t want it come when I hover over it. On hovering only the image should become bigger. Can you suggest how this can be achieved?
Aug 10, 2010 @ 22:08:11
xmencute
hi, can you help me!! My dock menu is not run in UpdatePanel (ASP.Net). When i press the button to refesh information in UpdatePanel , CSS for dock item is not run again, can you tell me why and what must i do to solve this prolem, thank you very much!!
Aug 12, 2010 @ 14:02:41
sikiş
thanx for admin. thanx for all..
Aug 16, 2010 @ 11:46:14
hayata dair
great post, thank you for info..
Aug 17, 2010 @ 05:24:18
filmadasi
Hello, good job this dock is very nice.
Sep 11, 2010 @ 22:23:57
kirsche
ciao, first of all -> sorry for my english.
i need a little bit help:
i want use your wonderful css dock menue and at the same site the roundabout-shape in a gallery.
(http://fredhq.com/projects/roundabout-shapes/).
but it doesn’t really work together, it seems to block each other.
when i take the css dock & js files out in an seperate file like this:
,
and
the css dock menue works & the gallery not.
when i delete line 289 in the roundabout.js
else {newBearing = jQuery.easing[thisEasingType]((timer / passedData.totalTime), timer, passedData.start, bearing – passedData.start, passedData.totalTime);
the gallery reacts to “click” & shows the next picture but the smooth jquery rotation is off.
unfortunately i can’t display my example…..
maybe you can help me – i look forward to any response.
kind regards and, in advance thanks for your efforts.
Sep 30, 2010 @ 04:22:39
Tahsin Hasan
Hello,
See the boxy tabs on tahsin’s garage.
Oct 02, 2010 @ 15:04:44
Eduard Weber
Another nice one: http://mannheim-design.de/javascript-dock-fisheye-menue/
Oct 08, 2010 @ 10:02:56
Hiren Khambhayta
Its really nice. Would use if one of my project. I had got the idea of such kind of buttons from this and have implemented on my website Swastik Solutions
Oct 15, 2010 @ 23:20:07
Sanjay Arya
I like it …thanks for sharing..
Oct 16, 2010 @ 19:30:57
Rhonda B
Wow, this is really neat! I am going to save this for later. Thanks!
Oct 19, 2010 @ 16:38:53
Ryan
This is one of the coolest looking scripts I have seen. I’m not a MAC guy, but I do love the MAC dock and this is a great representation of it.
Dec 14, 2010 @ 06:32:06
Roland
Hi! How can I get it worked in IE9 with Right To Left direction (direction:rtl)? Please help.
Feb 23, 2011 @ 15:53:48
Website Design Washington DC
I dont think this is working on IE6. However I think I may use this for my admin panel for my website. Thanks form DC
Mar 02, 2011 @ 22:41:14
Syed Haider Hassan
Hello i want to is there any way to use the css dock without id or some way to have multiple docks with same id name
e-g in your demo is
and
so dock and dock2 both are different.. well will it be possible to have same id name..
i dont need different sizes or different anything for different docks.. i want to use same attributes for all docks..
how to make it possible.??
Kind Regards
Haider
Mar 15, 2011 @ 10:25:42
Viviana
Hi First of all: thanks I need help Could be possible to have different size for the items? I would like to change the size of some items
thanks
Apr 21, 2011 @ 03:44:18
duke
Are there any way to use this with prototype noConflict….is there a interface.js adapted to this?
Apr 21, 2011 @ 03:45:09
duke
e.g jquery noConflict
jQuery.noConflict();
Apr 21, 2011 @ 04:28:51
duke
nevermind…got it working by just replacing “$” in interface script…thougth that wouldnt work. Thanks for nice script )
May 04, 2011 @ 07:15:50
Duke
No…it doesnt work in explorer. anyone got an idea about runnig this along prototype?
Sep 13, 2011 @ 06:05:59
Cyber4rt Crew
do you have embed the last part of the PNG hack for IE ?
Sep 11, 2011 @ 08:56:58
Fred - A dumb web designer
I can’t believe that something that looks so sophisticated can be implemented so simply – even I can follow it! jQuery really is a gift for all us web designers who are fluent in CSS but real dumb when it comes to the real nitty gritty of writing sophisticated code. Thanks for the post and I can’t wait for the opportunity of using the information.
Jan 23, 2012 @ 10:26:53
Karl
Thanks for the nice Dock Menu – ever since Apple introduced the Dock Menu with OSX, everybody has tried to copy the design of their ingenious creation.
For me, this is one of the best Dock Menu scripts that I have seen online, and since it’s Javascript it can run on devices with no Flash player.
I am a little annoyed with Flash, as I previously bought this Dock Menu, http://www.flashxml.net/dock-menu.html but I was sad to have to change it after receiving more than a couple of e-mails from my visitors, which entered the site from their phones or tablets, and they had no Flash player.
This menu is perfect and works even on low-class smartphones. To bad of the Dock Menu from flash xml as it really looked a bit better.
Jan 25, 2012 @ 08:43:11
rob
Very nice menu, thank you.
The only downside is that it can not be customized very easy. For that you have to modify the code and I’m a newbie when it comes about programming. I found here: http://www.flashxml.net/dock-menu.html a Flash dock menu. It doesn’t work on Apple devices like iPhone but it’s very customizable through xml files.