Hover Menu

Selection by hovering over a horizontal list menu .

by javad ebrahimi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/core.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<div class="container">

  <ul class="menu">
    <li>پروتئین</li>
    <li>حبوبات</li>
    <li>لبنیات</li>
    <li>سبزیجات</li>
    <li>پروتئین</li>
    <li>حبوبات</li>
    <li>لبنیات</li>
    <li>سبزیجات</li>
  </ul>
</div>

SCSS

body { 
padding: 0; 
margin: 0;
font-family:"segoe UI";
box-sizing:border-box;
}

.container{ 
  width: 100%;
  overflow: hidden;
}

.menu {
  width: 1000%;
  padding: 20px 0;
  margin: 0;
background: #fff;
  
    li {
      list-style: none;
      display: inline-block;
      transition: 100ms;
      cursor:pointer;
        background: #fff;
        margin: 0 10px;
        padding:7px 30px;
        border-radius:5px;
        background: #f2f2f2;
    }
    
    li:hover{
          background: rebeccapurple;
          color:#fff;
    }
}

JavaScript

$('.menu').mousemove(function(e) {

  // Find the width of all menu elements
  var totalWidth = 0;
  $(this).find('li').each(function(i) {
    totalWidth += parseInt($(this).outerWidth(true) + 10, 10);
  });

  // Find the cursor ratio and position the menu
  var l = (window.innerWidth - totalWidth) * e.pageX / (window.innerWidth - 20);
  $(this).find('li').css('transform', 'translateX(' + l + 'px)');

});