javascript - How to implement combination collapseexpand sidebar? - Stack Overflow

I was wonder how to implement bination of hide/show and collapse/expand side bar exactly like this sample.

There will be icons showing when the side bar collapse.

perhaps it is implemented using jQuery, CSS and HTML, please advise how can I do that, thanks.

I was wonder how to implement bination of hide/show and collapse/expand side bar exactly like this sample.

There will be icons showing when the side bar collapse.

perhaps it is implemented using jQuery, CSS and HTML, please advise how can I do that, thanks.

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jun 6, 2013 at 17:04 sams5817sams5817 1,0371010 gold badges3434 silver badges4949 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

you can via css and for modern browser only, set something with pseudo :checked .

http://jsfiddle/T6kG9/1/
It can be useful while working on it , JavaScript should take over :)

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

It is a bination of jQuery, CSS, and HTML. It is a slight tweak on a design pattern monly referred to as "Off-Canvas Navigation" or just "Off-Canvas".

I would begin by reading this Smashing Mag walkthrough and then modifying what you learn there to fit this demo.