Next Prev

Css Dock Menu

If you are a big Mac fan, you will love this CSS dock menu. 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.

Web 2.0 Box Generator

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="http://www.ajaxdaddy.com/web20/jquery/css-dock-menu/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Dock Menu</title>
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/interface.js"></script>

<link href="css/cssdockmenu.css" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
 <style type="text/css">
 .dock img { behavior: url(css/iepngfix.htc) }
 </style>
<![endif]-->

</head>
<body>
<!--top dock -->
<div class="dock" id="dock">
  <div class="dock-container">
	  <a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a> 
	  <a class="dock-item" href="#"><img src="images/email.png" alt="contact" /><span>Contact</span></a> 
	  <a class="dock-item" href="#"><img src="images/portfolio.png" alt="portfolio" /><span>Portfolio</span></a> 
	  <a class="dock-item" href="#"><img src="images/music.png" alt="music" /><span>Music</span></a> 
	  <a class="dock-item" href="#"><img src="images/video.png" alt="video" /><span>Video</span></a> 
	  <a class="dock-item" href="#"><img src="images/history.png" alt="history" /><span>History</span></a> 
	  <a class="dock-item" href="#"><img src="images/calendar.png" alt="calendar" /><span>Calendar</span></a> 
	  <a class="dock-item" href="#"><img src="images/rss.png" alt="rss" /><span>RSS</span></a>
	  <a class="dock-item" href="#"><img src="images/rss.png" alt="rss" /><span>RSS</span></a> 
	  <a class="dock-item" href="#"><img src="images/rss2.png" alt="rss" /><span>RSS2</span></a>
  </div> 
</div>



<!--dock menu JS options -->
<script type="text/javascript">
	
	$(document).ready(
		function()
		{
			$('#dock').Fisheye(
				{
					maxWidth: 50,
					items: 'a',
					itemsText: 'span',
					container: '.dock-container',
					itemWidth: 40,
					proximity: 90,
					halign : 'center'
				}
			)
			$('#dock2').Fisheye(
				{
					maxWidth: 60,
					items: 'a',
					itemsText: 'span',
					container: '.dock-container2',
					itemWidth: 40,
					proximity: 80,
					alignment : 'left',
					valign: 'bottom',
					halign : 'center'
				}
			)
		}
	);

</script>
</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Comment on this example

Santosh Shelke

2009-12-09 05:25:13

Superb Boss........

Viresh Rajput

2009-12-03 23:22:32

Veru Nice Thanks For Shairing,Can I Download the java script file

Noel

2009-06-11 01:49:17

Really amazing, breath taking... very nice.. thanks

Indra

2009-05-07 23:00:34

Hey, really nice work, amazing. I am wondering if someone can help me on this... what if I have a lot of menu buttons e.g. 25 of them. Would it be possible to have a scroller too? So that it will only view maybe 7 of them in the window, but you can scroll left or right to view more buttons?

Pepp

2009-03-18 03:49:56

superb !!!

Ipsg007

2009-03-10 09:10:43

woww. thats amazing.. i am becoming ajaxdaddy's fan.. the website is simply amazing..

Zahid

2009-02-09 12:03:58

Hi Guys, This is fantastic. I have a questions "How can I make the menu items enlarge to the top rather than down?". Thanks

Rou Stilliard

2008-12-11 13:28:12

WOW, fantastic scipt, found it very usefull, thanks!

Costudio

2008-11-12 11:07:04

really nice work

Mackie

2008-11-06 07:36:43

Wow esta espectacular, gracias! :D

Nono

2008-10-16 01:09:27

hello, You have a little problem with your png in IE6 if you want you have a script in google. But It's very good job and i think use it for my website

Sinteniki

2008-10-09 02:02:49

thanks for info ..great application

Pulakchetia2007@gmail.com

2008-09-21 23:31:18

without jquery.js,interface.js ,cssdockmenu.css how it will work.will you please sent them

Stewart

2008-09-15 23:57:00

