Tworzę boczny pasek nawigacyjny, który przełącza się w prawo i do tyłu z lewej strony okna, po kliknięciu lub podobnym wydarzeniu. Korzystanie z jQuery wydaje się dość proste:

$(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);
  })
});

Jest jednak drobny problem. Kiedy odświeżam stronę, na krótką chwilę widać, że pasek nawigacji jest widoczny, a następnie szybko znika, co wydaje się wskazywać, że strona ładuje element paska nawigacji, a następnie ładuje skrypt jQuery, który wywołuje $nav.hide() ręcznie ukryj pasek nawigacyjny po pasku nawigacyjnym jest już widoczny.

W związku z tym chcę zmienić pasek nawigacyjny, aby był przełączany z klasami CSS. Widziałem, jak strony internetowe używają kodu takiego jak class="nav-open" i przełączają obecność samej klasy, aby wyświetlić pasek nawigacyjny, ale mam problem z próbą zaimplementowania jej za pomocą przesuwanej animacji, którą implementuje mój obecny kod. Wiem, że ma to coś wspólnego z visibility="hidden" i "visible", więc jeśli ktoś mógłby dać wskazówki, byłoby to bardzo wdzięczne!

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

0
David Kim 3 kwiecień 2020, 03:38

3 odpowiedzi

Najlepsza odpowiedź

Jeśli nie chcesz oddalać się zbytnio od tego, co już masz, możesz po prostu zmienić to, co robi jQuery. Jak zasugerował Badrush powyżej, użyj CSS transition do wykonania animacji.

Ukryj nav za pomocą CSS i przełącz nazwy klas, aby je ukryć i pokazać. Rozważ nadanie elementowi nazwy klasy i wybierz element z nią zamiast nazwy znacznika. Poniżej nazwałem go .sidebar-nav.

.sidebar-nav-trigger może mieszkać na zewnątrz lub wewnątrz nav. Jeśli jest w środku, będziesz chciał stylizować / ukryć / pokazać '.sidebar-nav-items' zamiast elementu nadrzędnego.

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');
  });
});

Jest wiele wymyślnych rzeczy, które można zrobić z przejściem CSS. W celach demonstracyjnych poniżej znajdują się style, które sprawiają, że jest przezroczysty i przesuwa go o 50% szerokości. Zmień w razie potrzeby.

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);
}

0
dylanjameswagner 3 kwiecień 2020, 01:17

Dlaczego nie trzymać się kodu jQuery po prostu rozwiązać problem z ładowaniem? Możesz domyślnie ukryć go i powiedzieć jQuery, aby go pokazał, aby był ukryty po załadowaniu strony.

Jeśli chcesz używać CSS, możesz przypisać klasy closed i open (nazwij je dowolnie) i zmienić dla każdej nazwy klasy, którą masz zestaw właściwości CSS (szerokość) itp. Możesz użyć { {X2}} css, aby go animować.

Następnie, aby przejść z jednej do drugiej, nadal musisz dodać lub usunąć klasę z elementu za pomocą JS, co jest łatwe do zrobienia.

  1. Użyj JS, aby wybrać element
  2. Użyj classList, aby dodać / usunąć klasy w razie potrzeby

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

0
Badrush 3 kwiecień 2020, 00:49

Ostatecznie chcesz usunąć lampę błyskową paska nawigacyjnego. Więc CSS to jedna opcja, HTML inna, a JavaScript jeszcze inna.

JQuery przełącza widoczność na podstawie wyświetlania (brak lub blok), więc użyj display:none; w swoim CSS w następujący sposób:

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

Jeśli to nie jest wystarczająco szybkie, możesz napisać to w HTML (<nav style="display:none;">), ale CSS powinno wystarczyć.

Następnie usuń ukrywanie w swojej jQuery, ponieważ już ją ukryłeś:

$nav = $("nav");
  //$nav.hide();
0
Nathan 3 kwiecień 2020, 00:57