Slide-out-Menü css nur

Ich versuche eine css-slide-out-Menü, die werden geschoben, hin und zurück, sehe meine Geige http://jsfiddle.net/EZ8SK/1/ hier. Jetzt würde ich gerne kombinieren, die Handler in einem.
Ich habe versucht zu tun, also mit radio-oder Checkboxen, aber ich konnte es nicht funktioniert, vermute ich, dass ich etwas übersehen.

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>
InformationsquelleAutor Moritz Friedrich | 2013-09-26
  1. 3

    Wäre dies einfach mit nur einem Hauch von JavaScript, einfach etwas hinzuzufügen, wie <a onclick="togglePos(this)"> um die letzten li element und mit

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

    aber ich verschwiegen, alle diejenigen Gefühle und arbeitete für eine Weile, um zu kommen mit dieser Technik:

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

    Das Ergebnis ist überraschend einfach, wenn Sie wissen, was Los ist. Sie können die input vor dem Objekt, das Sie beeinflussen möchten, und legen Sie die label mit den for="toggler" um das element, das Sie verwenden möchten, schalten Sie die translateY. Mithilfe der Transformation, die mehr Leistung bietet, als die Verwendung margin oder top.

    Sorry für die nicht die Anwendung, um Ihre situation insbesondere bin ich nicht sicher, was alles, was Sie behalten möchten.

    • Vielen, vielen Dank! Das war es, was ich verpasste.
    InformationsquelleAutor Zach Saucier
Schreibe einen Kommentar