N.Design Studio

CSS Dock Menu

Filed in: Design, Mac Jump to comments

CSS dock menu

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).

622 comments so far

Pages: [63] 62 61 60 59 58 57 56 55 54 531 » Show All

  1. Gravatar
    cy
    # 622

    November 24th, 2008 at 2:00 am

    So, I can change the images, right?

  2. Gravatar
    Long
    # 621

    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?

  3. Gravatar
    NGHIA
    # 620

    November 21st, 2008 at 3:22 am

    yeah
    i like it very much
    it’s so nice

  4. Gravatar
    Altamira
    # 619

    November 15th, 2008 at 9:35 pm

    I love dock menu. I’m using it on my site: http://altamiraweb.net/webs.htm

  5. Gravatar
    Joey
    # 618

    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.

  6. Gravatar
    professional web design nepal
    # 617

    November 14th, 2008 at 3:09 am

    it’s better idea for end users to make more friendly….

  7. Gravatar
    Naina Susen
    # 616

    November 13th, 2008 at 2:55 am

    It is working fine for me! thanks a lot.

  8. Gravatar
    VTJamie
    # 615

    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”);

  9. Gravatar
    Thomas
    # 614

    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.

  10. Gravatar
    css
    # 613

    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

Pages: [63] 62 61 60 59 58 57 56 55 54 531 » Show All

Post your comment





Categories