1

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>

3 Answers 3

1

You can make the same animation with CSS transitions, and use :before and :after pseudo elements for the backgrounds.

jsFiddle

body {
  background: silver;
}
.sidebar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.sidebar-nav li {
  margin: 0 0 10px;
}
.sidebar-nav li a {
  text-decoration: none;
  display: inline-block;
  color: black;
  position: relative;
  padding: 10px 15px;
  transition: color .25s;
}
.sidebar-nav li a:hover {
  color: white;
}
.sidebar-nav li a:hover:before {
  width: 100%;
}
.sidebar-nav li a:before,
.sidebar-nav li a:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
.sidebar-nav li a:before {
  background: black;
  z-index: -1;
  width: 0;
  transition: width .25s;
}
.sidebar-nav li a:after {
  background: white;
  z-index: -2;
  width: 100%;
}
<ul class="sidebar-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Work</a></li>
  <li><a href="#">Approach</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

Another way is using linear-gradient(), the styling can be much simpler without using any pseudo elements.

jsFiddle

.sidebar-nav {
  background: silver;
  list-style: none;
  padding: 5px 0;
  margin: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.sidebar-nav li a {
  text-decoration: none;
  display: inline-block;
  padding: 10px 15px;
  margin: 5px 10px;
  background: linear-gradient(to right, black 50%, white 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  color: black;
  transition: .25s;
}
.sidebar-nav li a:hover {
  background-position: 0 0;
  color: white;
}
<ul class="sidebar-nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Work</a></li>
  <li><a href="#">Approach</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>

0
1

Instead of this jquery you can use css. http://ianlunn.github.io/Hover/ A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.

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

   $('.slide-left-right').mouseenter(function() {

var w = $(this).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'});

   });

});
1
  • It is buggy , but with this simple change it will work right away. Jan 5, 2017 at 18:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.