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).
November 11th, 2008 at 6:19 am
is it posible to combine dock navigation and carousell … i need some solution for web shop where there are for example 5 elements visible, others not and you can scroll but I need also this dock effect… does anyone knows working example or plugin? i have tried to combine http://www.gmarwaha.com/jquery/jcarousellite/ and http://ui.jquery.com/repository/latest/demos/functional/#ui.magnifier but it doesn’t work as expected.
November 10th, 2008 at 7:41 am
hello its a great script
how easy is to expand the dark background vertically also so it will
made the titles more distinguishable on busy backgrounds
thanks ioannis
November 6th, 2008 at 5:29 am
Thanks for the source code.
November 1st, 2008 at 2:13 pm
BUG: (used Firefox 3.03 when I found this)
Move your cursor over the icon, then right click on it. You’ll see.
November 1st, 2008 at 12:19 pm
Hey, love the dock! Great work! Quick question, I’m combining this with a javascript to open movable, resizeable content windows. I can open as many windows as I want and everything works fine, but as soon as I minimize a window or close one, the fisheye for the dock stops working. Do you have any ideas why this would happen? I’m speculating that because your script is calling out a function that is “unnamed” and the other script is calling out “named” functions, that when the close or minimize functions are called out, it causes your script to stop working… (not that I’m blaming your script- please dont get the wrong idea!). I’d really appreciate any feedback I can get, both from you or from the community, thanks in advance!
October 29th, 2008 at 7:56 pm
This is a fantastic menu, but I do have a question.
Is there a way to reduce the area that activates the menus animation? I would love to use this as a second menu under a horizontal text menu but when using the text menu above the dock menu, it activates the animation of the dock menu.
Cheers, Simon
October 29th, 2008 at 4:51 pm
Hi
I have LITTLE problem with dock-menu and SuperSleight solution for png transparency ( http://24ways.org/2007/supersleight-transparent-png-in-ie6 )
In Firefox, Opera, and others looks fine, but in IE 6 menu collapse ( http://www.fotosik.pl/pokaz_obrazek/pelny/c92edf675e89a983.html )
Any ideas? Why SuperSleight break down this wonderful menu?
Regards!
P.S. email in nick-name is correct
October 28th, 2008 at 9:49 am
Hi
It seems the code only work if I use 128×128 icons.
How can I use 64×64 icons?
Thanks
October 27th, 2008 at 2:33 pm
Good!!!The best menu!!!I like this)))
October 27th, 2008 at 1:59 pm
It seems to have chrome issues regarding focus area. Other than that, it’s pretty smooth.