4

我想知道如何像这个示例一样实现隐藏/显示和折叠/展开侧栏的组合。

侧栏折叠时会有图标显示。

在此处输入图像描述

也许它是使用 jQuery、CSS 和 HTML 实现的，请告知我该怎么做，谢谢。

4

2 回答 2

3

您可以通过 css 并且仅对于现代浏览器，使用 pseudo :checked 进行设置。

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;
}
于 2013-06-06T18:04:20.703 回答
0

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

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

于 2013-06-06T17:25:44.340 回答