Click Navigation Show In Left Side..

<!--Use Font awesome cdn file online path-->

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

HTML

<button class="click-button">Hit Me</button>

<div class="left-nav">

<div class="inout"><i class="fa fa-angle-right" aria-hidden="true"></i></div>

<div class="dropdown">

<ul>

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

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

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

<li><a href="#">Product &nbsp;<i class="fa fa-angle-down" aria-hidden="true"></i></a>

<ul>

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

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

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

</ul>

</li>

</ul>

</div>

</div>

CSS

.click-button{ background-color:#c30f0f; padding:5px; border:1px solid #8b0a0a; border-radius:4px; text-align:center; color:#FFFFFF; line-height:28px; width:150px; height:45px; margin-left:70px; margin-top:30px;}

.left-nav{ float:left !important; width:250px; height:550px; background-color:#ff35fd; color:#fff; padding:20px; position:absolute; top:85px; left:0px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; transform:translateX(-250px); transition:all ease-in .32s;}

.show{ transform:translateX(0px) !important;}

.inout {

  background-color: #ffffff;

  border: 1px solid #e4e4e4;

  border-radius: 50%;

  color: #000;

  font-size: 35px;

  height: 50px;

  left: 235px;

  padding-left: 20px;

  padding-top: 3px;

  position: absolute;

  top: -20px;

  width: 50px;

}

.dropdown{ float:left; width:200px; height:auto; display:block;}

.dropdown ul{ list-style:none; text-decoration:none; float:left;}

.dropdown ul li{ padding:10px 12px; text-align:left;}

.dropdown ul li a{ font-size:14px; font-family:Verdana, Geneva, sans-serif; color:#FFFFFF; text-align:center;}

.dropdown ul ul{ padding:0 15px; display:none; height:0px;}

.bg-active{ background-color:#FFFFFF !important; padding:10px 5px; display:block; }

   

JS

<!-- For navigation active and hidden in left side and arrow direction change in click movement  -->

<script type="text/javascript">

$(document).ready(function() {

    $('.click-button, .inout').click(function(){

 $('.left-nav').toggleClass('show');

if($('.inout i').hasClass('fa-angle-right'))

{

$('.inout i').removeClass('fa-angle-right');

$('.inout i').addClass('fa-angle-left');

}

else

{

$('.inout i').removeClass('fa-angle-left');

$('.inout i').addClass('fa-angle-right');

}

});

});

</script>

<!--For Accordion -->

<script type="text/javascript">

$(document).ready(function(e) {

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

$(this).parent().find('ul').slideToggle(500);

});

});

</script>