仅限滑出式菜单 css

我正在尝试制作一个纯 css 滑出菜单，可以滑出和滑回，请参阅我的小提琴http://jsfiddle.net/EZ8SK/1/ http://jsfiddle.net/EZ8SK/1/这里。现在我想将处理程序合二为一。 我尝试使用单选按钮或复选框来执行此操作，但我无法使其工作，我想我忽略了一些东西。

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>

只需要一点 JavaScript 就可以很容易地实现这一点，只需添加类似的内容<a onclick="togglePos(this)">大约在最后li元素及使用

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)";
}

但我抑制住了所有这些感觉，并花了一段时间想出了这个技巧：

/* 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>

演示在这里 http://jsfiddle.net/jmM4z/249/

如果您知道发生了什么，结果会非常简单。您可以将input在您想要影响的对象前面并放置带有for="toggler"在您想要用来切换的元素周围translateY。使用变换比使用变换更高效margin or top.

很抱歉没有将其特别应用于您的情况，我不确定您想要保留什么。