I am trying to implement a side menu like the one in this website. But after many hours of coding I couldn't make it to work properly. Can you help me please?
Here is the demo of what I have tried so far, and the code snippet below.
$(function() {
$('.slide-left-right').mouseenter(function() {
var w = $(this).find('span:first').width();
$(this).find('span:first').css({
'background-color': '#000',
'color': '#fff'
});
$(this).find('span:first').animate({
width: '0px'
}, 0);
$(this).find('span:first').animate({
width: w + 'px'
}, 200);
});
$('.slide-left-right').mouseleave(function() {
$(this).children('span').css({
'background-color': '#fff',
'color': '#000'
});
});
});
.sidebar-nav {
position: absolute;
top: 0;
width: 200px;
margin: 0;
font-size: 13px;
padding: 0;
list-style: none;
}
.sidebar-nav li {
width: 200px;
text-indent: 35px;
line-height: 40px;
}
.sidebar-nav li a {
text-decoration: none;
color: #000;
}
.sidebar-nav li a:hover,
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.slide-left-right > a {
text-decoration: none;
color: black;
}
.slide-left-right {
padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sidebar-nav">
<li class="slide-left-right">
<a href="index.html"><span>HOME</span></a>
</li>
<li class="slide-left-right">
<a href="#"><span>WORK</span></a>
</li>
<li class="slide-left-right">
<a href="#"><span>APPROACH</span></a>
</li>
<li class="slide-left-right">
<a href="#"><span>ABOUT</span></a>
</li>
<li class="slide-left-right">
<a href="#"><span>CONTACT</span></a>
</li>
</ul>