滑出式菜单仅CSS [英] Slide-out menu css only

问题描述

我正在尝试制作一个仅支持CSS的滑出菜单，可以将其滑出和滑出，请参见我的小提琴

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>

推荐答案

只需使用JavaScript，这很容易，只需添加< a onclick ="togglePos(this)"> li 元素周围的code>并使用

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>

> 此处演示

如果您知道发生了什么，结果将非常简单.您可以将 input 放置在要影响的对象的前面，并在要用于切换<的元素周围放置带有 for ="toggler" 的标签.code> translateY .与使用 margin 或 top 相比，使用transform性能更高.

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.

这篇关于滑出式菜单仅CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！