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.

Visit PhpDaddy.com

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

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