Question

我正在尝试创建一个仅限css的滑出菜单，可以滑出来，在这里查看我的小提琴http://jsfiddle.net/EZ8SK/1/。现在我想把Handlers合二为一。我尝试用收音机或复选框这样做，但我无法让它工作，我想我忽略了一些东西。

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>

Answer 1

只需轻轻一点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>

Demo here

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

很抱歉没有特别适用于您的情况，我不确定您想要保留的内容。

仅滑出菜单css

1 个答案: