Панель навигации по сайту

От: Из: Общие

Я только начинаю изучать кодирование веб-сайтов с помощью html, css и JavaScript. Чтобы немного повиснуть, я пытаюсь создать полноценную веб-страницу.

Пока что сделал только навигационную панель. Я начал с базовой панели навигации Bootstrap 5 и изменил ее, чтобы она выглядела и вел себя так, как я хочу. На это у меня ушло три дня, но сейчас все выглядит хорошо.

По крайней мере, снаружи. Однако я не могу избавиться от ощущения, что это можно было бы сделать намного проще, с гораздо меньшим количеством кода.

Может ли кто-нибудь указать на некоторые примеры того, где я мог пойти слишком окольным путем и что я мог бы сделать лучше?

Я вставил свой код в CodePen:

https://codepen.io/AlexanderSplat/pen/ZELLEeB

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  var width = $(window).width();
  if (scroll >= 50 && width <= 1000) {
    document.querySelector(".navbar").style.paddingTop = "0";
    document.querySelector(".navbar").style.paddingBottom = "0";
    document.querySelector(".navbar-brand").style.fontSize = "28px";
    document.querySelector(".navbar-brand").style.paddingTop = "0.4%";
    document.querySelector(".navbar-brand").style.paddingBottom = "0.3%";
    document.querySelector(".navbar-brand").style.height = "40px";
    document.querySelector(".navbar-brand").style.lineHeight = "40px";
    document.querySelector("#navhome").style.paddingTop = "15px";
    document.querySelector("#navabout").style.paddingTop = "15px";
    document.querySelector("#navport").style.paddingTop = "15px";
    document.querySelector("#navteam").style.paddingTop = "15px";
    document.querySelector("#navcont").style.paddingTop = "15px";
    document.querySelector("#navhome").style.paddingBottom = "14px";
    document.querySelector("#navabout").style.paddingBottom = "14px";
    document.querySelector("#navport").style.paddingBottom = "14px";
    document.querySelector("#navteam").style.paddingBottom = "14px";
    document.querySelector("#navcont").style.paddingBottom = "14px";
  } else if (scroll >= 50 && width >= 1001) {
    document.querySelector(".navbar").style.paddingTop = "0";
    document.querySelector(".navbar").style.paddingBottom = "0";
    document.querySelector(".navbar-brand").style.fontSize = "28px";
    document.querySelector(".navbar-brand").style.paddingTop = "0.4%";
    document.querySelector(".navbar-brand").style.paddingBottom = "0.3%";
    document.querySelector(".navbar-brand").style.height="initial";
    document.querySelector(".navbar-brand").style.lineHeight="initial";
    document.querySelector("#navhome").style.paddingTop = "15px";
    document.querySelector("#navabout").style.paddingTop = "15px";
    document.querySelector("#navport").style.paddingTop = "15px";
    document.querySelector("#navteam").style.paddingTop = "15px";
    document.querySelector("#navcont").style.paddingTop = "15px";
    document.querySelector("#navhome").style.paddingBottom = "14px";
    document.querySelector("#navabout").style.paddingBottom = "14px";
    document.querySelector("#navport").style.paddingBottom = "14px";
    document.querySelector("#navteam").style.paddingBottom = "14px";
    document.querySelector("#navcont").style.paddingBottom = "14px";
  } else {
    document.querySelector(".navbar").style.paddingTop = "8px";
    document.querySelector(".navbar-brand").style.fontSize = "40px";
    document.querySelector(".navbar-brand").style.paddingTop = "0.6%";
    document.querySelector(".navbar-brand").style.paddingBottom = "0.6%";
    document.querySelector(".navbar-brand").style.height="initial";
    document.querySelector(".navbar-brand").style.lineHeight="initial";
    document.querySelector("#navhome").style.paddingTop = "28px";
    document.querySelector("#navabout").style.paddingTop = "28px";
    document.querySelector("#navport").style.paddingTop = "28px";
    document.querySelector("#navteam").style.paddingTop = "28px";
    document.querySelector("#navcont").style.paddingTop = "28px";
    document.querySelector("#navhome").style.paddingBottom = "28px";
    document.querySelector("#navabout").style.paddingBottom = "28px";
    document.querySelector("#navport").style.paddingBottom = "28px";
    document.querySelector("#navteam").style.paddingBottom = "28px";
    document.querySelector("#navcont").style.paddingBottom = "28px";
  }
});
body {
  height: 200vh;
}

