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 3rd, 2008 at 6:27 am
This is amazing…..Great job!!!
thanks for this wonderful css dock menu
But how to make it work on firefox 3.
Thanks,
Cody
July 30th, 2008 at 2:34 pm
Phil, try removing the margin-top on your .dock class. Seems to work after that.
July 27th, 2008 at 10:53 am
Hi there,
I’m having an issue with the placement of the i guess:
When the site loads, the mousover does not work it is somehow working about the images but not exactely on the images.
Can anyone tell me why or is anyone experiencing the same issues?
http://www.afera-fashion.de
Thanks,
PHIL
July 26th, 2008 at 12:42 am
hi, this is Great ,but when i use it in a Page with (dir=”rtl”) it seems a little fuzzy. how can i fix it?
plz email me….
Tnx anyway
July 25th, 2008 at 4:26 pm
Can I use this on my website with the images?
This dock is awesome by the way!
July 25th, 2008 at 7:41 am
hello, nice menu …but hey there are problems whn i’m trying to put together this part of code and the code for lightbox (2).
None of there are working …
I’ve also tested jquery.lightbox-0.5 but …. other errors break out :(
Any ideea ?
July 24th, 2008 at 3:33 am
This does seem to contain several incompatibility problems; such as inclusion of prototype.js og jquery.js.
July 23rd, 2008 at 9:47 am
this is some good shit!
July 19th, 2008 at 12:37 am
wow, the best fisheye implementation i ever see, good work.
I will use jQuery because of this :)
July 16th, 2008 at 5:06 am
Can anyone enlighten me how I can go about using keyboard arrow buttons to navigate left and right through the menu? Thx..=)