Сдвиг надписи относительно рисунка

Question

Есть код

let sidemenu = document.querySelector('#sidemenu'); // Берём блок с меню

sidemenu.addEventListener('mouseenter', function(e) { // Вешаем обработчик на меню, чтобы использовать делегирование.
  if(e.target.classList.contains('leftside')) { // Если мы наводим на .leftside, то
    e.target.closest('#sidemenu').classList.add('-short'); // берём родителя #sidemnu и вашеем ему класс .-short
  }
}, true);

sidemenu.addEventListener('mouseleave', function(e) {
  if(e.target.classList.contains('leftside')) {
    e.target.closest('#sidemenu').classList.remove('-short');
  }
}, true);

* {
  list-style: none;
  text-decoration: none;
  margin: 0;
  padding: 0;
}

#sidemenu {
  background: #afafaf;
  display: inline-flex;
  flex-direction: column;
  display: block;
  width: 420px;
  border-right: 1px solid #000;
}

#sidemenu li {
  padding: 6px 0;
  background: #fff;
  display: flex;
  /*display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;*/
}

#sidemenu li:hover {
  background: lightgreen;
}

#sidemenu li a {
  color: #000;
}

#sidemenu li:hover a,
#sidemenu li:hover .fa {
  color: #fff;
}

#sidemenu li .fa {
  /*margin-left: 20px;
  margin-right: 10px;*/
  display: inline-block;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.leftside {
  margin-left: 16px;
  display: inline-block;
  width: 30px;
  height: 30px;
  display: flex;
}

.rightside {
  margin-right: 16px;
  /* display: none;*/
  visibility: hidden;
  width: 30px;
  height: 30px;
  display: inline-flex;
}

.centerplace {
  width: 328px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /*
  transition: .6s;
  overflow: hidden;
  transform: translateX(-328px);
  */
}

.nestedblock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}


/*
#sidemenu.active .centerplace {
    transform: translateX(0px);
    transition-delay: .4s;
}

#sidemenu{
   width: 60px;
}

#sidemenu.active{
    width: 388px;
}
*/


/* Иное состояние */


/*
.leftside:hover + .centerplace,
.leftside:hover + .centerplace + .nestedblock,
.leftside:hover + .rightside{
    display: none;
}
 */

#sidemenu.-short {
  flex-direction: column;
}

#sidemenu.-short .centerplace,
#sidemenu.-short .centerplace .nestedblock,
#sidemenu.-short .rightside {
  display: none;
}

<html>

<head>
  <link rel="stylesheet" href="testsite.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- <script>
 
document.addEventListener("DOMContentLoaded", function() {

    let sidemenu = document.querySelector('#sidemenu');
    sidemenu.addEventListener("mouseover", checkitem);
    sidemenu.addEventListener("mouseleave", checkitem);
 
    function checkitem(event) {
        if (event.target && event.target.closest(".fa")) sidemenu.classList.add("active");
        if (event.type === "mouseleave") sidemenu.classList.remove("active");
    }
});
</script> -->

</head>
<!-- <link rel="stylesheet" href="testsite.js"> -->

<body>
  <ul id="sidemenu">
    <li>
      <div class="leftside">
        <i class="fa fa-home"></i>
      </div>
      <div class="centerplace">
        <a href="" class="nestedblock">Техника для кухни</a>
      </div>
      <div class="rightside">
        <i class="fa fa-home"></i>
      </div>
    </li>
    <li>
      <div class="leftside">
        <i class="fa fa-home"></i>
      </div>
      <div class="centerplace">
        <a href="" class="nestedblock">Бытовая техника для дома</a>
      </div>
      <div class="rightside">
        <i class="fa fa-home"></i>
      </div>
    </li>
    <li>
      <div class="leftside">
        <i class="fa fa-home"></i>
      </div>
      <div class="centerplace">
        <a href="" class="nestedblock">Ноутбуки и компьютеры</a>
      </div>
      <div class="rightside">
        <i class="fa fa-home"></i>
      </div>
    </li>
    <li>
      <div class="leftside">
        <i class="fa fa-home"></i>
      </div>
      <div class="centerplace">
        <a href="" class="nestedblock">Комплектующие</a>
      </div>
      <div class="rightside">
        <i class="fa fa-home"></i>
      </div>
    </li>
    </li>
  </ul>

  <script src="testsite3.js"></script>
</body>

</html>

В результате одного из движений курсора мыши надпись становится выше рисунка с левого бока.

Помогите добиться правильного отображения.

БЛОГ НА HUSL

Сдвиг надписи относительно рисунка

Ответы (0 шт):