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 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.
August 6th, 2008 at 3:19 am
Hi……Got a nice blog site.Some very interesting information. I like this.
Thank you
Pitter
August 5th, 2008 at 11:20 pm
Great Job !! thanks for this amazing work !!
August 5th, 2008 at 6:31 am
Is it possible do a vertical dock menu? Thanks.