Shino

Jak zrobić sticky menu nawigacji

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. :)

 

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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ż. 

 

Share this post


Link to post
Share on other sites

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 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now