Как сделать Resposive JQuery Navbar на Chrome - PullRequest
Новая
       8

Как сделать Resposive JQuery Navbar на Chrome

0 голосов
/ 16 февраля 2019

Я сделал панель навигации, которая использует псевдоэлементы для отображения активной ссылки.Панель подстраивается под ширину элемента панели навигации.Всякий раз, когда пользователь изменяет размер окна, ширина и положение пересчитываются.Я использовал .ready и .ready для инициализации размера при загрузке, например: 

 $(document).ready(resizeActiveBar);

Это прекрасно работает как для Chrome, так и для Edge.Однако, когда пользователь изменяет размеры окон, ширина и положение панели не будут правильными, поэтому мы должны отрегулировать это.Я использовал .resize () следующим образом: 

$(window).resize(resizeActiveBar);

И вот эта функция: 

function resizeActiveBar() {
var len = $(".navbar-items").width(); // get the width of the button
$(".navbar-active").append(
  "<style>.navbar-active > a::after {width: " +
    len +
    "px !important; margin-left: -" +
    len / 2 +
    "px !important;}</style>"  // change the width and position
);
}

Это отлично работает в Edge, но совсем не работает в Chrome,Любая помощь и предложения приветствуются. Вот скрипка со всем.Попробуйте это и на Chrome и на Edge и увидите разницу

...