zoomin button with links

by Rinas

HTML

<nav class="">
  <p>bread<br>meat<br>bread</p>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Clients</a></li>
  </ul>
</nav>

CSS

@import url(http://fonts.googleapis.com/css?family=Erica+One);
nav {
  transition:all .55s;
  background-color:#2e2e2e;
  width:30px;
  height:30px;
  border-radius:100%;
  position:fixed;
  top:50%;
  left:50%;
  margin-top:-15px;
  margin-left:-15px;
  font-family: 'Erica One', cursive;
  p {
    transition:all .25s;
    position:absolute;
    top:5px;
    left:5px;
    text-align:center;
    color:white;
    font-size:0.4em;
    cursor:pointer;
    &:hover {
      transition:all .25s;
      font-size:.8em;
      color:#963;
      top:-4px;
      left:-5px;
    }
  }
  ul {
    transition:all .25s;
    position:absolute;
    left:-10px;
    color:transparent;
    top:12px;
    text-align:center;
    font-size:0px;
    a {
      font-size:0.8em;
      text-align:center;
      color:white;
      text-decoration:none;
      font-family:arial;
    }
  }
}
.expand {
  transition:all .5s;
  -webkit-transform:rotate(360deg);
  background-color:#2e2e2e;
  width:100px;
  height:100px;
  border-radius:100%;
  position:fixed;
  top:50%;
  left:50%;
  margin-top:-50px;
  margin-left:-50px;
  p {
    display:none;
  }
  ul {
    position:absolute;
    left:23px;
    top:15px;
    text-align:center;
    font-size:16px;
    a {
      font-size:0.8em;
      text-align:center;
      color:white;
      text-decoration:none;
      font-family:arial;
    }
  }
}

JavaScript

$("nav").click(function(){
  $(this).toggleClass("expand");
});