Sidebar menu with hover effect

Sidebar menu with hover effect

by ac_coding

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="slider-nav">
  <ul>
    <li>
      <p>Option</p>
    </li>
    <li>
      <p>Option</p>
    </li>
    <li>
      <p>Option</p>
    </li>
    <li>
      <p>Option</p>
    </li>
    <li>
      <p>Option</p>
    </li>
    <li>
      <p>Option</p>
    </li>
    <li>
      <p>Option</p>
    </li>
    <li>
      <p>Option</p>
    </li>
    <li>
      <p>Option</p>
    </li>
    <li>
      <p>Option</p>
    </li>
    <li>
      <p>Option</p>
    </li>
    <li>
      <p>Option</p>
    </li>
    <li>
      <p>Option</p>
    </li>
    <li>
      <p>Option</p>
    </li>
    <li>
      <p>Option</p>
    </li>
    <li>
      <p>Option</p>
    </li>
    <li>
      <p>Option</p>
    </li>
    <li>
      <p>Option</p>
    </li>
    <li>
      <p>Option</p>
    </li>
    <li>
      <p>Option</p>
    </li>
    <li>
      <p>Option</p>
    </li>
    <li>
      <p>Option</p>
    </li>
  </ul>
</div>

CSS

body {
  background: red;
}

#slider-nav {
  text-align: right;
  color: #fff;
  height: 100%;
  position: absolute;
  right: 80px;
  z-index: 10;
  display: table;
}

#slider-nav ul {
  display: table-cell;
  vertical-align: middle;
  list-style: none;
  height: 100%;
  overflow: hidden;
}

#slider-nav ul li {
  cursor: pointer;
  position: relative;
  height: auto;
}

#slider-nav ul li p {
  padding-right: 30px;
  opacity: 0;
  margin: 0;
  transition-property: padding, opacity;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.18, 0.14, 0.2, 1);
}

#slider-nav ul li.hover-sib:after {
  width: 20px
}

#slider-nav ul li:hover p {
  opacity: 1;
  padding-right: 40px;
}

#slider-nav ul li:after {
  content: '';
  width: 10px;
  height: 2px;
  background-color: #fff;
  position: absolute;
  margin: 0;
  right: 0;
  top: 50%;
  transition-property: width, height, right, margin;
  transition-duration: 0.4s;
  transition-timing-function: cubic-bezier(0.18, 0.14, 0.2, 1);
}

#slider-nav ul li:hover:after {
  width: 30px
}

#slider-nav ul li.current:after {
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
}

#slider-nav ul li.current:hover:after {
  width: 10px right: 10px
}

#slider-nav ul li.current.hover-sib:after {
  width: 10px right: 5px
}

JavaScript

$('#slider-nav ul li').hover(function() {
  $(this).prev().addClass('hover-sib');
  $(this).next().addClass('hover-sib');
}, function(e) {
  $(this).prev().removeClass('hover-sib');
  $(this).next().removeClass('hover-sib');
});