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