Question

I’m trying to emulate iOS’s action sheet in CSS.

My idea is to make the action sheet a fixed position element that is always just below the webpage. When I need to show the action sheet, I do a translate transform.

Hidden:

____________
|           |
|           |
|  Webpage  |
|           |
|           |
|___________|
 |         |
 | Sheet   |
 |_________|

Opened

____________
|           |
|  Webpage  |
| _________ |
||         ||
||  Sheet  ||
||_________||

It’s easy when the action sheet has a static height. I can just hardcode all the values:

#sheet {
    position: fixed;
    left: 0;
    bottom: -12em;
    height: 12em;
    transition: all 0.5s ease-out;
}

#sheet.opened {
    transform: translate(0, -12em);
}

I don’t know what to do when there are variable number of buttons in the action sheet, which affect the height of the whole sheet.

Answer 1

See here: http://jsfiddle.net/uSXKe/

You can instead toggle the height between 0 and normal, but this requires a little bit of javascript:

var height = $("#action").height();
$("#action").height(height);
$("#home").click(function(){
    var $act = $("#action");
    $act.toggleClass("active");
    $act.css("height", $act.hasClass("active") ? height : "0");
});​

Relevant CSS:

#action{
    height:0;
    position:absolute;
    bottom:0;
    width:100%;
    -webkit-transition:height .2s linear;
}