Hidden Nav Bar

by Rowan Hamilton

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav role='navigation'>
  <ul>
    <li><img src="http://digallybugs.info/Lychee/images/Lychee_Logo.png" alt="Lychee IDE Logo" style="width:55px;height:60px;display:block;padding-left:15px;padding-bottom:8px;padding-top:14px;margin:auto;"></li>
    <li><a href="#"><i class="fa fa-home fa-fw" ></i> <span>Home</span></a></li>
    <li><a href="#"><i class="fa fa-code fa-fw"></i> <span>About</span></a></li>
    <li class="active"><a href="#"><i class="fa fa-user fa-fw"></i> <span>Clients</span></a></li>
    <li><a href="#"><i class="fa fa-envelope-o fa-fw"></i> <span>Contact Us</span></a></li>
  </ul>
</nav>
<section>
  <p>Blah Blah Blah Blah Blah</p>
</section>

SCSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
  font-family: 'Open Sans', sans-serif;
}

* {
  margin: 0;
  padding: 0;
}

nav {
  position: absolute;
  top: 0;
  right: 0px;
  width: 12px;
  height: 100%;
  float: right;
  background: #333;
  overflow: hidden;
  transition: width 0.5s ease-in-out;
  &:hover {
    width: 150px;
    ul li {
      span {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.5s ease-in-out 0.5s;
      }
    }
  }
  ul {
    list-style: none;
    li {
      a {
        padding: 10px;
        display: block;
        text-decoration: none;
        color: #fff;
        transition: color 0.3s ease;
        background: {
          image: linear-gradient(to left, transparent, transparent 100%, 100%, #fff);
          position: 100% 0;
          size: 200% 100%;
        }
        transition: background 0.5s ease-in-out;
        &:hover {
          color: #f01324;
          background-position: 0 0;
          border-top: #d3d3d3;
          border-bottom: #d3d3d3;
          border-style: solid;
          border-width: 1px;
          border-right: none;
          border-left: none;
        }
      }
      &.active a {
        position: relative;
        &:after {
          content: '';
          border: 10px solid rgba(0, 0, 0, 0);
          border-left-color: #fff;
          position: absolute;
          top: 115px;
          left: 0;
        }
        // Undecided about this. The arrow looks a little lost.
        //&:hover:after {
        //  border-right-color: dodgerblue;
        //  transition: border 0.3s ease 0.4s;
        //}
      }
      .fa {
        font-size: 1.4rem;
        margin-right: 10px;
      }
      span {
        position: absolute;
        visibility: hidden;
        opacity: 0;
        //transition: visibility 0.5s ease-in-out 0s;
      }
    }
  }
}

section {
  margin: 20px 70px;
  p {
    margin: 0 0 20px;
  }
}

a:focus,
a:hover {
  color: #f01324 !important;
}