Codice HTML:

<!-- INIZIO CONTAINER MENU -->


	<div id="contentmenu">
    
    
    	<!-- Inizio Menu -->
      <div id="out" style="display: none;">
          <ul>
              <a href="#"><li>Homepage</li></a>
              <a href="mailto:tuamail@email.it"><li>Contact Me</li></a>
              <a href="#" target="_blank"><li>More Tutorial</li></a>
              <a href="#" target="_blank"><li>About Me</li></a>            
          </ul>
      </div>
    	<!-- Fine Menu -->



    	<!-- Inizio Pulsante -->
      <div id="menu">
      <span class="entypo-menu"></span> 
      </div>
    	<!-- Fine Pulsante -->
   
   
  	</div>    
    
<!-- FINE CONTAINER MENU -->
    
    
<!-- Libreria jQuery  -->
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

Codice CSS:

@import url(http://fonts.googleapis.com/css?family=Roboto:300);
@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

* {
padding: 0;
margin: 0;
}

body {
background: #FFCC68;
font-family: 'Roboto', sans-serif;
overflow-x: hidden;
}

#menu{
width: 40px;
height: 40px;
background: #08cbc4;
cursor: pointer;
box-shadow: 1px 2px 1px 0px #007D78;
color: #ffffff;
text-align: center;
font-size: 35px;
margin: 15px;
float:left;
}

#out {
width: 250px;
height: 100vh;
background: #08cbc4;
float:left;
}

#out ul{
width: 100%;
color: #ffffff;
}

#out li{
height: 50px;
border-bottom: 1px solid #59DAD5;
line-height: 3.5;
padding-left: 7%;
}

#out li:hover{
background: #59DAD5;
cursor: pointer;
}

a:link{
	text-decoration: none;
    color: #ffffff;
}

a:visited{
	text-decoration: none;
    color: #ffffff;
}

a:active{
	text-decoration: none;
    color: #ffffff;
}

#site {
width: 100%;
font-size: 19px;
color: #ffffff;
padding-top: 25px;
}

Codice JS:

    // inserire nel BODY tra i tag SCRIPT
      
          $( "#menu" ).click(function() {
            $( "#out" ).toggle( "fast" );
          });