Bardzo często na stronach z dużą ilością treści użytkownik gubi się na stronie i musi przewinąć na samą górę strony, aby znaleźć menu nawigacyjne. Technologie nie stoją w miejscu, ekrany monitorów i ich rozdzielczości są coraz większe, więc teraz na stronie internetowej nie szkoda już przeznaczać 40 pikseli na górę na stałe menu podczas przewijania strony serwisu. Odwiedzający będzie mógł zawsze zobaczyć, w której sekcji się znajduje, a także mieć szybki dostęp do menu nawigacji. Docelowo zwiększa to głębokość przeglądania serwisu :)
Jaka jest istota stałego menu nawigacyjnego na stronie internetowej? Początkowo nasze menu znajduje się na swoim zwykłym miejscu, gdzieś w nagłówku, w moim przypadku w odległości 140px od górnej krawędzi. Gdy tylko odwiedzający przewinie stronę o te same 140px w dół, menu zostaje unieruchomione na samej górze okna i pozostaje tam przez resztę czasu, aż przewijanie powróci do górnej pozycji.
Stałe menu podczas przewijania strony to w zasadzie panel sterowania, który jest zawsze przy Tobie. Nasze menu będzie proste.
Od teorii do praktyki. Wszystko jest dość proste i minimalistyczne, z czego większość przypisana jest stylom, które możesz dostosować dla siebie. Zrobiłem stałe menu jak na obrazku; przy przewijaniu kolor menu staje się lekko przezroczysty, dzięki czemu nie wygląda na ciężki, a zawartość pod spodem jest widoczna.
Nasze style. Mam menu o szerokości 1180px, umieszczone pośrodku. Nagłówek ma wysokość 180px, menu przewijania jest w nim zawarte i zajmuje 40px. Oznacza to odległość od góry 140 pikseli. Zapamiętajmy ten numer)
#header (wysokość: 180px;) #navigation(tło: #EF0505; wysokość: 40px; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); rozmiar czcionki: 16px; wysokość linii: 40px; pozycja: względna; góra: 140px; ) #navigation.fixed( pozycja: stała; góra: 0; szerokość: 100%; tło: rgba(239, 5, 5, 0.95); ) #navigation ul( szerokość: 1180px; dopełnienie -left: 0; margines: 0 auto; wyświetlacz: blok; ) #menu li( float: lewy; styl listy: brak; dopełnienie: 0 25px; obramowanie-prawe: 1px solid #D60000; ) #menu a ( color: #fff; dekoracja tekstu: brak; rodzina czcionek: Verdana; ) #menu>li a:hover( kolor: #656565; przejście: kolor 0,5 s łatwości; )
A oto kilka linijek kodu, które działają magicznie) Ustawiamy warunki przewijania strony, powyżej 140px lub poniżej. W zależności od tego do naszego menu nawigacyjnego zostaje przypisana stała klasa. W tej klasie, jak wspomniano powyżej, menu jest stałe i przypięte do góry.
JQuery(funkcja($) ( $(okno).scroll(funkcja())( if($(this).scrollTop()>140)( $("#navigation").addClass("fixed"); ) else if ($(this).scrollTop()
Należy pamiętać, że jeśli w kodzie zawartym w echo „” znajdują się pojedyncze cudzysłowy, należy je zmienić, tj. umieść ukośnik odwrotny (\) przed każdym z nich, oczywiście bez nawiasów.
Ogólnie rzecz biorąc, okazało się, jak się okazało. Będziesz musiał sam zdecydować, jak konkretnie powiązać to z tematem – kiedy masz czas, fajnie jest „dręczyć swój mózg”. Dziękuję.
Powodzenia! Do zobaczenia wkrótce na stronach bloga
Możesz być zainteresowany
WebPoint PRO to responsywny motyw WordPress z szeroką funkcjonalnością i kompetentną techniczną optymalizacją wyszukiwarek 
Share42 - skrypt dodający do serwisu przyciski i zakładki społecznościowe (istnieje opcja pływającego panelu)
Które coraz częściej można znaleźć na stronach blogów i innych zasobach. Stosowanie takich pasków nawigacyjnych jest w pełni uzasadnione. Jednym z głównych powodów aktywnego korzystania z wtyczek jQuery jest to, że menu jest zawsze w zasięgu ręki odwiedzającego, nawet jeśli znajduje się na dole strony. Dodatkowo stałe menu zajmuje niewiele miejsca i nie odrywa uwagi od głównej treści. Ogólnie rzecz biorąc, stałe menu poprawia użyteczność witryny.
Zebrałem kolekcję najlepszych, moim zdaniem, darmowych wtyczek jQuery do implementacji stałego menu. Starałem się, aby każda z wtyczek była w jakiś sposób wyjątkowa, tak aby każda wybrana wtyczka mogła zostać wykorzystana konkretnie w Twoim projekcie. W kolekcji można znaleźć zarówno proste, jak i bardziej złożone wtyczki z animacją itp.
Jeśli potrzebujesz bardzo prostego, stałego menu, coś w rodzaju tego, jak zaimplementowaliśmy lepki panel z przyciskami społecznościowymi, możesz obejść się bez wtyczek jQuery, ponieważ ładowanie strony ze skryptami nie jest zbyt dobre, ale porozmawiamy o tym w kolejnych artykułach. Subskrybuj nasz kanał lub strony, aby nie przegapić ciekawych materiałów.
Więc. Oto 6 wtyczek jQuery do tworzenia stałego menu.
