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).
December 24th, 2008 at 12:04 pm
be ! devo dire che ho provato ma mi segnala che c’è un errore in due script !!!
come posso risolvere ??
gli script errati che mi segnala il computer sono ( LA PARTE ERRATA è IN MAIUSCOLO ) :
$(document).ready(
function()
{
$(’#dock2′).Fisheye(
{
MAXWIDTH: 60,
items: ‘a’,
itemsText: ’span’,
container: ‘.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
)
}
);
e poi il secondo script errato :
$(document).ready(
function()
{
$(’#dock2′).Fisheye(
{
MAXWIDTH: 60,
items: ‘a’,
itemsText: ’span’,
container: ‘.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
)
}
);
December 24th, 2008 at 4:27 am
Awesome menu!!! exist a limit for items ??
December 22nd, 2008 at 1:09 pm
I too am experiencing the scrollTo jquery functions breaking after the implementation of the interface.js file.
Is the uncompressed source for interface.js available? I need to try to fix this conflict.
Awesome menu though!
December 16th, 2008 at 1:07 pm
Hi.
I’m using dock menu in my website but I see a conflict with another very useful jQuery plugin: http://flesler.blogspot.com/2007/10/jqueryscrollto.html
I noticed that some jQuery functions seem to be corrupted after the dock menu code.
Do you have any experience about that?
Thanks a lot.
Michele
December 15th, 2008 at 7:14 pm
ps: if you want to take a look to understand my problem, here’s a test link: http://www.stephenking.it/frm/viewtopic.php?f=12&t=37160&start=0
try tro scroll down the page. After put your mouse on menù and you’ll see what i meant!
December 15th, 2008 at 6:16 pm
Hi. it’s a fantastc menù, but i need a little help! I’ve changed the css, changed a position:absolute to position:fixed (i don’t remember, maybe in dock2). So images scroll with the page, but the sensible area remain on the same coordinates (ehm.. to same X and Y, i don’t know how to explain in english) and doesn’t scroll with the page.
any idea on how to make this menù scrolling down? (ps: it scrolls down with ie6 but not with ie7 and ff3)
thanks!
December 14th, 2008 at 12:14 pm
I love this menu! great job!
December 11th, 2008 at 1:14 am
Hi,
Thanks for the menu, i use for sgdnetworks.com
Regards
Venkat
December 4th, 2008 at 3:41 am
My site is in process. It’s a drupal site and as of right now jquery is only called in the admin area, so I have nothing to show unfortunately. I need help making the styles I am using center the application. Currently everything seems to float left.
November 24th, 2008 at 2:00 am
So, I can change the images, right?