如何实现组合折叠/展开侧边栏？

Question

我很想知道如何实现hide / show和collapse / expand side bar的组合，就像this样本一样。

侧栏会崩溃时会显示图标。

也许是使用jQuery，CSS和HTML实现的，请指教我该怎么做，谢谢。

Answer 1

你可以通过css和现代浏览器，设置一些伪的：检查。

http://jsfiddle.net/T6kG9/1/
它在处理它时很有用，JavaScript应该接管:)

<nav>
    <input type="checkbox" id="toggleexpand" />
    <label for="toggleexpand"><span>></span>

    </label>
    <ul>
        <li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a>

        </li>
        <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a>

        </li>
        <li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a>

        </li>
        <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a>

        </li>
        <li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a>

        </li>
    </ul>
    <ul>
        <li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a>

        </li>
        <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a>

        </li>
        <li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a>

        </li>
        <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a>

        </li>
        <li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a>

        </li>
    </ul>
    <ul>
        <li><a href="#nowhere" title="Lorum ipsum dolor sit amet">Lorem</a>

        </li>
        <li><a href="#nowhere" title="Aliquam tincidunt mauris eu risus">Aliquam</a>

        </li>
        <li><a href="#nowhere" title="Morbi in sem quis dui placerat ornare">Morbi</a>

        </li>
        <li><a href="#nowhere" title="Praesent dapibus, neque id cursus faucibus">Praesent</a>

        </li>
        <li><a href="#nowhere" title="Pellentesque fermentum dolor">Pellentesque</a>

        </li>
    </ul>
</nav>
<div>div</div>

nav {
    float:left;
}
input {
    position:fixed;
    left:-9999px;
}
label {
    text-align:right;
    display:block;
}
label span {
    background:gray;
    padding:0 0.25em;
}
ul {
    margin:0;
    padding:0;
}
ul li {
    width:20px;
    padding:0;
    list-syle-type:none;
    overflow:hidden;
    border:solid 1px;
}
:checked ~ ul li {
    width:250px!important;
}
:checked + label span {
    -moz-transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
    transform:rotate(180deg);
}
div {
    min-height:300px;
    overflow:hidden;
    background:#ccc;
    padding:1em;
}

Answer 2

它是jQuery，CSS和HTML的组合。这是对通常被称为“Off-Canvas Navigation”或“Off-Canvas”的设计模式的轻微调整。

我首先阅读this Smashing Mag walkthrough然后修改你在那里学到的内容以适应这个演示。