Making a Pure CSS Dock

Question

After playing with CSS 3, I had the crazy idea to make an OS X-style dock with it (a DIV container with elements inside it, which, using the CSS :hover subclass, increase in size upon mouseover). However, I'm running into some strange effects when implementing it. So far, this is what I've tried:

Code

<html>
<head>
<style>
body{
    margin:0;
}
.dockHolder{
    width:100%;
    position:absolute;
    text-align:center;
    display:block;
    bottom:0;
}
.dock{
    margin-left:auto;
    margin-right:auto;
    bottom:0;
    text-align:center;
}
.dockItem{
    height:50%;
    display:inline-block;
    position:relative;
    bottom:0;
    vertical-align:bottom;
    text-align:center;

    transition-property:width, height;
    -o-transition-property:width, height;
    -moz-transition-property:width, height;
    -webkit-transition-property:width, height;
    transition-duration:.25s;
    -o-transition-duration:.25s;
    -moz-transition-duration:.25s;
    -webkit-transition-duration:.25s;
    transition-timing-function:linear;
    -o-transition-timing-function:linear;
    -moz-transition-timing-function:linear;
    -webkit-transition-timing-function:linear;
}
.dockItem:hover{
    height:100%;
    width:auto;
}
</style>
</head>
<body>
<div class="dockHolder" style="height:64px;max-height:64px;border:1px solid black;">
    <div class="dock" style="background-color:lightgray;">
        <center>
            <div class="dockItem" style="background-color:magenta;"><img height="100%" src="pony.png" /></div>
            <div class="dockItem" style="background-color:magenta;"><img height="100%" src="bhs256.png" /></div>
        </center>
    </div>
</div>
</body>
</html>

My test page is at ~~http://s.supuhstar.operaunite.com/s/content/testAnims.htm~~(died with Opera Unite) if you wanna see what I have so far.

Missing functionality

Unexpected effects include:

