Simple Customized navigation with mobile Responsive... useing css html or js code

For supporting file is use in online link below :-

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

HTML

<header>    
<div class="logo">Logo</div>

    <nav>

        <ul>

            <li><a href="#" >Home</a></li>

            <li><a href="#">About</a></li>

            <li class="sub-menu"><a href="#">Services</a>

            <ul>

                <li><a href="#">Link 1</a></li>

                <li><a href="#">Link 2</a></li>

                <li><a href="#">Link 3</a></li>

                <li><a href="#">Link 4</a></li>

                <li><a href="#">Link 5</a></li>

            </ul>

            </li>

            <li><a href="#">Term</a></li>

            <li class="sub-menu"><a href="#">Portfolio</a>

              <ul>

                <li><a href="#">Link 1</a></li>

                <li><a href="#">Link 2</a></li>

                <li><a href="#">Link 3</a></li>

                <li><a href="#">Link 4</a></li>

                <li><a href="#">Link 5</a></li>

            </ul>

            </li>

            <li><a href="">Contact</a></li>

            </ul>

        </nav>

 <div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></div>

</header>

Css

-----------------

<style type="text/css">

 body {margin: 0px; padding: 0px; font-family: sans-serif;}

 header{position: absolute; top: 0px; left: 0px; padding: 0 100px; background:#f35858 ; width: 100%; box-sizing: border-box;}

    header .logo{color: #fff; height: 50px; line-height: 50px; font-size: 24px; float:left; font-weight: bold;}

    header nav{ float: right;}

    header nav ul{margin: 0px; padding: 0px; display: flex;}

    header nav ul li{list-style: none; position: relative;}

    header nav ul li.sub-menu:before{content: '\f107'; font-family: fontAwesome; line-height: 50px; color: #fff; right: 5px; position: absolute;}

    header nav ul li.active.sub-menu:before{content: '\f106'; }

    

    

    header nav ul ul{ position: absolute; left: 0px; background-color: #333; display: none; width: 100%; z-index: 9;}

    

    header nav ul li.active > ul{display: block;}

    header nav ul li ul li{display: block; width: 200px; background-color: #ef5a5a }

    

    

  /*   header nav ul li ul li{display: block; width: 200px;}*/

    

    

    header nav ul li a{ height: 50px; line-height: 50px; padding: 0 20px; color: #fff; text-decoration: none; display: block;} 

    header nav ul li a:hover, 

    header nav ul li a:active{ color: #fff; background: #2196f3;} 

    .menu-toggle{ display: none;}

    

    

    @media(max-width:991px){

        header{ padding: 0 20px;}

       .menu-toggle {

    display: block;

    color: #fff;

    right: 0px;

    float: right;

    padding-top: 15px;

}

        header nav{position: absolute; width: 100%; height: calc(100vh - 50px); background-color: #333; top: 50px; left: -100%; transition: 0.5s;}

        header nav.active{left: 0px;}

        header nav ul {display: block; text-align: center;}

        header nav ul li a{ border-bottom: 1px solid rgba(0,0,0,.2);}

        

        header nav ul li:active ul{display: block; background: #003e6f;}

        header nav ul li ul li{ width: 100%;}

    }

</style>

Js

-----------------

<script type="text/javascript">

$(document).ready(function(){

    $('.menu-toggle').click(function(){

        $('nav').toggleClass('active')

        

    })

    $('ul li').click(function(){

        

        $(this).siblings().removeClass('active');

        $(this).toggleClass('active');

        

    });

    

    

});

    

    </script>