Flat Sidebar

Preview:
 



HTML

Code

<nav>
  <div class="icon fi-list"></div>
   
  <header><a href="#">Header</a></header>
   
  <ul>
  <li><a href="#">First</a></li>
  <li><a href="#">Second</a></li>
  <li><a href="#">Third</a></li>
  <li><a href="#">Fourth</a></li>
  <li><a href="#">Fifth</a></li>
  <li><a href="#">Sixth</a></li>
  <li><a href="#">Seventh</a></li>
  </ul>
</nav>

<div id="content">
  <div id="wrap">
  <h1>Flat sidebar</h1>
  <p>Animations, fadeouts and all.. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum officia impedit consectetur voluptas esse beatae quos mollitia quibusdam molestiae magni laboriosam ea minus animi. Voluptas dignissimos exercitationem animi qui assumenda perspiciatis consectetur eum excepturi veritatis harum optio vel dolorem culpa doloribus a? Eius expedita rerum quidem quibusdam doloribus vel voluptates?</p>
  </div>
</div>


CSS

Code

@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400,600');
@import url('http://tyy.li/foundation-icons/foundation-icons.css');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

body{
  background: #000;
  font-family: 'Open Sans', sans-serif;
  color: #333;
}

nav{
  width: 300px;
  height: 100%;
  background: #333;
  position: fixed;
  top: 0; left: -236px;
  z-index: 2;
  transition: left .7s;
  -webkit-transition: left .7s;
}

nav:hover{
  left: 0;
}

nav:hover ~ #content{
  opacity: .3;
}

nav a, nav a:hover{
  text-decoration: none;
}

nav .icon{
  width: 32px;
  height: 32px;
  float: right;
  margin: 20px 16px 0 0;
  font-size: 36px;
  text-align: center;
  line-height: 32px;
  color: rgba(0,0,0,.3);
  transition: opacity .7s;
  -webkit-transition: opacity .7s;
}

nav:hover .icon{
  opacity: 0;
}

nav header{
  margin: 40px 20px 30px;
}

nav header a{
  font-size: 2.7em;
  font-weight: 300;
  text-transform: uppercase;
  color: rgba(240,240,240,.7);
}

nav header a:hover{
  color: #eee;
}

nav ul{
  padding-left: 0;
  list-style: none;
}

nav li a{
  display: block;
  border-left: 3px solid transparent;
  padding: 16px 20px;
  font-weight: 600;
  color: rgba(200,200,200,.5);
}

nav li a:hover{
  background: rgba(0,0,0,.1);
  border-color: #1b9;
  color: #eee;
}

nav li a:before{
  content: '';
  width: 0;
  height: 0;
  display: inline-block;
  margin: 3px 0 0 -20px;
  border: 8px solid transparent;
}

nav li a:hover:before{
  border-left-color: #1b9;
}

#content{
  width: 100%;
  height: 100%;
  background: #f0f0f0;
  position: fixed;
  top: 0; left: 0;
  z-index: 0;
  overflow: auto;
  transition: opacity .7s;
  -webkit-transition: opacity .7s;
}

#content #wrap{
  width: 900px;
  min-height: 100%;
  background: #fff;
  position: absolute;
  top: 0; left: 50%;
  margin-left: -450px;
  padding: 30px 20px;
}

#content h1{
  font-size: 3.2em;
  font-weight: 300;
  color: #444;
}

#content p{
  padding: 4px 0;
  line-height: 1.5em;
}

@media screen and (max-width: 1000px){
  #content{
  background: #fff;
  }
   
  #content #wrap{
  width: 90%;
  left: auto;
  margin-left: 10%;
  }
}

Total comments: 0
Name *:
Email:
Code *: