Как сделать навигацию?

Question

[Данил Доценко]

https://aaaaa.team/projects

сделал аналогичную навигацию, но не знаю, как сделать так, чтоб когда пользователь нажимал на вкладку, она оставалась на своём месте. У меня же, когда нажимаешь, она скачет

См моб версию

Comments

[Вадим]

Мой хрустальный шар даёт типичное пятничное предсказание: Вам нужно исправить код в script.js на 17ой строке.

Где Ваш код?
Что скачет?

[Данил Доценко]

Вадим, извините, вот
https://bimbambom.000webhostapp.com/price.html

[Вадим]

Данил Доценко, Так там и решать нечего. У Вас две последние ссылки ведут на index.html в котором предпоследняя ссылка размечена как active.

<menu class="menuScroll">
  <a href="portfolio.html" class="navBar">ПервыйБлок</a>
  <a href="price.html" class="navBar">ВторойБлок</a>
  <a href="about.html" class="navBar">ТретийБлок</a>
  <a href="index.html" class="active">ЧетвертыйБлок</a> <!-- index.html -->
  <a href="index.html" class="navBar">ПятыйБлок</a> <!-- index.html -->
</menu>

[Данил Доценко]

Вадим, это решит проблему, почему моя навигация скачет? а не остаётся на месте при выборе, как в aaaaa.team?

[Данил Доценко]

Вадим, я исправил, но навигация ведёт себя так же

[Вадим]

Данил Доценко, Потому что у Вас у активной ссылки и у обычных задана разная высота и разный margin

[Данил Доценко]

Вадим, откройте, пожалуйста, моб версию моей навигации и того сайта, который я скинул в описании.

там все ровно, у меня, когда нажимаешь на кнопку, скачет навигация

я про это пытаюсь сказать, виноват, что не конкретно описал вопрос

[Вадим]

Данил Доценко, А Вам уже два человека сказали что нужно сделать. Уравняйте стили в плане отступов. Как внутренних, так и внешних.

[Вадим]

Данил Доценко, Если Вы считаете, что эти ответы Вам не подходят - либо сформулируйте полностью что не так, с пошаговым объяснением в картинах, либо запишите видео.

Answer 1

[Олег]

У аааа.team ничего не скачет. Делайте как у них.

P.S. У вас тоже ничего не скачет. Ведь мы не видим.

Comments

[Данил Доценко]

Прошу прощения)
https://bimbambom.000webhostapp.com/price.html

[Олег]

Данил Доценко, если вы про изменение размеров кнопок меню на 1 пиксель - то это из-за border.
делайте тонкие границы, как box-shadow: 0px 0px 1px 0px #вашцвет; - не будут влиять на размер блока.
Альтернативно - в разных состояниях кнопки меняйте цвет вашего border, но не убирайте его, чтобы блоки не смещались.

[Данил Доценко]

Олег, если нажать на одну из крайних правых кнопок, то навигации перескочит обратно, вот это хочу решить

[Олег]

Данил Доценко, они у тебя обе на index.html ведут.

[Данил Доценко]

Олег, переделал, но все равно навигация ведёт себя так же

[Олег]

Данил Доценко, вы для активной кнопки убираете класс .navBar и добавляете класс.active. Не убирайте .navBar, просто добавляйте или убирайте .active.

и у .active cвойство margin: 3px 5px 0; если убрать вовсе - то и высота кнопок не будет меняться
и также у .active уберите свойство padding - из-за того, что он отличается от padding в .navBar - текст внутри кнопки тоже скачет.
и задание height:25px у того же .active - тоже лишнее

[Олег]

Как итог:

<menu class="menuScroll">	
      <a href="portfolio.html" class="navBar active">ПервыйБлок</a>
      <a href="price.html" class="navBar">ВторойБлок</a>	
      <a href="about.html" class="navBar">ТретийБлок</a>	
      <a href="index.html" class="navBar">ЧетвертыйБлок</a>	   
</menu>

.navBar {
    margin: 0 5px;
    display: inline-block;
    font-weight: 500;
    padding: 12px 14px;
    border: 1px solid black;
    color: black;
    background-color: #fff;
    -webkit-transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
    transition: background-color 300ms ease-in-out, color 300ms ease-in-out;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-tap-highlight-color: transparent;
    max-height: 45px;
    text-align: center;
    text-decoration: none;
    border-radius: 30px;
}
.active {
    color: white !important;
    border: 1px solid #fff;
    background-color: #000;
}

.active на размеры контейнера уже никак не влияет, будучи добавленным поверх .navBar и вообще в .active остались только те значения, которые должны быть другими при выделении кнопки, все дублирующие значения удаляем.
Всё аккуратно вписывается в родительский контейнер, имея одинаковую высоту, одинаковые паддинги и маргины.

[Данил Доценко]

Олег, откройте, пожалуйста, моб версию моей навигации и того сайта, который я скинул в описании.

я про это пытаюсь сказать, виноват, что не конкретно описал вопрос

[Данил Доценко]

Олег, на моб версии при выборе кнопки, навигация у меня прыгает туда сюда

[Олег]

Данил Доценко, меня вообще смущает скроллбар. Зачем?

[Данил Доценко]

Олег, я его уберу обязательно, мне главное разобраться, как сделать так, чтоб не прыгало

[Олег]

Данил Доценко, я потягал по-разному, но так и не пойму, что же тогда прыгает?

[Олег]

Данил Доценко, с телефона я вижу ту же капусту, как и на скрине выше (только скроллбар не показывается). Если у вас "прыгает" состояние прокрутки скроллбара при переходе по ссылкам из этого меню - это нормально, браузер не запоминает позицию скролла - вы же ничего для этого не сделали, тем более пользователь попадает на новую страницу.
Чтобы этого не происходило, есть несколько вариантов (все они требуют javascript):

1. асинхронная загрузка по нажатию кнопки меню с запретом дефолтного поведения ссылки
   
2. запоминание позиции скролла меню, установка куки/session storage/local storage с этим значением, чтение куки/session storage/local storage на новой странице, установка скролла по значению из куки/session storage/local storage
   
3. запоминание позиции скролла меню, добавление хеш-части к href ссылки ко всем кнопкам меню, чтение этого хеша на новой странице, установка скролла по значению из хеша