@media (min-width: 1001px) {
  .navbar-brand {
    color: white;
    font-family: 'Julius Sans One';
    font-style: normal;
    font-weight: 400;
    font-size: 40px;
    padding-left: 67px;
    margin-left: 1.9%;
    transition: 0.4s;
  }
  .navbar {
    background-color: #105565;
    position: fixed;
    width: 100%;
    transition: 0.4s;
  }
}

@media (max-width: 1000px) {
  .navbar-brand {
    color: white;
    font-family: 'Julius Sans One';
    font-style: normal;
    font-weight: 400;
    font-size: 40px;
    height: 52px;
    line-height: 52px;
    padding-top: 0;
    padding-bottom: 0;
    margin-left: 2.5%;
    transition: 0.4s;
  }
  .navbar {
    background-color: #105565;
    position: fixed;
    width: 100%;
    padding-top: 0px;
    padding-bottom: 0px;
    transition: 0.4s;
  }
  .fas {
    color: rgba(255, 255, 255, 1.00);
  }
}

.navbar-nav {
  margin-right: 4.4%;
}

.nav-item {
  font-family: 'roboto';
  font-size: 14px;
  font-weight: 300;
}

#navhome {
  color: white;
  background: #105565;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}

#navabout {
  color: white;
  background: #105565;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}

#navport {
  color: white;
  background: #105565;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}

#navteam {
  color: white;
  background: #105565;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}

#navcont {
  color: white;
  background: #105565;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}

#navhome:hover {
  color: #105565 !important;
  background: white;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}

#navabout:hover {
  color: #105565 !important;
  background: white;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}

#navport:hover {
  color: #105565 !important;
  background: white;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}

#navteam:hover {
  color: #105565 !important;
  background: white;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}

#navcont:hover {
  color: #105565 !important;
  background: white;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}
<nav class="navbar navbar-expand-lg navbar-dark m-0 p-0">
  <div class="container-fluid"> <a class="navbar-brand" href="https://codereview.stackexchange.com/questions/258921/#">Navbar Inc.</a> <button class="navbar-toggler" style="color: rgba(0,0,0,0.00);" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
      aria-label="Toggle navigation"> <span class="fas fa-bars"></span> </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item"> <a class="nav-link active" id="navhome" style="color:white;" aria-current="page" href="https://codereview.stackexchange.com/questions/258921/#">HOME</a> </li>
        <li class="nav-item"> <a class="nav-link active" id="navabout" style="color:white;" aria-current="page" href="https://codereview.stackexchange.com/questions/258921/#">ABOUT</a> </li>
        <li class="nav-item"> <a class="nav-link active" id="navport" style="color:white;" aria-current="page" href="https://codereview.stackexchange.com/questions/258921/#">PORTFOLIO</a> </li>
        <li class="nav-item"> <a class="nav-link active" id="navteam" style="color:white;" aria-current="page" href="https://codereview.stackexchange.com/questions/258921/#">TEAM</a> </li>
        <li class="nav-item"> <a class="nav-link active" id="navcont" style="color:white;" aria-current="page" href="https://codereview.stackexchange.com/questions/258921/#">CONTACT</a> </li>
      </ul>
    </div>
  </div>
</nav>

У меня было больше всего проблем с тем, чтобы белые поля выбора (которые появляются при наведении курсора на каждую из навигационных ссылок) покрывали всю высоту навигационной панели и всю ширину навигационного элемента в каждом адаптивном размере, а также с положение текста в каждом размере. (В основном есть четыре состояния размера: прокрутка вверх или вниз в узком (<1000 пикселей) или широком окне.)

По размещение этого вопроса не в том разделе (Я здесь новичок), у меня уже есть несколько отличных предложений, но мы очень приветствуем дополнительные советы по улучшению этого кода.

Это правда, что я не мог найти способ решить конфликты заполнения без !important, так что если кто-то может указать мне правильное направление, я буду очень признателен.

1 ответ
1

Во-первых, поздравляю с тем, что ваша навигационная панель заработала и придерживаетесь этого в течение нескольких дней! 🎉🥂

Есть много вещей, которые можно улучшить, но, на первый взгляд, самая очевидная проблема заключается в том, что ваши стили распределены по всем файлам HTML, CSS и JS. Это очень затрудняет рассуждение о них. Вот как можно упростить ситуацию и облегчить работу.

  1. Убрать все style присвоения атрибутов из вашего HTML и JS — вместо этого поместите эти инструкции по стилю в свои классы CSS.
  2. Замените присвоения атрибутов стиля в коде JS назначениями классов, чтобы упростить работу и уменьшить количество (дорогих!) Запросов DOM, которые вы выполняете всякий раз, когда пользователь прокручивает.
  3. Используйте медиа-запросы для обработки всех стилей в зависимости от горизонтального размера области просмотра. Вы уже делаете это в своем CSS (например, @media (max-width: 1000px)), но тогда вы также делаете это отдельно в коде JS, что сбивает с толку. Просто сделайте это в CSS.
  4. (Необязательно) Не ​​используйте jQuery. Собственные веб-API более чем способны делать то, что вы здесь достигли с помощью jQuery, вы можете значительно упростить его, удалив его.

Вот как может выглядеть ваш JS с описанными выше изменениями:

// Query just once, and reuse the reference.
var navbar = document.querySelector(".navbar");
var isScrolledDownClass = "is-scrolled-down";
var scrollDownClassThreshold = 50;

window.addEventListener("scroll", function() {
  if (!navbar) return; // or treat the failure to query the navbar as an error
  if (window.scrollY >= scrollDownClassThreshold) {
    navbar.classList.add(isScrolledDownClass);
  } else {
    navbar.classList.remove(isScrolledDownClass);
  }
});

В CSS вы можете использовать потомок комбинатор применять стили к детям в зависимости от состояния их предков. Это поможет вам применить определенные стили только тогда, когда элемент навигационной панели имеет is-scrolled-down класс:

#navabout {
  color: white;
  background: #105565;
  padding-top: 28px;
  padding-bottom: 28px;
  padding-left: 12px;
  padding-right: 12px;
}

.navbar.is-scrolled-down #navabout {
  padding-bottom: 14px;
  padding-top: 15px;
}

  • Спасибо большое! Это мне очень помогает. Думаю, я понимаю большинство ваших предложений. Хотя мне интересно, почему вам нужно добавлять класс «is-scrolled-down» через переменную, а не напрямую. Почему нет navbar.classList.add("is-scrolled-down");?

    — АлександрСплат

  • Рад, что помог! Не стесняйтесь спрашивать, если что-то неясно. Вам не нужно использовать переменную, но я по привычке по ряду причин, наиболее актуальной в данном случае является то, что строка используется в двух местах, поэтому использование переменной защищает вас от опечатки в одном месте и не другой. Я обычно стараюсь избегать использования специальных строк непосредственно в коде по ряду причин. этот вопрос резюмирует достаточно хорошо.

    — Мэннингем


  • Имеет смысл! Звучит как хорошая практика. На самом деле есть еще одна строчка, которую я не понимаю: if (!navbar) return; (на самом деле, ни комментарий после него: or treat the failure to query the navbar as an error). Что там означает восклицательный знак и что возвращается?

    — АлександрСплат

  • @AlexanderSplat это логическое НЕ оператор — в основном эквивалент проверки false, undefined или же null .

    — БУДЕТ ВКЛЮЧЕНОᴇᴌᴀ

Похожие записи:

  1. Вывод имени изображения из бд в форму
  2. Использование свойств класса в другом классе
  3. +1 к следующей функции
  4. Чтение Json в массив PHP
  5. Форматирование гигантских чисел!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *