仅滑出式菜单 css

Posted 2023-04-13

【中文标题】仅滑出式菜单 css

【英文标题】：Slide-out menu css only

【发布时间】：2013-10-02 21:08:20

【问题描述】：

我正在尝试制作一个仅 css 的滑出菜单，它可以滑出和滑出，请参阅我的小提琴 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>

【参考方案1】：

只需一点 javascript 就可以轻松实现，只需在最后一个 li 元素周围添加类似 <a onclick="togglePos(this)"> 的内容并使用

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 更高效。

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

【讨论】：

非常感谢！那是我错过的。