JSFiddle - React, Tailwind, and code Playground

by Sasha Ulych

HTML

<div class="side-menu">
        	<ul>
        		<li><a href="#section-1"><span>Home</span></a></li>
        		<li><a href="#section-2"><span>Kounsel</span></a></li>
        		<li><a href="#section-3"><span>Download Now</span></a></li>
        		<li><a href="#section-4"><span>Phone</span></a></li>
        		<li><a href="#section-5"><span>Video</span></a></li>
        		<li><a href="#section-6"><span>Search</span></a></li>
        		<li><a href="#section-7"><span>Payment</span></a></li>
        		<li><a href="#section-8"><span>Earning</span></a></li>
        		<li><a href="#section-9"><span>Messaging</span></a></li>
        		<li><a href="#section-10"><span>Collaboration</span></a></li>
        		<li><a href="#section-11"><span>Appointment</span></a></li>
                <li><a href="#section-12"><span>Pricing</span></a></li>
                <li><a href="#section-13"><span>Feature</span></a></li>
                <li><a href="#section-14"><span>Faq</span></a></li>
        	</ul>
        </div>

CSS

body {
  background: #cecece;
}
.side-menu{
			position: fixed;
			right: 28px;
			top: 50%;
			margin-top: -325px;
			text-align: right;
			width: 220px;
			z-index: 100;
			opacity: 0;
			visibility: hidden;
			/*transition: 0.6s;*/
		}
		.side-menu.active{
			opacity: 1;
			visibility: visible;
			transition: 0.6s;
		}
		.side-menu li{
			width: 100%;
			display: inline-block;
			margin: 0 0 5px;
		}
		.side-menu li a{
			width: 100%;
			display: inline-block;
			vertical-align: top;
			position: relative;
		}
		.side-menu li a span{
			font-size: 16px;
			font-weight: bold;
			letter-spacing: 0.5px;
			color: #d7d7d7;
			position: relative;
			background: #fff;
			box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.1);
			padding: 10px 35px 10px 25px;
			display: inline-block;
			text-transform: uppercase;
			opacity: 0;
			visibility: hidden;
			-webkit-transition: all 0.35s ease 0s;
			   -moz-transition: all 0.35s ease 0s;
			    -ms-transition: all 0.35s ease 0s;
			     -o-transition: all 0.35s ease 0s;
			        transition: all 0.35s ease 0s;
		}
		.side-menu li a::after{
			content: '';
			height: 10px;
			width: 10px;
			background: #d7d7d7;
			display: inline-block;
			margin: 0 -10px 0 10px;
			border-radius: 100%;
			position: absolute;
			right: 25px;
			top: 17px;
			-webkit-transition: all 0.35s ease 0s;
			   -moz-transition: all 0.35s ease 0s;
			    -ms-transition: all 0.35s ease 0s;
			     -o-transition: all 0.35s ease 0s;
			        transition: all 0.35s ease 0s;
		}
		.side-menu li:hover a span,.side-menu li.active a span{
			opacity: 1;
			visibility: visible;
			color: #4895d9;
		}
		.side-menu li:hover a::after,.side-menu li.active a::after{
			background: #4895d9;
		}

JavaScript

$('body').mousemove(function( event ) {
    $('.side-menu').addClass('active');
    setTimeout(function(){
            $('.side-menu').removeClass('active');
    }, 5000);
});

$(window).scroll(function() {
    $('.side-menu').addClass('active');
    setTimeout(function(){
        $('.side-menu').removeClass('active');
    }, 5000);
});