1. CSS Code
2. 
   nav {
     background-color: rgba(0, 0, 0, 0.6);
      height: 100%;
     position: fixed;
     right: -660px;
     top: 0;
     -moz-transition: right 0.2s linear;
     -o-transition: right 0.2s linear;
     -webkit-transition: right 0.2s linear;
     transition: right 0.5s linear;
     width: 660px;
     z-index: 9001;
     opacity:0.9;
    
   
    
   
    
    /* IT'S OVER 9000! */
   }
   
   
   
   
   
   nav #menuToggle {
     background:;
    
     display: block;
     position: relative;
     height: 23px;
     left: -120px;
     top: 23px;
     width: 25px;
   
    
   }
   nav #menuToggle span {
     background: white;
     display: block;
     height: 10%;
     left: 10%;
     position: absolute;
     top: 45%;
     width: 80%;
    
   
   }
   nav #menuToggle span:before, nav #menuToggle span:after {
     background: white;
     content: '';
     display: block;
     height: 100%;
     position: absolute;
     top: -250%;
     -moz-transform: rotate(0deg);
     -ms-transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
     width: 100%;
   }
   nav #menuToggle span:after {
     top: 250%;
   
   }
   nav a:nth-child(n+2) {
     color: white;
     display: block;
     font-size: 1.2em;
     font-weight:600;
     text-align:right;
     font-family:"Raleway";
     margin: 50px 55px -30px 50px;
   }
   
   nav a:nth-child(n+2):hover {
     color:#CCCC00;
     display: block;
     font-size: 1.2em;
     font-weight:600;
     text-align:right;
     font-family:"Microsoft Sans Serif";
   
   }
   
   
   
   
   nav a:nth-child(n+2):after {
   
     display: block;
     height: 4px;
     -moz-transition: width 0.2s;
     -o-transition: width 0.2s;
     -webkit-transition: width 0.2s;
     transition: width 0.2s;
     width: 0;
   }
   nav a:nth-child(n+2):hover:after {
     width: 100%;
    
   }
   
   .open {
     right: 0;
   }
   .open #menuToggle span {
     background: transparent;
     left: 10%;
     top: 45%;
   }
   .open #menuToggle span:before, .open #menuToggle span:after {
     background:#FFFFFF;
     top: 0;
     left:660px;
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
     transform: rotate(45deg);
   }
   .open #menuToggle span:after {
     -moz-transform: rotate(-45deg);
     -ms-transform: rotate(-45deg);
     -webkit-transform: rotate(-45deg);
     transform: rotate(-45deg);
   }
   
   #menuToggle .navClosed {
     -moz-transition: background 0.1s linear;
     -o-transition: background 0.1s linear;
     -webkit-transition: background 0.1s linear;
     transition: background 0.1s linear;
   }
   #menuToggle .navClosed:before, #menuToggle .navClosed:after {
     -moz-transition: top 0.2s linear 0.1s, -moz-transform 0.2s linear 0.1s;
     -o-transition: top 0.2s linear 0.1s, -o-transform 0.2s linear 0.1s;
     -webkit-transition: top 0.2s linear, -webkit-transform 0.2s linear;
     -webkit-transition-delay: 0.1s, 0.1s;
     transition: top 0.2s linear 0.1s, transform 0.2s linear 0.1s;
   }
   #menuToggle .navOpen {
     -moz-transition: background 0.1s linear 0.2s;
     -o-transition: background 0.1s linear 0.2s;
     -webkit-transition: background 0.1s linear;
     -webkit-transition-delay: 0.2s;
     transition: background 0.1s linear 0.2s;
   }
   #menuToggle .navOpen:before, #menuToggle .navOpen:after {
     -moz-transition: top 0.2s linear, -moz-transform 0.2s linear;
     -o-transition: top 0.2s linear, -o-transform 0.2s linear;
     -webkit-transition: top 0.2s linear, -webkit-transform 0.2s linear;
     transition: top 0.2s linear, transform 0.2s linear;
   }
   
   
   .boxbody{
   color:#00FF00;
   height:500px;
   width:300px;
   }

J.Query

1. My Jquery Function
   
2. (function($){
       // Menu Functions
       $(document).ready(function(){
         $('#menuToggle').click(function(e){
       var $parent = $(this).parent('nav');
         $parent.toggleClass("open");
         var navState = $parent.hasClass('open') ? "hide" : "show";
          
         $(this).attr("title", navState + " navigation");
        
        
                    
              
               // Set the timeout to the animation length in the CSS.
               setTimeout(function(){
                   console.log("timeout set");
                   $('#menuToggle > span').toggleClass("navClosed").toggleClass("navOpen");
                  
               }, 200);
               e.preventDefault();
          
          
          
          
         });
      
     });
   })(jQuery);
   
   
   
   
   
   

My HTML Code

1. <nav>
    
     <a href="" id="menuToggle" title="show menu">
    
      <span class="navClosed"><i>show menu</i></span>   </a>
       <a href="index.html" title="Home Page">HOME PAGE</a>
     <a href="knowus.html" title="Get To Know US">GET TO KNOW US</a>
     <a href="services.html" title="Services">SERVICES</a>
     <a href="portfolio.html" title="Portfolio">PROJECTS</a>
     <a href="careers.html" title="Careers">CAREERS</a>
    <!-- <a href="news.html" title="News">NEWS</a> -->
     <a href="contactus.html" title="Contact-Us">CONTACT US</a></br>
      <div class="social">
              <a href="http://www.facebook.com"><img id="picfb" src="images/social/facebook.png"></a>
           <a href="http://www.linkedin.com"><img id="piclinkedin" src="images/social/linkedin.png"></a>
           <a href="http://www.twitter.com"><img id="pictwitter" src="images/social/pinterest.png"></a>
           <a href="http://www.twitter.com"><img id="picyoutube" src="images/social/instagram.png"></a>    </div>
   </nav>
     <script src="js/index.js"></script>