<h1>Flip Out Navigation Menu</h1>

<p>by Cody Hadsall</p>

<p class="desc">A neat menu effect that is compatible with both desktops and touch screens.  On desktop, simply hover the menu icons to see the effect.  On touch screen devices, touch an icon to see the menu flip out.</p>

<div id="nav" class="nav">

  <div class="icon">
  
    <ul>
      <li><a title="Home" href="#"><i class="fa fa-home"></i></a></li>
      <li><a title="Search" href="#"><i class="fa fa-search"></i></a></li>
      <li><a title="Contact" href="#"><i class="fa fa-phone"></i></a></li>
      <li><a title="Settings" href="#"><i class="fa fa-cogs"></i></a></li> 
    </ul>
    
  </div>
  
  <div class="text">
    
    <ul>
      <li><a title="Home" href="#">Home</a></li>
      <li><a href="#" >Search</a></li>
      <li><a href="#" >Contact</a></li>
      <li><a href="#" >Settings</a></li>
    </ul>
    
  </div>
  
  <div class="info">
          
    <div class="logo"><a href="http://www.ccidesign.wordpress.com">CCI Design Works</a></div>
          
    <div class="quote"><a href="mailto:hadsallc@yahoo.com">hadsallc@yahoo.com</a></div>
        
  </div>
    
</div>

@import url(https://fonts.googleapis.com/css?family=Cherry+Cream+Soda);

body {
  width: 100%; 
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: hsla(15, 100%, 50%, 1);
  font-family: 'Cherry Cream Soda', cursive;
  
    & h1 {
    text-align: center;
    margin-top: 5%;
    color: hsla(38, 100%, 50%, 0.9);
    letter-spacing: 1px;
    text-shadow: 1px 1px hsla(15, 30%, 15%, 1),
      -1px -1px hsla(15, 100%, 100%, 1);
    }
  
  & p {
    text-align: center;
  }
}

.desc {
  margin: 10vh auto 0;
  width: 60vw;
  line-height: 1.5;
  font-size: 1.5em;
  color: hsla(30, 100%, 75%, 1);
}

.nav {
  height: 100%;
  position: fixed;
  left: -2em;
  top: 0;
  z-index: 1000;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.icon {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 990;
  height: 100%;
  background: hsla(182,18%,11%,1);
  
    & li {
    border-bottom: 1px solid hsla(182,18%,6%,.3);
    list-style-type: none;
    }
    & a {
      display: block;
      width: 64px;
      height: 64px;
      line-height: 64px;
      text-align: center;
      font-size: 1.6em;
      color: hsla(0,0%,60%,1);
      text-shadow: 0 1px 0 hsla(0,0%,0%,1);
      transition: all .5s ease-out;
      
      & img {
        height: 50%;
      }
   
        &:hover {
          color: hsla(255,255%,255%,1);
          transform: translateX(10px) scale(1.1)
        }
    }
}

.nav:hover .text {
  transform: rotateY(0deg)
}

.text {
  position: absolute;
  left: 63px;
  top: 0;
  z-index: 980;
  height: 100%;
  background: hsla(182,18%,11%,1);
  border-right: 1px solid hsla(0,0%,0%,.3);
  transition: transform .6s linear;
  backface-visibility: hidden;
  transform-origin: left;
  transform: perspective(1000px) rotateY(90deg);
  
    & li {
      border-bottom: 1px solid hsla(0,0%,0%,.3);
    }
    & a {
      display: block;
      width: 200px;
      height: 64px;
      line-height: 64px;
      text-indent: 1em;
      font-size: 1.4em;
      text-decoration: none;
      color: hsla(0,0%,60%,1);
      text-shadow: 0 1px 0 hsla(0,0%,0%,1);
      transition: all 1s ease;
  
         &:hover {
            color: hsla(255,255%,255%,1);
            transform: translateX(10px);
         }
    } 
}

.nav:hover .info {
  left: 0;
  opacity: 1;
  transition: opacity 1s ease-in .5s
}

.info {
  position: absolute;
  padding-left: 2em;
  bottom: 30px;
  z-index: 999;
  width: 264px;
  color: hsla(255,255%,255%,1);
  text-align: center;
  line-height: 1.6;
  opacity: 0;

    .logo a, .quote a {
      width: 100%;
      height: auto;
      margin: 0 auto;
      color: hsla(255,255%,255%,1);
      opacity: 0.6;
      overflow: hidden;
      transition: all 0.5s ease;
      text-decoration: none;

      &:hover {
        opacity: 1;
      }
    }
  .name {
    font-size: 2em;
    font-weight: bold;
    letter-spacing: 2px;
    color: hsla(0,0%,26%,1);
    text-shadow: -1px -1px hsla(0,0%,31%,1),
      1px 1px hsla(0,0%,7%,1);
  }
  .quote {
    color: #444;
    text-shadow: 1px 1px hsla(0,0%,7%,1);
  }
  
  .social a {
    font-size: 2em;
    color: hsla(0,0%,20%,1);
    letter-spacing: 0.5em;
    text-shadow: 1px 1px hsla(0,0%,27%,1),
      -1px -1px hsla(0,0%,7%,1);
    transition: all 0.5s ease;
    
      &:hover {
        color: hsla(255,255%,255%,1);
        text-shadow: -1px -1px hsla(0,0%,34%,1),
          1px 1px hsla(0,0%,7%,1);
      }
   }
}

@media screen and ( max-height:550px ) {
    .info {
      display: none;
    }
}

@media screen and ( max-width:450px ) {
    h1 {
      font-size: 7.5vw;
    }
}