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 25th, 2008 at 4:31 pm
how do you reduce the hover point where the menu starts activating? i would like to not have the menu activate when hovered on the top part, where i have other stuff.
you can see it at www.kingbelvedere.com on the bottom.
any help would be awesome…
August 22nd, 2008 at 6:38 am
I’m having a slightly similar issue to Phil (#549), I have moved the placement of the dock higher(much like Phil) and now when I do a hard reload of the page, the animation only takes place when the cursor is hundreds of pixels higher than the actual images - but here’s the kicker, when I resize the browser window, even slightly, then voila ,everything works perfectly. Do another hard reload to dump the cache, and I’m back to having the same problem.
Ideas??
Pete
August 21st, 2008 at 12:01 pm
Hello everyone!
got a little question about it!
How can we make some changes in the *.js files?
Since i’m new to all of this, I have tried to open these files with notepad and dreamweaver but it did not work.
Why do I want to realise some changes?
Just because I want to get only one dock, on the bottom of the page and that I do not want the number “2″ to appears.
If you can help me it would be great.
Best regards
Silend
August 21st, 2008 at 1:55 am
amazing work. Love it. Thnx alot.
August 20th, 2008 at 10:56 pm
I have found a bug when implementing this with a wordpress template. Where can I edit where the script looks for blank.gif? For instance the page will be example.com/page1 and the script will look in example.com/page1/images/ for the blank.gif resulting in the ugly red x indicating the image was not found. I’ve scoured through the code to not find a single mention of this. Is it in the jquery or interface js files? I’d like to be able to implement this on a dynamic site. Thanks for sharing this menu with us.
August 19th, 2008 at 6:19 am
To those asking for a vertical menu:
You may try another dock menu named euDock ( http://eudock.jules.it/index-eudock2.0.php ). It’s nice.
August 18th, 2008 at 3:08 pm
I have a small bug at this script, i set the menu to show in the right side of the screen, and every time i load the site in a browser for the first time, it doesn;t work proprely, but if i refresh it goes to normal, how can i fix this little issue!?
August 16th, 2008 at 7:02 pm
Is there a way to get this menu to perform such an effect vertically rather than a menu bar that is horizontal?
August 15th, 2008 at 12:53 am
what is the procedure to follow for this to work on rails framework..
August 6th, 2008 at 3:27 pm
amazing work. Love it. Thnx alot.