How to implement a collapse / expansion combination of a sidebar?

Question

I was wondering how to implement the hide / show and collapse / maximize sidebar combination just like this sample.

Icons will appear showing when the sidebar is crashing.

maybe it is implemented using jQuery, CSS and HTML, please tell me how I can do this, thanks.

Answer 1

you can use css and only for modern browser, install something with pseudo: checked.

http://jsfiddle.net/T6kG9/1/
This can be useful when 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; } 

Answer 2

This is a combination of jQuery, CSS and HTML. This is a small tweak to a design pattern, commonly called “Off-Canvas Navigation,” or simply “Off-Canvas.”

I would start by reading this slip of the Smashing Mag , and then modify what you learned there to fit this demo.