Почему сильно съезжает линия?

Question

[partyzanx]

hsk.wiki



пытался адаптировать этот скрипт, но даже если его начисто вставить в сайт, то будет всё равно также

<script>
    $(document).ready(function() {
  // cool nav menu
  $(window).on('load resize', function() {
    var $thisnav = $('.current-menu-item').offset().left;

    $('.main-category-menu .quick-bar-main-category-menu > *').hover(function() {
      var $left = $(this).offset().left - $thisnav;
      var $width = $(this).outerWidth();
      var $start = 0;
      $('.wee').css({ 'left': $left , 'width': $width });
    }, function() {
      var $initwidth = $('.current-menu-item').width();
      $('.wee').css({ 'left': '0' , 'width': $initwidth });
    });
  });

});
</script>

Answer 1

[partyzanx]

проблема было в том, что у меня два меню было, и поэтому складывались суммы нескольких меню...
я конкретизировал код, и норм всё стало.

$(document).ready(function() {
  // cool nav menu
  $(window).on('load resize', function() {
    var $thisnav = $('.main-category-menu .current-menu-item').offset().left;

    $('.main-category-menu .menu-item').hover(function() {
      var $left = $(this).offset().left - $thisnav;
      var $width = $(this).outerWidth();
      var $start = 0;
      $('.main-category-menu .wee').css({ 'left': $left , 'width': $width });
    }, function() {
      var $initwidth = $('.main-category-menu .current-menu-item').width();
      $('.main-category-menu .wee').css({ 'left': '0' , 'width': $initwidth });
    });
  });

});

Answer 2

[Макс]

Тут как я понимаю проблема вот в этой строке

var $thisnav = $('.current-menu-item').offset().left;
...
var $initwidth = $('.current-menu-item').width();

У тебя нет в DOM .current-menu-item
А есть .quick-bar-main-category-menu
Поменяй должно работать

Comments

[partyzanx]

я всё добавил, но также косячит.
Самый прикол, что он съезжает ровно на длину самого блока

[partyzanx]

я вот так сделал

$(document).ready(function() {
  // cool nav menu
  $(window).on('load resize', function() {
    var $thisnav = $('.current-menu-item').offset().left;

    $('.menu-item').hover(function() {
        var $left2 = $('.quick-bar-main-category-menu').offset().left;
      var $left = $(this).offset().left - $thisnav - $left2 - 34;
      var $width = $(this).outerWidth();
      var $start = 0;
      $('.wee').css({ 'left': $left , 'width': $width });
    }, function() {
      var $initwidth = $('.current-menu-item').width();
      $('.wee').css({ 'left': '0' , 'width': $initwidth });
    });
  });

});

но для меня непонятно откуда эти 34 добавляются?)


и мне как-то надо этот гавнокод исправить)

[Макс]

Ты я смотрю параллельно на проекте меняешь =)
Сложно актуальную ошибку тебе указать, но причина в том, что когда ты поправил DOM у родителя как я тебе писал, ты изменил ссылку на child теперь с этим связано.

[Макс]

partyzanx,
На момент когда я копировал

$(document).ready(function() {
  // cool nav menu
  $(window).on('load resize', function() {
    var $thisnav = $('.current-menu-item').offset().left;

    $('.menu-item').hover(function() {
        var $left2 = $('.quick-bar-main-category-menu').offset().left;
      var $left = $(this).offset().left - $thisnav - $left2 - 34;
      var $width = $(this).outerWidth();
      var $start = 0;
      $('.wee').css({ 'left': $left , 'width': $width });
    }, function() {
      var $initwidth = $('.current-menu-item').width();
      $('.wee').css({ 'left': '0' , 'width': $initwidth });
    });
  });

});

У тебя var $thisnav = $('.current-menu-item').offset().left;
И $('.menu-item').hover(function() {var $left = $(this).offset().left ...}
Тут $thisnav и $left равны, поэтому вычитая одно из другого ты ничего не получишь.

[partyzanx]

проблема было в том, что у меня два меню было, и поэтому складывались суммы нескольких меню...
я конкретизировал код, и норм всё стало.

$(document).ready(function() {
  // cool nav menu
  $(window).on('load resize', function() {
    var $thisnav = $('.main-category-menu .current-menu-item').offset().left;

    $('.main-category-menu .menu-item').hover(function() {
      var $left = $(this).offset().left - $thisnav;
      var $width = $(this).outerWidth();
      var $start = 0;
      $('.main-category-menu .wee').css({ 'left': $left , 'width': $width });
    }, function() {
      var $initwidth = $('.main-category-menu .current-menu-item').width();
      $('.main-category-menu .wee').css({ 'left': '0' , 'width': $initwidth });
    });
  });

});