Full Screen Responsive Navbar

Required Dependencises

font awesome

Jquery

html

<!DOCTYPE html>
<html>
   <head>
      <title>Full Screen Navigation</title>
      <link rel="stylesheet" href="style.css">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
      <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
      <script src="main.js"></script>
   </head>
   <body>
      <div class="body-wrap">
         <div class="toggle-nav">
            <i class="fa fa-bars"></i>
         </div>
         <div class="full-scr-nav slideInUp animated">
            <div class="dismiss"> <i class="fa fa-close" aria-hidden="true"></i></div>
            <div class="links pd15">
               <ul>
                  <li><a href="">Home</a></li>
                  <li><a href="">About Us</a></li>
                  <li><a href="">Services</a></li>
                  <li><a href="#">Products</a></li>
                  <li><a href="">contact Us</a></li>
               </ul>
            </div>
         </div>
      </div>
   </body>
</html>

css

<style>

*{margin: 0; padding:0;}
.toggle-nav{
  background: #555;
  position: fixed;
  right: 25px;
  top: 25px;
  padding: 10px 15px;
  cursor: pointer;
  z-index:8;
  }
.toggle-nav i{font-size:30px; color:#ddd;}
.full-scr-nav{
  height:100vh;
  width: 100%;
  position: fixed;
  background: #000;
  bottom:0px;
  opacity: 0.8;
  display: none;
  z-index:9;
}
.links{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.links ul{text-align: center;}
.links ul li{ list-style: none;     padding: 10px 0px;}
.links ul li a{
  text-decoration: none;
  color: #f0f0f0;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: sans-serif;
}
.dismiss{
position: absolute;
right: 0px;
color: #ddd;
font-size: 24px;
margin: 30px;
cursor:pointer;
}

</style>

Javascript

<script>

$(document).ready(function(){

  $('.toggle-nav').click(function(){
    $('.full-scr-nav').show();
    $(this).fadeOut();
  });

  $('.dismiss').click(function(){
      $('.full-scr-nav').slideUp();
      $('.toggle-nav').fadeIn();
  });

});

</script>