Горизонтальное меню в одну строку смещение активного элемента относительно остальных?

Question

[Annet22]

Здравствуйте! Помогите решить задачку. Есть меню в одну строку на мобильных устройствах все ссылки не помещаются и скрыты справа. Каждая ссылка меню соответствует своей странице. Как сделать проверку, если мы например на странице 3 сделать li этой странице active и сместить меню так, что бы эта ссылка оказалась первой слева. Изначально активная ссылка нам неизвестна.
В сети удалось найти код, частично решающий задачу, но в нем изначально нужно задавать активную ссылку. И если задать например 6 то пункты с 1-5 не смещаются вправо как нужно.
https://jsfiddle.net/7yq0jq9s/2/
Помогите плиз. Заранее спасибо!

Answer 1

[Evanre]

Если делать правильно, то только с помощью бекенда. Сервер уже должен отдавать менюшку, где первым пунктом будет стоять нужная меюшка с активным классом, ну или хотя-бы просто с активным классом. Если получится второй вариант, то с помощью js просто переместить пункт в начало либо css (display: flex + order: -1). Городить костыли и определять с помощью js на какой странице Вы находитесь - не есть хорошо. Это можно сделать, но будет говнокод. Нужно больше вводных данных, ссылка, какой бекенд и т.д.

Answer 2

[Annet22]

Еще пример darsa.in/sly/examples/horizontal.html в самом низу страницы блок Crazy, тут все хорошо только каждому li задана ширина, а это плохо. Изначально мы не задаем ширину li
Так я делаю проверку текущей страницы и если есть ссылка в меню присваиваем ее li класс active
$('.header-menu > li > a').each(function () {
if (this.href == location.href){
$(this).parent().addClass('active');
}
});
Помогите плз. Очень нужно решить задачку.