Slide-out menu css only

Question

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 tried doing so with radio or checkboxes, but I could not get it to work, I guess I overlooked something.

CSS

#wrapper                  { width: 100%; height: 100%; }
#header-wrapper           { width: 100%; height: 56px; position: relative }
#header                   { width: 100%; height: 56px; background: #111; position: absolute; }

        #content-wrapper  { width: 100%; background: #333; }
            #left-nav     { width: 200px; height: 100%; background: #555; float: left; }
            #right-nav    { width: 300px; height: 100%; background: #555; float: right; }

    #left-nav             { margin-top: -392px; transition-duration: .4s }
    #left-nav:target      { margin-top: -56px }
    #nav-menu > .menu-item > .menu-item-link { display: block; padding: 20px; width: calc(200px - (2*20px)); }      
    #right-menu > .menu-item > .menu-item-link { display: block; padding: 20px; width: calc(300px - (2*20px)); }      
    .menu-item-link:hover { background: #222 }

    #menu-slideout        { position: absolute; top: 0; left: 0; color: #fff; }
    #last-item            { cursor: pointer; display: block; }
    #last-item:hover      { background: #222; cursor: pointer }
    #last-item-back:hover { background: #222; cursor: pointer }

HTML

    <div id="header-wrapper">
        <div id="header">
            <div id="menu-slideout">
                <div id="left-nav">
                    <div class="menu">
                        <ul id="nav-menu">
                            <li class="menu-item"><a href="" class="menu-item-link">Menüpunkt</a></li>
                            <li class="menu-item"><a href="" class="menu-item-link">Menüpunkt</a></li>
                            <li class="menu-item"><a href="" class="menu-item-link">Menüpunkt</a></li>
                            <li class="menu-item"><a href="" class="menu-item-link">Menüpunkt</a></li>
                            <li class="menu-item"><a href="" class="menu-item-link">Menüpunkt</a></li>
                            <li class="menu-item"><a href="" class="menu-item-link">Menüpunkt</a></li>
                            <li class="menu-item"><a href="" class="menu-item-link">Menüpunkt</a></li>
                            <li class="menu-item"><a href="#left-nav" class="menu-item-link" id="last-item">Einblenden</a></li>
                            <li class="menu-item"><a href="#" class="menu-item-link" id="last-item-back">Ausblenden</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

score 3 · Accepted Answer · edited Jun 04 '20 at 06:31

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

function togglePos(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;
}
ul li {
    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) -->
<input type="checkbox" id="toggler">
<ul id='dropDown'>
    <li>Content</li>
    <li>Content</li>
    <li>Content</li>
    <li>Second to last one</li>
    <label for="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.

Thank you so much! That was what I missed out. – Moritz Friedrich Sep 28 '13 at 10:58 — Moritz Friedrich, Sep 28 '13 at 10:58

Slide-out menu css only

1 Answers1

Linked