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).
November 24th, 2008 at 2:00 am
So, I can change the images, right?
November 22nd, 2008 at 3:39 am
Hi guys, is there any way to make the labels appear all the time instead of just hover?
November 21st, 2008 at 3:22 am
yeah
i like it very much
it’s so nice
November 15th, 2008 at 9:35 pm
I love dock menu. I’m using it on my site: http://altamiraweb.net/webs.htm
November 14th, 2008 at 7:28 pm
hey since you don’t require a link back i’m going to use some of your pictures in the menus and add your link in my footer if you don’t want me to do that please send an email to me asap.
November 14th, 2008 at 3:09 am
it’s better idea for end users to make more friendly….
November 13th, 2008 at 2:55 am
It is working fine for me! thanks a lot.
November 12th, 2008 at 1:29 am
I have a request for a bug fix. I have fixed it on my own implementation. You should look into how you are getting the oldDisplay and oldOverflow variables. The error surfaced in IE 7 when I was using the Flexigrid. The errors seems to come from the fact that if the Display style or overflow style is not set inline it returns “undefined” instead of “” in IE 7.
Quick fix(not the best)
var oldDisplay=jQuery.css(elem,”display”);
CHANGE TO
var oldDisplay=jQuery.css(elem,”display”)==undefined?”:jQuery.css(elem, “display”);
var oldOverflow=jQuery.css(elem,”overflow”);
CHANGE TO
var oldOverflow=jQuery.css(elem,”overflow”)==undefined?”:jQuery.css(elem, “overflow”);
November 11th, 2008 at 5:45 pm
Hi, I found a bug in the demo. So, under firefox ver.3. if you click w/ the mouse right button on the fancy menu, then the icon dont will goes small again. exept this problem its a really nice script.
November 11th, 2008 at 4:58 pm
Cascading Style Sheets (CSS) web design lessons
Css link Properties Attributes - examles
http://css-lessons.ucoz.com/link-css-examples-1.htm
http://css-lessons.ucoz.com/link-css-examples-2.htm