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.
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).
May 26th, 2007 at 11:12 am
[…] i browsing the V2EX, I found a cool css design that a friend interduced : a mac dock menu. Yes , i had searching the design before, but didn’t found […]
May 26th, 2007 at 8:28 am
[…] 60 Best CSS Directories | watch list - www.wittysparks.com CSS Dock Menu | mac menu - www.ndesign-studio.com CSS Cheat sheat | css references - www.lesliefranke.com CSS simple nav bar - […]
May 26th, 2007 at 8:19 am
wohooo, that’s just beaaauuuuutifuuuuul!!!!!!
May 25th, 2007 at 9:53 pm
Verry nice. And the icons are awsome.
I think you should make some more icon tutorials, especially about the history, home and contact icon. I’m not good in illustrator, I’ve tried to do some icons, and they look terrible.
May 25th, 2007 at 8:22 pm
if only i had an apple computer…
anyways i absolutely love your work with your wallpapers/vectors…just EVERYTHING. amazng site here.
xoxxo
May 25th, 2007 at 4:16 pm
[…] fare ile gidildiğinde büyüyen simgeler grubu) HTML sayfalarında kullanabilmemizi sağlıyor. Bu adresten detaylı bilginin alınabileceği gibi şu adresten de doğrudan zip paketini […]
May 24th, 2007 at 7:27 pm
Hey,
I would love to use this on my blog but I was wondering were I install the stuff I download. Thats my only problem, I might be a noob but could someone please help.
May 24th, 2007 at 1:01 pm
[…] Dock Menu En ANIETO2K, nos enseña un increible menú que recuerda al más puro Dock Maquero para nuestras webs. Está realizados sobre jQuery y podemos ver lo fluido que se comporta en la […]
May 24th, 2007 at 11:30 am
[…] CSS Dock menu - An apple-inspired menu for use in your websites […]
May 24th, 2007 at 5:38 am
Hello,
I noticed a bug in IE7 with the docking boxes. I haven’t tested it in IE6.
The user is able to make as many clones of each box as he wants.
This happens when you drag the box, then with pressed left button click the right, wait until the alt text is visible and then release the left button first. The clone is pinned. Then when you drag up the box witch is under the first one you moved the original will be restored and the clone will be still visible.