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).
September 3rd, 2009 at 5:41 pm
I’ve tried everything, but I can’t get the block to be FIXED to the bottom of the screen. I.e. If the page has enough text to scroll, the icons don’t stick to the bottom when you scroll. I got as far as setting
#dock2’s position to fixed, which sorta did the trick, but then when you scroll down, the fisheye effect no longer works. But, if you scroll over the original location, the effect does works.
This leads me to believe that the location of #dock2 doesnt get recalculated each time.
Please help!
September 1st, 2009 at 3:55 am
what a wonderful menu! I like it thanks!
August 27th, 2009 at 1:03 pm
Hi, I discovered your css dock through net.tuts and I used it for my website www.cluzeauwebdesign.com, thanks a lot for this one.
August 21st, 2009 at 9:55 am
cool. i would love to implement it! great job! keep up the good work.
August 19th, 2009 at 5:33 am
Wonderful!Nick. This is very nice. I would like to use it for the upgrade of my site. Thanks a lot.
August 1st, 2009 at 8:55 am
Hi, this is really cool, but i’ve one question…. how do I set this css dock menu so it would scale to full height on page. Thanks
July 23rd, 2009 at 8:42 pm
Wow . . . that’s great. Thanks for your effort.
July 22nd, 2009 at 9:32 pm
i implement this menu in my site. but apparently when i used i as floating menu, i stop the “fish Eye” effect after i scroll it, and it follow by floating. but when i scroll back to its original position. the fish eye effect works fine.
can somebody help my with this. TIA
July 22nd, 2009 at 8:44 pm
hi, i am using the css dock menu for my site. but apparently i want the menu to be floating, i get some code to make it. but after i scroll it, the “fish eye” effect could not “run” again? any suggestion?
TIA
July 20th, 2009 at 12:24 pm
Anyone find a fix for the scrolling issue? Whenever the page length is more than one browser window the bars no longer work when scrolling. The hit zone for the menu appears to be fixed on the page and not on the menus position on the page. I have the menu fixed to the bottom the entire time the user is scrolling and the hit zone moves as I scroll. Same for the top menu.