3

私はCSSのみのスライドアウトメニューを作成しようとしています。これはスライドして元に戻すことができます.私のフィドルhttp://jsfiddle.net/EZ8SK/1/を参照してください。ここで、ハンドラーを 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>
4

1 に答える 1

3

<a onclick="togglePos(this)">これは、最後のli要素の周りに次のようなものを追加して使用するだけで、JavaScript に触れるだけで簡単です

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>

デモはこちら

何が起こっているかを知っていれば、結果は驚くほど簡単です。input影響を与えたいオブジェクトの前に を配置し、 を切り替えるために使用する要素の周りに が付いたラベルを置くことができfor="toggler"ますtranslateY。margintransform を使用すると、 orを使用するよりもパフォーマンスが向上しtopます。

特にあなたの状況に適用できなくて申し訳ありません。あなたが何を維持したいのかわかりません。

于 2013-09-27T01:01:06.983 に答える