Использование CSS для переключения панели навигации вместо использования JavaScript / jQuery

Question

Я разрабатываю навигационную боковую панель, которая переключается вправо и назад с левой стороны окна, по щелчку или тому подобному событию. Использование jQuery кажется довольно простым:

$(document).ready(function () {
  $nav = $("nav");
  $nav.hide();

  // Toggles the nav bar when clicking the nav-intersect icon.
  $("#nav-intersect").click(() => {
    $nav.animate({ width: 'toggle' }, 350);
  })
});

Однако есть небольшая проблема. Когда я обновляю sh страницу, на короткое время вы видите видимую панель навигации, затем быстро исчезаете, что указывает на то, что веб-страница загружает элемент панели навигации, а затем загружает скрипт jQuery, который вызывает $nav.hide() чтобы вручную скрыть панель навигации после панель навигации уже видна.

Таким образом, я хочу изменить панель навигации для переключения с CSS классами. Я видел, как веб-сайты используют код, такой как class="nav-open", и переключают присутствие самого класса для отображения панели навигации, но у меня возникают проблемы при попытке реализовать его с помощью скользящей анимации, которую реализует мой текущий код. Я знаю, что это как-то связано с visibility="hidden" и "visible", поэтому, если кто-то может дать указатели, это будет с благодарностью!

https://jsfiddle.net/TrueshotBarrage/7kqL318b/3/

Answer 1

В конечном итоге вы хотите удалить панель навигации fla sh. Так что CSS - это одна опция, HTML - другая, а JavaScript - другая.

jQuery переключает видимость на основе отображения (нет или блокирует), поэтому используйте display:none; в вашем CSS вот так:

nav {
  display:none;
  font-size: 1.5em;
  position: fixed;
  height: 100%;
}

Если это не достаточно быстро, вы можете написать это в HTML (<nav style="display:none;">), но CSS должно быть в порядке.

Затем удалите скрыть в вашем jQuery, потому что вы уже спрятали его:

$nav = $("nav");
  //$nav.hide();

Answer 2

Если вы не хотите уходить слишком далеко от того, что у вас уже есть, вы можете просто изменить то, что делает jQuery. И, как предложено выше Badru sh, используйте CSS transition для анимации.

Скройте nav с помощью CSS и переключайте имена классов, чтобы скрыть и показать. Подумайте над тем, чтобы дать элементу имя класса и выберите элемент с этим именем вместо имени тега. Ниже я назвал это .sidebar-nav.

.sidebar-nav-trigger может жить снаружи или внутри nav. Если он внутри, вы захотите стилизовать / скрыть / показать '.sidebar-nav-items' вместо родительского элемента.

HTML

<a class="sidebar-nav-trigger">Menu</a>

<nav class="sidebar-nav hide">
    <a class="sidebar-nav-trigger">Menu</a>
    <div class="sidebar-nav-items">
        <!-- nav items -->
    </div>
</nav>

CSS

.sidebar-nav {}

.sidebar-nav.hide {
    display: none;
}

.sidebar-nav.show {
    display: block;
}

.sidebar-nav-trigger {}

jQuery

jQuery(document).ready(function ($) {
  $sidebarNav = $('.sidebar-nav');

  // Toggle the nav bar when clicking the nav-intersect icon.
  $('.sidebar-nav__trigger').click(() => {
    $sidebarNav.toggleClass('show').toggleClass('hide');
  });
});

---

Есть много интересных вещей, которые вы могли бы сделать с переходом CSS. Для демонстрации ниже приведены стили, чтобы сделать его прозрачным и переместить его на 50% ширины. При необходимости измените.

CSS

.sidebar-nav {
    transition: opacity 0.4s, transform 0.4s;
}

.sidebar-nav.hide {
    pointer-events: none; /* "hides" it from mouse, a more modern technique than visibility: hidden; */
    opacity: 0;
    transform: translateX(50%);
}

.sidebar-nav.show {
    pointer-events: auto;
    opacity: 1;
    transform: translateX(0);
}

Answer 3

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

Если вы хотите использовать CSS, тогда вы можете назначить closed и open классов (назовите их как угодно) и измените для каждого имени класса свой набор css свойств (ширина) и c. вы можете использовать свойство transition css для его анимации.

Затем, чтобы получить go от одного к другому, вам все равно нужно будет добавить или удалить класс из элемента, используя JS что легко сделать.

1. Используйте JS для выбора элемента
2. Используйте classList для добавления / удаления классов по мере необходимости

https://alligator.io/js/classlist/