Toggle Menu

by Ravindra Athreya

HTML

<div class="box">
  <div class="head">
    <span class="caption">
      <h4>Running</h4>
      <h5>gender</h5>
       <ul>
        <li><a href="#">Men</a></li>
        <li><a href="#">Women</a></li>
        <li><a href="#">Kids</a></li>
       </ul>
      <h5>category</h5>
       <ul>
        <li><a href="#">Shoes</a></li>
        <li><a href="#">Clothing</a></li>
        <li><a href="#">Gear</a></li>
       </ul>
    </span>
  </div>
  <img src="https://dl.dropboxusercontent.com/u/330966/static/running01.jpg" />
</div>

CSS

@import url('http://fonts.googleapis.com/css?family=Dosis:300,600');
.box, .box:before, .head, .caption  {display:block;}
.box:before, .head, .caption  {position:absolute;}
.box {
  position:relative;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  width:500px;
  height:330px;
  margin:5rem auto;
  padding-left:0px;
  overflow:hidden;
  background:skyblue;
  -webkit-box-shadow:7px 7px 0px rgba(0,0,0,0.2);
  -moz-box-shadow:   7px 7px 0px rgba(0,0,0,0.2);
  box-shadow:        7px 7px 0px rgba(0,0,0,0.2);
  -webkit-transition: all 0.7s;
  -moz-transition: all 0.7s;
  -ms-transition: all 0.7s;
  -o-transition: all 0.7s;
  transition: all 0.7s;
}
.box:before  {
  content:'top running collections';
  color:#000;
  top:13px;
  right:13px;
  padding:10px;
  background:white;
  letter-spacing:2px;
  font-size:1rem;
  font-weight:600;
  text-transform:uppercase;
  -webkit-box-shadow:1px 1px 0px skyblue,
                     2px 2px 0px skyblue,
                     3px 3px 0px skyblue;
  -moz-box-shadow:1px 1px 0px skyblue,
                  2px 2px 0px skyblue,
                  3px 3px 0px skyblue;
  box-shadow:1px 1px 0px skyblue,
             2px 2px 0px skyblue,
             3px 3px 0px skyblue;
  -webkit-transition: all 0.5s;
  -moz-transition:    all 0.5s;
  -ms-transition:     all 0.5s;
  -o-transition:      all 0.5s;
  transition:         all 0.5s;
}
.box:hover  {
  padding-left:100px;
  -webkit-box-shadow:3px 3px 0px rgba(0,0,0,0.5);
  -moz-box-shadow:   3px 3px 0px rgba(0,0,0,0.5);
  box-shadow:        3px 3px 0px rgba(0,0,0,0.5);
}
.box:hover:before  {right:-300px;}
.head {
  height:100%;
  width:650px;
  top:0px;
  left:-155px;
  margin:0px;
  padding-left:20px;
  background:transparent;
  -webkit-transition: all 0.45s;
  -moz-transition:    all 0.45s;
  -ms-transition:     all 0.45s;
  -o-transition:      all 0.45s;
  transition:         all 0.45s;
}
.head:hover  {
  left:0px;
}
.caption {
  background:skyblue;
 ...