If you wrote this originaly, then I owe you a big thanks as we have implemented it on our website - www.ginkgostudios.com and it has worked brilliantly - Thanks!

Techniqueal T.

2008-09-02 09:15:14

wow, this is a fantastic script! absolutely love it! =)

Manny

2008-07-28 19:29:39

Dude you rock!

2008-07-25 06:11:44

Where is this image set from, are there any additional icons?

XENUPS

2008-07-23 12:52:47

can u tell us how u magnify the items? plz give us java source TNX a lot ;D

Loco

2008-07-06 02:52:59

ive tried on Firefox 3 and it seems that i cant open up the link from the dock menu.. FF2 have no issues? anyone of u have this prob?

Rosduz

2008-06-09 09:55:27

I can not put this in my template. Please where is the right place and what I am doing wrong?

Therock

2008-05-24 02:46:53

its really a wonderfull work.i appreciate your work.

Siddharth

2008-05-22 05:17:51

Very nice script

2008-05-18 17:22:38

By far the best JavaScript Dock I've seen. Doesn't jitter about and is very smooth. Congrats.

Deepak

2008-02-29 22:38:04

The Script Works well. But I think the script can also reduced a bit

Emubbo

2008-02-26 00:02:58

Perfect!!!!!

Nick

2008-02-19 19:29:55

Wow Great Script. I love it. I am a Mac fan. I think that will be great for me to implement into my CMSystem.

Roger

2008-02-10 14:02:56

Awesome! but when view with Safari, I can see nothing on browser... and I tried to click go back to previous page, and then go to next, it shows up! but if I refresh the page, it disappear...

Femy

2008-01-24 18:54:32

Good work

Ilcorsaronero

2007-12-23 11:19:21

Very good

Robbile Joy

2007-11-02 00:50:31

Can you share then main code with us?

Wushanxu

2007-10-28 23:49:08

very very cool

Marko Novak

2007-10-01 22:58:16

Very nice menu. Does it validate?

Lokimikoj

2007-09-22 19:50:31

Hi Hi, man! Your site is cool!

Steve

2007-09-20 00:45:09

Looks Great!! How can you put 2 of these on the same page? I'm having problems with that. Plus how do you change the color of the mouse over text?? thx! s>

Loco

2007-09-12 04:22:17

still got a problem when using ie6. the png still not rendering correctly. anyone have any idea how to fix this?

Likopinko

2007-09-11 17:13:30

Hi I found your site very informative and helpful, thank you. G'night

Sopitikoj

2007-09-09 02:43:55

Hi all! Thanks for the ifnormation you provide. It's great to see an agency site with usefull information. The site is not bad either. Bye

Kiran B.V.

2007-09-03 07:23:33

Very Good work never. expected this logic..

Kiran B.V.

2007-09-03 07:23:31

Very Good work never expected this logic..

Graham

2007-09-02 05:14:19

This is the best fisheye example on the site. Nicer graphics anyway.

DGyaBoy

2007-07-22 09:40:59

Holy Shit. Realy good work. Your a real pro. This site i great.

Jamie

2007-07-17 00:12:06

can we embed this sample on flash

Govokinolij

2007-07-13 07:43:34

Hi Looks good! Very useful, good stuff. Good resources here. Thanks much! G'night

Tredinertok

2007-07-11 14:32:27

Hi all! Very interesting information! Thanks! G'night

Nageshwar Rao

2007-07-05 14:41:45

Unbelievable........ It's realy Great work

Pradeep Pappu

2007-07-02 11:56:51

great work.........

Asghar

2007-06-30 06:56:18

hello thank you for your best website have a nice day

Treant

2007-06-25 00:38:24

i tried to put this script and your glider script in same page, but i got error :S dock menu does not work :S

Alex

2007-06-22 12:13:33

its a little bit buggy: after a right click on an image, it won't scale down but nice so far!

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Css Dock Menu

If you are a big Mac fan, you will love this CSS dock menu. 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.

Comment on this example