CSS Dock Menu
May 08, 2007 117 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 6:31 am
Sergio Marin
Hello, good job this dock is very nice.
But i want to use this dock in the bottom of one site, but when i use the scrool the dock dont move…its in the same place where he start.
i chance the css, but the zone of mouse hover dont move only the images
Dec 17, 2009 8:59 pm
Denis Michaud
Hi, if you find a solution, can you tell me please?
I have the save problem.
dmichaud80@hotmail.com
Dec 18, 2009 3:46 pm
Denis Michaud
Try this, it worked for me :
form
{
min-height:92%;
}
Dec 23, 2009 10:02 pm
Peter
Google page speed seems to hate the dock menu, mainly because you size a 128 x 128 image as a 60 x 60 image and you don’t specify width and height in html.
Anyway around this?
Jan 11, 2010 4:51 pm
Denis Michaud
You can see the result here : http://www.religion.qc.ca/bouddhisme/bouddhisme.aspx .
Dec 09, 2009 6:38 am
Sergio Marin
you can see the example here:
http://www.kontenedor.com/prototipos/sergio/index2.html
Jan 30, 2010 3:27 am
alex
try this
http://www.dynamicdrive.com/dynamicindex17/ajaxincludes.htm
Description: This script uses Ajax (DHTML interacting with the server) to let you dynamically include the contents of an external page onto the current document. It’s similar in function to our Iframe SSI script, though uses no frames, obviously. :)
worked just fine for me!
Dec 09, 2009 10:26 am
Michael Behrens
Hi, i’m having some problems with CSS Dock menu in IE. its works great in Firefox but all the images display on the right and are really small. the fisheye is also wrong… does anyone have a fix for this?
Dec 10, 2009 8:21 pm
Mr Đại
Wow !….Thank you for sharing it ! Very nice …
Jan 19, 2010 10:24 am
kwl
yes,i am enjoying the wonderful conposition .from China.
Dec 18, 2009 11:20 am
Web Tasarımı
I still find Drupal templates sites are lagging behind the number of Joomla template sites. The more templates available free or otherwise will help the popularity of Drupal.
Dec 18, 2009 3:37 pm
iman&maroc
svp, j’ai testé sous IE8, mais àa l’air ne fonctionne pas,
Dec 20, 2009 11:48 am
zabery
good!!!,it’s very strong ,javascript is also very strong
Jan 13, 2010 1:05 pm
Denis Michaud
Il fonctionne très bien sous IE8. Vérifie que ton fichier JavaScript et ton CSS sont bien en place.
Dec 21, 2009 2:03 am
shuvro
let me try to my site. it’s awesome.
Dec 23, 2009 11:47 am
Web Tasarımı
I still find Drupal templates sites are lagging behind the number of Joomla template sites. The more templates available free or otherwise will help the popularity of Drupal
Dec 24, 2009 12:24 am
Peter
Google page speed seems to hate the dock menu, mainly because you size a 128 x 128 image as a 60 x 60 image and you don’t specify width and height in html.
Anyway around this?
Dec 25, 2009 2:13 am
webb
Simple and straight tutorial.
Dec 25, 2009 2:22 am
Hayden
can anyone help me? I can;t figure out how to get a background on this! i have tried inserting bgcolor in certain spots but nothing! please help!
Dec 25, 2009 6:22 am
Saif
Thanks for the sharing
Dec 25, 2009 11:56 am
Ooty
Thanks for sharing, i will try on my web site
Dec 25, 2009 1:53 pm
SmarterTech
I want to use a vertical menu instead of the horizontal one shared here.
Can anyone help me…
Dec 25, 2009 10:57 pm
video75
Thank you for sharing it ! Very nice
Dec 26, 2009 10:35 am
ekonomi
I have been wondering about the question of selling the ebook or just giving it away. thanks
Dec 26, 2009 11:00 am
Teknoloji-Saglık-Cinsel
I can’t wait to get my hands on that report! Thanks Brian!
Dec 26, 2009 11:19 am
Dinle
Thanks for writing
Danke shön
Dec 26, 2009 11:22 am
Film Seyret
let me try to my site. it’s awesome.
Dec 26, 2009 11:35 am
Yemek Tarifleri
Thanks, have never seen this article before. Very useful. Regards Khalid.
Dec 26, 2009 12:03 pm
Türk Porno
Nice features, some a bit overexposed already, but nontheless nice ones.
Dec 26, 2009 12:25 pm
Okey Tavla Batak
Very Good Thanks ı love you ndesign-studio.com
Dec 26, 2009 12:53 pm
mp3
you are exactly right brother i love you
Dec 26, 2009 12:53 pm
dau
i will use these informations on my design
Dec 26, 2009 1:57 pm
sağlık yaşam
can’t wait to get my hands on that report! Thanks Brian!
Dec 26, 2009 5:32 pm
Surf Is My Life
thanks everyone. ı use css my design
Dec 28, 2009 5:34 pm
tel çit
thanks for alot for information
Dec 30, 2009 4:50 am
招聘
thanks for alot for information
Dec 30, 2009 11:05 pm
sikiş
Thank you from css menu, very very menus please :)
Dec 31, 2009 12:06 am
Firma Rehberi
Thank you very very much nice work,
Dec 31, 2009 5:54 pm
StyLe
Very nice:)) thanks.. ndesign-studio
Jan 04, 2010 8:21 pm
Loaden
With this patch the Fisheye works after scrolling while it’s fixed positioned:
http://www.monkey-business.biz/181/jquery-interfaces-fisheye-position-fixed-patch/
Jan 23, 2010 10:39 am
lee
Doesn’t work in IE for me. In Safari it does.
Feb 12, 2010 3:43 am
Loaden
I fixed the plugin also for IE now. Try it. It works. :)
Feb 18, 2010 8:57 am
Dusso
Thank you! Your patch saved me daays of work =)
Jan 04, 2010 8:30 pm
romacron
Thats really nice and it has a good functionality
Jan 05, 2010 5:04 pm
sohbet
good! thank you very much admin..
Jan 06, 2010 1:09 pm
Bsten
Great!! :)
How to use it on two or more rows?
Jan 06, 2010 9:39 pm
Gunner Doyle
This is fantastic. I have been able to implement in a regular website using css, but have yet to be able to implement into my wordpress theme. Has anyone been able to add this to wordpress theme? If so, could you lend a hand?
Jan 07, 2010 4:16 am
外汇
Thats really nice and it has a good functionality
Jan 07, 2010 1:56 pm
Lolly
awesome love it!!!
Got it to work with ease, brilliant!
Jan 10, 2010 2:14 pm
hmtal
Interesting post thanks – best male enhancement products
Jan 11, 2010 4:22 pm
Eric Di Bari
I don’t know if I see have a way to include this in my site, but I wish I did.
Jan 15, 2010 1:25 pm
Paul
See this site, where our friend just copied and added some icons: http://interface.eyecon.ro
Jan 17, 2010 7:19 am
Star Config web design sydney
Thank you for showing us how to do it css dock menu, it is really good article, especially i like it becouse you showed all coding here in this article, so it is going to make it easire wehn we design it. Well done.
Jan 17, 2010 9:33 am
Argent Facile
Merci ! c’est excellent !
Je vais le mettre sur mon site : http://www.gagner-economiser.com
;)
Jan 18, 2010 5:28 pm
graphic design colleges online
Very cool web freebie I love this css dock menu!
Jan 18, 2010 8:54 pm
picture scanner
Thanks heaps for this! This CSS Dock menu is simply the best, at least for me, among the menu effects out there. Again, thanks a lot!
Jan 18, 2010 9:16 pm
purple comforter set
Yeah, whether your a Mac fan or not, this CSS Dock Menu definitely rocks. Now, how do I add this into a wordpress site?
Jan 21, 2010 5:49 pm
lee
I might be a simpleton, but how can i allign to images on the left and right side of the dock? Can’t seem to get it working… Anyone got a solution?
Jan 23, 2010 10:20 am
likbez
Thank! I liked the menu very much!!!
max-pix
Jan 25, 2010 1:38 pm
D Bhana
Dear ndesign-studio,
Could I please have your permission to use the CSS Dock Menu for my school project.
Kind regards,
D. Bhana
p.s. This will be used for non-profit purposes
Jan 29, 2010 5:06 pm
Per
Fantastic! Much appreciated.. great page.
Jan 31, 2010 3:47 am
Alex
Super DOCK!!! works perfectly on my site :D
CSS-DOCK preview–> http://www.pcgames.ucoz.com
Jan 31, 2010 9:23 am
webmaestro
So cool. I love it ! Thank you.
Jan 31, 2010 10:56 am
community classsifieds
Superb designs. Truly a masterpiece.
Sure a lot of intelligent brain behind this,
Thanks a million.
Regards,
Sean Preton
Feb 01, 2010 8:31 am
Hotte
Heyho, thanks a lot! I luv this script! Go on and I hope you´ll have much fun by working on websites :D
Feb 02, 2010 4:48 am
toddlers car seat safety guide
Great Job.!
Thank you vey much
Feb 02, 2010 9:38 am
Milind
Really great work !!!
Thank you
Feb 03, 2010 7:12 am
astuce
merci pour cette astuce! moi qui suis fan de mac, c’est très sympa comme truc :-)
Feb 03, 2010 1:23 pm
Luciano
You can see the result here :
http://www.lucianomarcio.oi.com.br/indexinicial.html
Feb 03, 2010 5:43 pm
isimiznet
yes,i am enjoying the wonderful conposition .
Feb 04, 2010 12:02 am
Alec
great sharing just installed on my forum :)
http://thecashchat.com/forum/index.php
Feb 04, 2010 2:00 am
tamil
Thanks for sharing. keep it up.
Feb 04, 2010 2:01 am
tamil
Thanks for sharing. Keep on going
Feb 04, 2010 2:06 am
tamil
Thanks for sharing. Nice work.
Feb 04, 2010 3:13 am
Mesothelioma
Thanks for sharing. keep it up.
Feb 06, 2010 9:42 pm
Zerred
,. how can i make the dock always on top?, like a navigation? please help,.
Feb 06, 2010 9:52 pm
Zerred
,uhmm,.? can somebody help????
Feb 08, 2010 12:00 pm
pratik agrawal
your dock is really awesome….
nice thinking..
Feb 09, 2010 9:07 am
vpsbul
Thanks for sharing. keep it up.
Feb 09, 2010 11:29 am
435BruxutsNast
Per dimagrire
para adelgazar
Pour Maigrir
Feb 10, 2010 12:25 am
Bharati
Very Nice………………..
Gud Bloggggggg
Feb 11, 2010 8:02 am
kobiler
uu thanks very nice blogg ….
Feb 11, 2010 8:04 am
Firmalar Rehberi
Great Job.!
Thank you vey much :)
Feb 11, 2010 8:06 am
bilgisayar firmaları
Great Job.!
Thank you vey much
this is perfect bussines directory
Feb 12, 2010 1:14 pm
it050115
wow! May I use it as my windows7 desktop/theme instead?
Feb 13, 2010 4:07 pm
Java developer
Big thanks. Really great stuff
Feb 14, 2010 8:51 am
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 pm
hanip
hi, please update link for download css-dock-menu.zip!!! file not found…
Feb 14, 2010 12:54 pm
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 pm
Michael
Here is a new download link:
http://rapidshare.com/files/350596785/dock.zip.html
Feb 15, 2010 5:42 pm
Bernd
Download limit has been reached…:(
Feb 16, 2010 9:13 am
Miele Servisi
Bosch Servisi
Feb 15, 2010 5:34 am
web optimizasyon
web optimizasyon konularında bilgi ve destek alabilirsiniz
Feb 15, 2010 5:35 am
Firma Rehberi
Firma rehberi turkiye genelindeki bir çok firma bilgisi ve ürün hizmetlerinin yaynlandığı firma rehberi sitesidir.
Feb 16, 2010 9:11 am
Miele Servisi
Miele Servisi , Tamiri ve Bakım Hizmetleri
Feb 16, 2010 11:28 am
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 pm
Lau
the link is broken :(
can’t you fix it please?
Feb 16, 2010 12:33 pm
Victor Klaus
here comes the link again:
http://www.degeustwins.nl
bye
Feb 16, 2010 7:49 pm
sven
Hello,
the download link is Broken. Have you an alternative? And this was great work. Very nice
Feb 17, 2010 9:11 am
Nick La
The download link is fixed. Thanks.
Feb 17, 2010 9:44 am
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 am
Structured Settlements
Nice Collection Thanks for share…
Feb 20, 2010 1:10 pm
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 am
marc
Good stuff! Thanks for sharing!
Feb 23, 2010 12:50 am
XHTML TEAM
Great collection. Thanks for sharing…
Feb 25, 2010 11:04 am
black leather jacket
Hello Very nice the download link is Broken. Have you an alternative? And this was great work.
Mar 01, 2010 7:08 am
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 3:16 pm
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 4:27 am
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 3:27 am
turismo china
it’s very usefull,thanks for sharing!
Mar 05, 2010 3:19 am
Radik
Nice work! It perfet job!)))))
Mar 05, 2010 4:14 am
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 4:54 pm
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 6:06 am
Dmitry Dulepov
Wow! Really cool effect! I’d love to have that with ExtJS framework too!
Mar 08, 2010 1:49 pm
kayseri sohbet
ur a great blog. I have been continuously followed with interest your article
Mar 09, 2010 7:35 am
Aurélio Lima
Your patch don’t worked for me.
Mar 09, 2010 12:07 pm
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.