Нужно чтоб подложка следовала за активным пунктом

109

17 сентября 2021, 11:10

https://jsfiddle.net/4j68tg7e/1/

Есть такая менюшка, получается 2 ряда, и там фоновая подложка которая двигается за активным пунктом, правда сейчас она очень некорректно работает. Двигается как угодно произвольно в любое место и только по горизонтали. Хотя там есть второй ряд, нужно чтоб вертикально также двигалась. Кто поможет решить чтоб горизонтально она корректно двигалась и по вертикали

var $marker = $('.select-bg-marker');
var $marker_item = $('.row-select .btn-select');
$marker.css({
    left: $marker_item.filter('.active').position().left,
    width: $marker_item.filter('.active').outerWidth(),
    height: $marker_item.filter('.active').outerHeight()
});
$marker_item.on('click', function() {
    if ( !$(this).hasClass('active') ) {
        var left = $(this).position().left-$marker_item.filter('.active').position().left;
        $marker.css({
            'width': $(this).outerWidth(),
            'height': $(this).outerHeight(),
            'transform': 'translateX('+left+'px)'
        });
    }
    $marker_item.removeClass('active');
    $(this).addClass('active');
});

Answer 1

Переделанный пример:

var $marker = $('.select-bg-marker'); 
var $marker_item = $('.row-select .btn-select'); 
$marker.css({ 
  left: $marker_item.filter('.active').position().left, 
  width: $marker_item.filter('.active').outerWidth(), 
  height: $marker_item.filter('.active').outerHeight() 
}); 
$marker_item.on('click', function() { 
  if (!$(this).hasClass('active')) { 
    var marker = $(this) 
    var { 
      left, 
      top 
    } = marker.position() 
 
    $marker.css({ 
      'width': marker.outerWidth(), 
      'height': marker.outerHeight(), 
      'transform': `translate(${left}px, ${top}px)`, 
    }); 
  } 
 
  $marker_item.removeClass('active'); 
  $(this).addClass('active'); 
});

.calc__platform { 
  z-index: 10; 
  position: relative; 
} 
 
.select-bg-marker { 
  position: absolute; 
  left: 0; 
  top: 0; 
  background: #264c7a; 
  height: 38px; 
  min-width: 50px; 
  border-radius: 35px; 
  transition: .3s; 
  z-index: -1; 
} 
 
.row-select { 
  border: 1px solid #264c7a; 
  -webkit-border-radius: 35px; 
  border-radius: 35px; 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-flex-wrap: wrap; 
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap; 
  margin-top: -1px; 
} 
 
.row-select:first-child { 
  margin-top: 0; 
} 
 
.btn-select { 
  cursor: pointer; 
  -webkit-box-flex: 1; 
  -webkit-flex-grow: 1; 
  -ms-flex-positive: 1; 
  flex-grow: 1; 
  width: 33.3%; 
} 
 
.btn-select span { 
  text-align: center; 
  min-height: 36px; 
  color: #010101; 
  font-size: 18px; 
  line-height: 24px; 
  padding-left: 15px; 
  padding-right: 15px; 
  -webkit-border-radius: 35px; 
  border-radius: 35px; 
  display: -webkit-box; 
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  -webkit-box-align: center; 
  -webkit-align-items: center; 
  -ms-flex-align: center; 
  align-items: center; 
  -webkit-box-pack: center; 
  -webkit-justify-content: center; 
  -ms-flex-pack: center; 
  justify-content: center; 
  width: 100%; 
  -webkit-transition: .3s; 
  -o-transition: .3s; 
  transition: .3s; 
} 
 
.btn-select.active span { 
  color: #fff; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="calc__platform"> 
  <div class="select-bg-marker"></div> 
  <div class="row-select"> 
    <label class="btn btn-select active"> 
      <input type="radio" name="platform" hidden checked> 
      <span>Xeon-E5</span> 
    </label> 
    <label class="btn btn-select"> 
      <input type="radio" name="platform" hidden> 
      <span>Xeon-E5v3</span> 
    </label> 
    <label class="btn btn-select"> 
      <input type="radio" name="platform" hidden> 
      <span>Xeon-5620</span> 
    </label> 
  </div> 
  <div class="row-select"> 
    <label class="btn btn-select"> 
      <input type="radio" name="platform" hidden> 
      <span>Scalable</span> 
    </label> 
    <label class="btn btn-select"> 
      <input type="radio" name="platform" hidden> 
      <span>Xeon-E3v5</span> 
    </label> 
    <label class="btn btn-select"> 
      <input type="radio" name="platform" hidden> 
      <span>Xeon-E3</span> 
    </label> 
  </div> 
</div>

Обновлен обработчик клика:

$marker_item.on('click', function() {
    if ( !$(this).hasClass('active') ) {
            var marker = $(this)
        var { left, top } = marker.position()
        $marker.css({
            'width': marker.outerWidth(),
            'height': marker.outerHeight(),
            'transform': `translate(${left}px, ${top}px)`,
        });
    }
    $marker_item.removeClass('active');
    $(this).addClass('active');
});