Inability to place the dock element at the bottom of the dockHolder element
dockItem element not expanding width-wise along with its child image
dockItem and dock elements will not center inside the dockHolder container with CSS (tried margin:auto;, box-pack:center;, box-align:center;, etc.); only the <center> HTML tag works
In Opera and Firefox (I've given up on IE), dockItems are extremely wide

Intended effects that are not present include:

dockItems stay within the dock element until resizing, at which time they increase proportionally to the size of the dockHolder element, but the dock element stays the same size
The dock element is constantly only wide enough to contain all the dockItems within it, and never wider not shorter than the combined widths of all dockItems and their margins.

Question

Does anyone have a solution that will fix the unexpected effects andor implement the absent intended effects?

Final implementation

Below is the code of my final solution:

<!DOCTYPE html><html>
<head>
<style type='text/css'>
body{
    margin:0;
}
.dockHolder {
    position: fixed;
    text-align: center;
    bottom: 0; 
    left: 0;
    right: 0;
    height: 128px;
    line-height: 128px;
}

.dock {
    background:#CCCCCC;
    background:
        -o-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
    background:
        -moz-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
    background:
        -webkit-linear-gradient(top, #AAA 0, #CCC 49%, #AAA 51%, #808080 100%);
    border: 1px solid gray;
    max-width:100%;
    vertical-align: bottom;
    line-height: 1em;
    padding: 0 8px;
    border-radius: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.dockItem {
    display: inline;
    height: 50%;
    vertical-align: bottom;

    transition-property:width, height;
    -o-transition-property:width, height;
    -ms-transition-property:width, height;
    -moz-transition-property:width, height;
    -webkit-transition-property:width, height;
    transition-duration:.25s;
    -o-transition-duration:.25s;
    -ms-transition-duration:.25s;
    -moz-transition-duration:.25s;
    -webkit-transition-duration:.25s;
    transition-timing-function:ease-in-out;
    -o-transition-timing-function:ease-in-out;
    -ms-transition-timing-function:ease-in-out;
    -moz-transition-timing-function:ease-in-out;
    -webkit-transition-timing-function:ease-in-out;
}
.dockItem:hover {
    height: 100%;
}
.dockItem:active {
    vertical-align:top;
    height:95%
}
</style>
</head>
<body>
    <div class="dockHolder" style="height:128px;line-height:128px;">
        <span class="dock">
            <img class="dockItem" src="pony.png"/>
            <img class="dockItem" src="bhs256.png"/>
            <img class="dockItem" src="mcgrass.png"/>
        </span>
    </div>

</body>
</html>

Working example (might go out of date): ~~http://admin.s.supuhstar.operaunite.com/s/content/testDock.html~~ (died with Opera Unite)

Why are you using both the `style` attribute *and* a CSS rule for the `.docHolder` element? — Šime Vidas, Oct 22 '11 at 00:41
Where is the `.dock` element? I only see a `.dockHolder` and `.dockItem` elements in your HTML code. — Šime Vidas, Oct 22 '11 at 00:45
just so I can see where the `dockHolder` is. the indended effect is that it is invisible to the end user, but that is counterproductive at this stage. I also use the `style` attribute in the `dock` so that someone using this API can choose their own dock color and height (I don't like arbitrary choices like that). I only use it in the `dockItem`s for debugging purposes. — Ky -, Oct 22 '11 at 00:45
@ŠimeVidas Sorry, I must have deleted it while editing... it's the first element within the `dockHolder`, and it contains the `dockItem`s — Ky -, Oct 22 '11 at 00:47

Šime Vidas · Accepted Answer · 2011-10-22T01:29:58.640

6

How's this?

HTML:

<div class="dockbg"></div>
<div class="dock">
    <img src="foo.png">
    <img src="bar.png">
</div>

CSS:

.dockbg {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 35px;
    background: #bbb;
}

.dock {
    position: fixed;
    text-align: center;
    bottom: 5px;
    left: 0;
    right: 0;
    height: 100px;
    line-height: 100px;
}

.dock img {
    display: inline-block;
    vertical-align: bottom;
    height: 50%;
    padding: 0 5px;
    /* + your animation properties */
}


.dock img:hover {
    height: 100%;
}

Live demo: http://jsfiddle.net/simevidas/QM7M7/3/show/

edited Oct 22 '11 at 01:29

answered Oct 22 '11 at 00:56

Šime Vidas

182,163
62
281
385

@Supuhstar Why do you need both a `dock` and a `dochHolder`? – Šime Vidas Oct 22 '11 at 01:06
The `dock` is what the user sees as the dock (it wraps around the `dockItem`s like Mac OS X's does), whereas the `dockHolder` is what holds the `dock` and all its items, specifying the maximum size of a "zoomed-in" item – Ky - Oct 22 '11 at 01:09
@Supuhstar I've updated my demo. It's a bit of a hack - I've placed the "dock" in the background, while a transparent dock-holder contains the icons in the foreground... – Šime Vidas Oct 22 '11 at 01:31
close... but unlike a dock, it always spans the width of the screen, instead of conforming to the icons. See my latest edit for my closest attempt – Ky - Oct 22 '11 at 01:41
@ŠimeVidas what would really, really really be awesome, is if you could make different versions of this for docking the menu on the left and on the right. Because honestly this is the best docking menu I've seen so far and most elegant... i just don't want it at the bottom and my CSS skills are not good enough to figure out how to modify yours and make it float right... :) – MaxOvrdrv Apr 01 '15 at 12:44

score 0 · Answer 2 · answered Oct 22 '11 at 00:51

0

For me the problem comes from the fact that you don't specify a fixed width size. My idea is cancel the dockItem class , you don't need it. Play with an CSS img class directly.
To center your element use "margin : auto 0px auto 0px;".
First of it, use a reset, it will help you to do it correctly : http://html5doctor.com/html-5-reset-stylesheet/#comment-18168
you should you a display:block; and float:left; than the display:inline-block;
you should you a <ul> and <li> element to help you.

answered Oct 22 '11 at 00:51

xeonarno

426
6
17

Using `float:left;` makes the dock the same size as the items and places the dock and its items in the topleft corner of the `dockHolder`, and using `display:block;` makes the items span the full width of the `dock`. Also, where and why should I use `ul` and `li`? – Ky - Oct 22 '11 at 00:55

score 0 · Answer 3 · answered Oct 22 '11 at 19:41

0

Use javascript and css to make the icons before and after the hovered icon a little bigger too for a smoother animation ;)

answered Oct 22 '11 at 19:41

seahorsepip

4,519
1
19
30

The question is about CSS3, so the idea of using Javascript pointless, but I must agree that's a good idea – Ky - Oct 24 '11 at 15:39

Making a Pure CSS Dock

Code

Missing functionality

Question

Final implementation

3 Answers3