Skocz do zawartości
Shino

Jak zrobić sticky menu nawigacji

Rekomendowane odpowiedzi

Witam,

Tematem tego poradnika będzie sticky menu nawigacji czyli jak zrobić menu nawigacji, które stale będzie się przesuwać wraz z suwakiem przeglądarki.

 

Czego będziemy potrzebować: 

-jQuery, które możemy pobrać z tej witryny. Wersja skompresowana jest bardziej optymalna. Pobrany plik wrzucamy do folderu z plikami strony. 

-Pliki HTML oraz CSS, w których zrobimy menu nawigacji. 

-Gotową formułę skryptu, która będzie odpowiadać nam za umożliwienie zrobienia z diva klasy formę sticky:

sticky.PNG.7c0a2363635412d4a984c4f6416ed4d1.PNG

 

Co jest ważne?

<script src="jquery-3.3.1.min.js"></script>   ----> jak wiemy komenda "src" oznacza adres do danego elementu w folderze strony, tutaj jest nie inaczej i cała ta formuła ma za zadanie podlinkować nam wcześniej pobrany plik jquery do naszej strony (po prostu go implementuje). Nazwa jquery może ulegać zmianie z nowszymi jego wersjami.

'.top' ----> jest to miejsce, w którym wpisujemy nazwę klasy diva, który ma być sticky. Na screenie jest to .top

Formułę skryptu dodajemy w sekcji body, najlepiej (bo najmniej ofensywnie i najbardziej przejrzyście w kodzie) na dole kodu. 

 

-Do pliku css dodajemy formuły:

sticky2.png.9d4a3bfb0cd2d026b3b60ab49488e2fd.png

 

width:100% to szerokość 

top, left oraz z-index to wartości przestrzenne

position:fixed oznacza umieszczenie elementu względem okna przeglądarki 

 

I tak div klasy .top będzie się przesuwał wraz z suwakiem strony. Może być to zwykły prostokąt z width 100% koloru czarnego, jak i pełne menu nawigacji.

Przykładowe strony używające menu nawigacji sticky to youtube.com lub facebook.com 

Nie dodaję plików css i html, ponieważ jeżeli ktoś nie potrafi zrobić prostego diva to nie powinien się zabierać za sticky diva opartego na js. :P

 

Jeżeli kogoś interesowałoby więcej prostych, treściwych poradników jak ten to zapraszam do zostawienia komentarza. :)

 

 

 

  • Like 2
  • Confused 1

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Biorąc pod uwagę, iż jest to "poradnik" powinien być przeznaczony dla osób "zielonych",  które szukaj rozwiązania w internecie i nie zawsze są obeznane w temacie robiąc coś hobbistycznie,jak dla mnie jest bardzo nieczytelne, będąc nową osobą zaczynającą przygodę przy stronach bym nie śnił czym jest klasa itd. Proponuję to poprawić i przepisać na bardziej dostępny język dla każdego oraz popracowanie nad myleniem niektórych pojęć.

Pozdrawiam

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach
Teraz, tNk napisał:

Biorąc pod uwagę, iż jest to "poradnik" powinien być przeznaczony dla osób "zielonych",  które szukaj rozwiązania w internecie i nie zawsze są obeznane w temacie robiąc coś hobbistycznie,jak dla mnie jest bardzo nieczytelne, będąc nową osobą zaczynającą przygodę przy stronach bym nie śnił czym jest klasa itd. Proponuję to poprawić i przepisać na bardziej dostępny język dla każdego oraz popracowanie nad myleniem niektórych pojęć.

Temat ten nie znajduje się w dziale dla początkujących, ani nie jest dla totalnych początkujących skierowany, stąd: 

"Nie dodaję plików css i html, ponieważ jeżeli ktoś nie potrafi zrobić prostego diva to nie powinien się zabierać za sticky diva opartego na js. :P" 

Temat w mojej opinii jest czytelny, czytając od góry do dołu wiesz co masz zrobić, bo poradnik jest w formie krokowej. Nie koloruję tekstu, bo za przeproszeniem chujo** to wygląda, stąd jedynie pogrubienia. 

+ nie wiem skąd skojarzenie, że poradnik ma być dla osób zielonych we wszystkim. Konkretny poradnik jest dla osób zielonych w danym temacie. Jeżeli ktoś jest zielony w całym kodowaniu to nie powinien się zabierać za ten poradnik, przez co dodałem tę formułę wyżej. 

6 minut temu, tNk napisał:

oraz popracowanie nad myleniem niektórych pojęć.

Rozumiem, że chodzi Ci o treść merytoryczną poradnika, a nie że poradnik = zielony we wszystkim? Jeżeli jest tak jak jednak myślę to jakie pojęcia pomyliłem?

Pozdrawiam również. 

 

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Kod ładnie przepisany od pana Zelenta a nigdzie nie widzę linku do jego poradnika dla początkujących. Również od dawna sticky menu oscyluje się tylko i wyłącznie za pomocą css, do prostego sitcky menu wystarczy coś takiego:

nav{
    width: 100%;
    height: 40px;
    background-color: dimgrey;
    color: azure;
    position: fixed;
    z-index: 1;
}

nav - odpowiada za nawigację czyli całe nasze menu (jakby ktoś nie wiedział co znaczy ten znacznik semantyczny)

Mniej kodu, który przeglądarka musi odtworzyć = lepiej 

  • Like 1

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Zapoznaj się ze słowem składnia.

Co do @up fajnie, że spostrzegłeś, Mirek jest bardzo dobrym tłumaczem, ale po jego kursach nie można nazwać się programistą :D

  • Like 1

Udostępnij tę odpowiedź


Odnośnik do odpowiedzi
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się

×

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Regulamin