Как реализовать меню со скользящей линией?

Question

seregindev @seregindev

JavaScript

Как реализовать меню со скользящей линией?

Доброго времени суток.

Сейчас пытаюсь реализовать меню, со скользящим дивом, который указывает на выбранный пользователем элемент.
Реализовывал я по примеру : webcareer.ru/menyu-so-skolzyashhej-liniej.html

И столкнулся с 2 проблемами.

1. У элементов меню имеется отступ при наведении на который маркер сбивается и улетает обратно.
2. Чтобы сохранить положение данного дива, нужно присваивать класс "active"(по клику), но увы див не сохраняет своего положения. Но если задать в отдельном скрипте класс, то уже всё будет работать...

Буду очень признателен за помощь, уже 4й день не могу решить эти проблемы...

$(document).ready(function () {
  $('.header-site').on('click', 'a[href*="#"]', function(event){
      event.preventDefault();
      var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0;
      var customoffset = 106;
      $('html, body').animate({scrollTop:target_offset - customoffset}, 400);

      $("a.active").removeClass("active");
      $(this).addClass("active")
      })
})


$(document).ready(function(){
    var nav_wrap = $(".nav-horizontal .menu"),
        elem_width,
        elem_left_offset,
        elem_parent,
        slider_line;

    $(document).ready(function(){

        nav_wrap.each(function(){
            $(this).append('<div class="lineActive"></div>');

            var start_elem_width = 0;
            var start_elem_offset = 0;
            var active_elem = $('.nav-horizontal .menu a').find(".active");

            if(active_elem.length){
                start_elem_width = active_elem.outerWidth();
                start_elem_offset = active_elem.position().left;
            }

            $(this).find(".lineActive").css({
                "width": start_elem_width + "px",
                "left": start_elem_offset + "px"
            })
            .data("width", start_elem_width)
            .data("left", start_elem_offset);
        });

    });

    nav_wrap.find("li a").hover(function(){

        elem_parent = $(this).parent();
        elem_width = elem_parent.outerWidth();
        elem_left_offset = $(this).position().left;
        slider_line = elem_parent.siblings(".lineActive");
        slider_line.stop().animate({
            "width": elem_width + "px",
            "left": elem_left_offset + "px"
        });

    }, function(){

        slider_line.stop().animate({
            "width": slider_line.data("width") + "px",
            "left": slider_line.data("left") + "px"
        });
    });
});