Payament
Free Photos
WordPress Themes

Collapsible Menu CSS, very Simple Example

HTML
<div class="menu"> <input type="checkbox" id="menu-collapsed" name="menu-collapsed" /> <div class="menu-content"> <h2>Collapsible menu</h2> <ul> <li>lorem ipsum</li> <li>dolor sit amet</li> <li>consetetur sadipscing</li> <li>elitr</li> <li>sed diam nonumy</li> <li>eirmod tempor</li> <li>invidunt ut</li> <li>labore et dolore</li> </ul> </div> <div class="menu-switch"> <label class="collapse" for="menu-collapsed">«</label> <label class="rise" for="menu-collapsed">»</label> </div> </div>
LESS
@import url('http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300'); @import url('http://fonts.googleapis.com/css?family=Handlee'); html, body { margin: 0; padding: 0; border: 0; width: 100%; height: 100%; overflow: hidden; background-color: #212121; font-family: 'Open Sans Condensed', sans-serif; color: #F5F5F5; } .menu { .menu-content { -webkit-transition-duration: 1s; -moz-transition-duration: 1s; -ms-transition-duration: 1s; -o-transition-duration: 1s; transition-duration: 1s; float: left; width: 12em; h2 { font-family: 'Handlee', cursive; font-weight: normal; margin-left: 1em; } ul { list-style: none; } } li, label { color: #BDBDBD; cursor: pointer; -webkit-transition-duration: 1.0s; -moz-transition-duration: 1.0s; -ms-transition-duration: 1.0s; -o-transition-duration: 1.0s; transition-duration: 1.0s; &:hover { -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; color: rgba(252,251,250,0.9); } } .menu-switch { padding-top: 6em; label { font-size: 3em; font-family: 'Open Sans Condensed', sans-serif; } } input { display: none; } #menu-collapsed{ &:checked{ ~ .menu-content { margin-left: -12em; } ~ .menu-switch .rise { display:block; } ~ .menu-switch .collapse { display:none; } } ~ .menu-switch .rise { display:none; } } }
JAVASCRIPT
Expand for more options Login