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).
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 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 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 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 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 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 7th, 2007 at 4:26 pm
I can place this cod in my site? this cod is free?
August 1st, 2007 at 12:12 am
Can apple sue that dock menu?
July 30th, 2007 at 3:45 pm
Hi
Thank You This Good Jobs
Cool Menu
July 29th, 2007 at 7:15 am
Hi,
how can i resize the length of the menu?
Thanks!