Slide-out Menu Css Only

I am trying to make a css-only slide-out menu, which can be slid out and back, see my fiddle http://jsfiddle.net/EZ8SK/1/ here. Now I'd like to combine the Handlers into one. I tri

Solution 1:

This would be easy with just a touch of JavaScript, simply adding something like <a onclick="togglePos(this)"> around the last li element and using

functiontogglePos(obj) { 
    obj.style.webkitTransform = (obj.style.webkitTransform == "translateY(-392px)") ?
        "translateY(0px)" : "translateY(-392px)";
    obj.style.transform = (obj.style.transform == "translateY(-392px)") ?
        "translateY(0px)" : "translateY(-392px)";
}

but I withheld all of those feelings and worked for a while to come up with this technique:

/* CSS */ul {
    background:red;
    -webkit-transform:translateY(-90px);
    transform:translateY(-90px);
    transition: 1s;
}
ulli {
    transition: 1s;
}
input[type=checkbox] {
    position: absolute;
    top: -999px;
    left: -999px;
}
input[type=checkbox]:checked ~ ul {
    -webkit-transform:translateY(0px);
    transform:translateY(0px);
}
label {
    display:block;
    width:100%;
    height:20px;
}

<!-- HTML (for demo) --><inputtype="checkbox"id="toggler"><ulid='dropDown'><li>Content</li><li>Content</li><li>Content</li><li>Second to last one</li><labelfor="toggler"><li>Last one</li></label></ul><div>Other content</div>

Demo here

The result is surprisingly simple if you know what is going on. You can place the input in front of the object you want to affect and put the label with the for="toggler" around the element you want to use to toggle the translateY. Using transform is more performant than using margin or top.

Sorry for not applying it to your situation in particular, I am not sure what all you want to keep.