Eden Strona Główna



Poprzedni temat «» Następny temat
Od zera do webmastera - menu
Autor Wiadomość
Luxter



gram na
https://test-nodebb.herokuapp.com/

o sobie
Bug programowania


Wysłany: 2017-06-06, 19:05   Od zera do webmastera - menu

Od zera do webmastera - Wszystko o menu

Następny poradnik z serii. Tym razem jednak zaszalejemy i podzielimy tutorial na dwie części: proste menu przy użyciu HTML i CSS, oraz wypasione z dorzuconym JavaScriptem (ABSOLUTNE PODSTAWY, EASY). A więc nadchodzi: wszystko o menu, a o co boicie się zapytać!

Nasze podstawowe menu będzie się składać po prostu ze zgrupowanych odnośników. W tym celu we wszystkich przykładach będziemy lecieć z tym prostym kodem HTML Wypróbuj <- W te takie można klikać. Nic nadzwyczajnego - ot kilka odnośników (które oczywiście w moich przykładach nigdzie nie odnoszą, ale to sobie każdy uzupełni odpowiednimi linkami). Poprawmy trochę ich wygląd!

Pionowe menu i podstawowy styl
Wypróbuj

Wybierając elementy selektorem "div a" sprawiamy, że zmieniamy tylko formatowanie linków w naszym menu (dzięki temu, reszta odnośników na naszej stronie jest bezpieczna). Dodając "display:block" sprawiliśmy, że nasze linki są traktowane jako elementy blokowe i możemy im precyzować dodatkowe atrybuty, jak np. szerokość "width: 60px". Dodałem też kolor tła, żeby wyróżnić, gdzie jest nasze menu.

Dodatkowe stylowanie i hover
Wypróbuj

Jak widać dodałem tutaj ":hover", które to stylowanie odpowiada za akcje, gdy najedziemy myszką na dany element. Przy okazji zmieniłem też kolor czcionki, żeby nie było widać czy klikaliśmy wcześniej w dany odnośnik czy nie. Podczas :hover zmieniany jest jedynie kolor tła i czcionki, ale oczywiście, jak się pewnie domyślacie, można tutaj zrobić co tylko dusza zapragnie.

Element aktywny
Wypróbuj

Często spotyka się osobne stylowanie dla aktualnie wybranego elementu z menu. W naszym przypadku odbywa się to poprzez dodanie klasy CSS "active" do jednego z odnośników. W samych CSS dodaliśmy więc odpowiednie stylowanie (niebieski kolor tła) dla odnośnika, który ma klasę "active". Oczywiście w prawdziwym zastosowaniu musi być też logika odpowiadająca za odpowiednie dodawanie/usuwanie owej klasy, ale to już jest odrębna kwestia. Tutaj pokażę jak taki element tylko wystylować. Dodatkowo poprzednia reguła "div a:hover" nieco się rozrosła, żeby nie obejmowała aktywnego elementu do "div a:hover:not(.active)", czyli :hover na wszystkie odnośniki a w div, nie posiadające klasy active.

"Przyklejone" menu
Wypróbuj

Tym razem mamy ciut więcej zmian. Przede wszystkim dodałem klasę "menu" na naszym div-ie od menu, żeby dało się go rozróżniać od innych div-ów (co sprawiło, że trzeba zmienić wszystkie wcześniejsze selektory). Przeniosłem też jasnozielony kolor do div-a, zamiast do naszych linków, żeby pokazać ile faktycznie miejsca teraz zajmuje (co zdefiniowałem odpowiednimi width i height). Będąc już tutaj należy tylko wspomnieć, że zostało dodane również "position:fixed", które sprawia, że nasze menu zostaje w miejscu niezależnie od scrollowania strony. Dodałem trochę bezwartościowej treści do strony głównej i przystylowałem ją, żeby przykład miał sens (margin-left, aby nasze menu nie zasłaniało strony, oraz height żeby pokazać scrollowanie).

Poziome menu i podstawowy styl
Wypróbuj

Jak każdy z pewnością zauważył na początku: z automatu mieliśmy poziome menu. Jest to spowodowane faktem, że nasz element nadrzędny div jest elementem blokowym, czyli zajmuje całą linię i dopiero pod nim jest reszta strony. Popatrzmy na zmiany. Nasz nadrzędny div został teraz "przyklejony" do góry strony poprzez "top: 0" i zajmuje całą szerokość "width: 100%". Aby nasze odnośniki, które mają "display: block" znajdowały się koło siebie dodajemy im "float: left", aby "spływały w lewo". Dorzuciłem również padding, żeby ciut lepiej wyglądały (padding z góry i z dołu: 14px, z lewej i z prawej: 16px). Pokazałem również jak przykładowy element przesunąć w menu w prawo: jeden z odnośników ma klasę"right", która to w CSS ma "float: right" i już, "spływa w prawo".

Dropdown menu
Wypróbuj

Równie prosto można dodać rozwijane menu. W HTML-u zdecydowaliśmy o jego strukturze: div nadrzędny z klasą "dropdown", odnośnik z klasą "dropbtn" oraz nasze rozwijane menu (z początku ukryte) z klasą"dropdown-content". Ciut więcej zmian jest w samym CSS-ie, ale nie jakoś kosmicznie dużo. Zmieniony został selektor naszych "zwykłych" opcji menu, żeby nie uwzględniał "zagnieżdżonych" w dropdownie odnośników, a więc z ".menu a" na ".menu > a, .dropbtn", a sam "float:left" został w nich zastąpiony przez "display:inline-block" (jest to niezbędne, żeby później nasze rozwijane menu pojawiało się pod naszym elementem z menu). Podobnie uaktualniamy pozostałe selektory, które mają się tyczyć tylko "głównego menu". Następnie stylujemy już nasz dropdown przez dodanie mu "display:inline-block" podobnie jak dla reszty opcji. Z początku nasz "dropdown-content" ma być ukryty więc ma "display:none", oraz ma się znajdować pod odpowiednią pozycją w głównym menu więc "position: absolute". Chcemy też żeby pojawiał się na wierzchu więc ma "z-index: 1". Reszta to kosmetyka, żeby lepiej wyglądał. Podobnie niżej mamy kosmetykę dla ".drop-down a" czyli naszych odnośników w dropdownie i odpowiednio zmiana koloru ich tła przy ":hover". Najważniejszy jest ostatni hover, czyli ".dropdown:hover .dropdown-content", który to sprawia, że nasz dropdown się pokazuje dzięki "display:block".

I to już koniec pierwszej części z podstawowymi menu. Pora na fajerwerki.

JavaScript - po co on nam właściwie jest? Jak wiadomo HTML odpowiada za strukturę naszej strony, natomiast CSS za jej prezentację. Całość jest jednak statyczna: niezmienna zawartość i niezmienny wygląd. Co jeśli natomiast chcemy aby strona była dynamiczna? Aby coś się zwijało, rozwijało, klikało, wyskakiwało, obracało i wiele wiele innych, których nasza dusza zapragnie? Wtedy właśnie wchodzi JavaScript - czyli logika naszej strony. Można przecież powiedzieć: "Hej, przecież jest PHP, przenosi nas na strony, logujemy się nim, trzyma naszą sesję, obsługuje czat i całą masę innych rzeczy" i oczywiście będziecie mieli rację. PHP natomiast jest po stronie "serwerowej" czyli odpowiada za funkcjonalności forum. JavaScript jest po stronie "klienckiej" czyli naszej przeglądarki i idealnie nadaje się do obsługi bajerów po stronie wyglądu. Koniec nudnego wstępu, jako że o JavaScript nie robiłem poradnika, będę tutaj go ciut dogłębniej tłumaczył na przykładach naszych wypasionych menu. No i oczywiście odsyłam do doskonałych poradników: https://www.w3schools.com/js/default.asp

Zakładki

Kto nie kocha zakładek? Mały paseczek w który można klikać i treść naszej strony się podmienia - co za oszczędność miejsca! Oto jak je robić: Wypróbuj

HTML jest prosty: div z naszymi zakładkami oraz poukrywane divy z aktualną treścią (".tabcontent {display: none}"). Poza tym jest cała masa stylowania tylko po to, żeby jako tako wyglądało (paddingi, kolory tła etc.). Co jest w tym CSS-ie ważne, poza ukryciem treści naszych divów? Oczywiście przystylowane naszych przycisków: "border, outline oraz cursor". Cała magia dzieje się w naszej ćwiartce od JavaScriptu. Mamy tam zdefiniowaną funkcję openCity(), która przyjmuje dwa parametry: event oraz nazwę miasta. Event to w dużym skrócie to co przydarza się naszemu elementowi: który to element, czy kliknęliśmy, zmiana treści i takie tam. Jak widać w naszym HTML-u przy przyciskach mamy wywołania tej funkcji za każdym razem z wbudowanych eventów raz zdefiniowaną nazwą miasta.
W samej funkcji pobieramy z dokumentu wszystkie elementy z klasą "tabcontent" i przypisujemy je do zmiennej o takiej nazwie. Dzięki temu później możemy się do nich odwoływać i je zmieniać, co właśnie robimy. W pętli od 0 do długości naszej tablicy z naszymi elementami (czyli rozmiarowi naszej tablicy, czyli ilości naszych elementów z daną klasą) ustawiamy każdemu z nich "display" na "none" (zupełnie jak w CSS). Odwołujemy się do każdego elementu przez jego indeks w naszej zmiennej tablicowej. Jest to niezbędne, aby ukrywać poprzednio wyświetlone zawartości przy kliknięciach. Podobnie dla każdego elementu z klasą "tablinks" czyli naszych przycisków usuwamy klasę CSS, aby poprzednio kliknięty przycisk nie był nadal wybrany. Następnie z dokumentu wybieramy ten div o id przekazanym do funkcji jako parametr (nazwa miasta) i wyświetlamy go przez "display" ustawione na "block". Tak samo do aktualnie klikniętego przycisku, który wybieramy z naszego eventu poprzez "currentTarget" dodajemy klasę CSS "active". I to już tyle, w skrócie: ukrywamy wszystkie div-y z treścią, "odaktywniamy" wszystkie przyciski, odkrywamy stosowny div z wybraną treścią, ustawiamy kliknięty przycisk jako aktywny. I w ten sposób przełączamy się między zakładkami. Prawda, że proste?

Domyślne wybranie zakładki
Wypróbuj

Aby wybrać jedną z zakładek jako "klikniętą" na początku, żeby nie było pustego miejsca, dodałem do jednego z przycisków unikatowe id="defaultOpen". Następnie w mojej sekcji JavaSciprt wywołałem kliknięcie w ten przycisk poprzez wybranie go z dokumentu po wcześniej dodanym id (na samym dole mojej ćwiartki od JavaScript).

Zamykanie zakładek
Wypróbuj

Aby zamknąć zakładkę wystarczy dodać tylko przycisk, który będzie służył do zamykania i zmienić "display" wybranego elementu na "none". W tym celu dodałem do każdej zakładki odpowiedni span, który to imituje przycisk. W jego atrybucie "onclick" zdefiniowałem, żeby zmienił się styl jego nadrzędnego elementu (czyli całej zakładki). I już, takie proste modyfikacje można wprowadzać w jednej linii, chociaż trochę zakłócają separację i pewnie lepiej byłoby to przenieść do osobnej JavaScriptowej funkcji (jakbyśmy w przyszłości chcieli zmieniać to zachowanie, np. wyświetlać pop-up żądający potwierdzenia to mamy już gotową funkcję, którą należy tylko trochę rozbudować). Ja wiem, że nigdy tego nie zmienię bo właśnie przechodzę do kolejnego przykładu.

Boczna nawigacja

Będzie tu kilka przykładów jeden pod drugim więc trzymajcie się mocno. Będą się różniły tylko JavaSciptem więc nie ma powodu do obaw - na pewno się połapiecie.

Najpierw zwykłe wysuwane menu z lewej
Wypróbuj

Jak zwykle w HTML-u mamy prostą strukturę naszego menu składającego się z kilku odnośników, przycisk "open" otwierający nasze menu oraz trochę treści do zapchania strony. Fajny myk to "×" reprezentujący znak "x" w HTML-u. W CSS-ie są głównie bajery do wyglądu, ale co jest istotne: nasze wysuwanie opiera się na atrybucie "width" naszego .sidenav głównego div od menu. Ustawiając "overflow-x: hidden;" sprawiamy, że wszystko co wystaje z naszego menu (czyli nasze napisy, nasze odnośniki, nasze opcje) jest ukryte jeśli się nie mieści. Jeśli mamy szerokość = 0, to nic się nie mieści i tym samym nasze menu jest ukryte. Zwiększając width odsłaniamy menu. Dokładnie to się dzieje w naszych mega-prostych funkcjach JavaScript openNav() i closeNav(), które nie przyjmują żadnych parametrów, są wywoływane przez 2 zdefiniowane przez nas w HTML-u przyciski i nie robią nic poza zmianą parametru "width" naszego menu. Proste, eleganckie, skuteczne.

Przesuwanie treści strony
Wypróbuj

Chcesz przesunąć treść strony, żeby menu je zepchnęło zamiast zasłonić? Dodaj "marginLeft" o odpowiedniej wartości (o takiej, jaka jest szerokość menu) i już! Strona się przesuwa wraz z menu.

Przyciemnianie treści strony
Wypróbuj

Chcesz dodatkowo przyciemnić stronę gdy menu jest otwarte? Ustaw "backgroundColor" całego body na takie o większej przezroczystości.

Pełny ekran
Wypróbuj

Chcesz, żeby menu wyjeżdżało na całą stronę? Daj mu szerokość na "100%".

Menu z prawej
Wypróbuj

Chcesz, żeby menu wyjeżdżało z prawej strony? Daj mu "right:0", zamiast "left:0" w CSS od .sidenav. Podobnie można wysuwać z góry/dołu zmieniając height oraz top/bottom.

Hover nawigacja
Wypróbuj

Jako bonus menu z lewej strony składające się z rozsuwanych po najechaniu przycisków. Nothing fancy, tylko CSS. Działa poprzez myk z ujemnym "left". Tak naprawdę nasze przyciski są w całości od początku, ale widać tylko ich część, gdyż zaczynają się "-80px" z lewej strony krańca ekranu (poza ekranem). Pod :hover mamy po prostu "left: 0" i wtedy zaczynają się od brzegu (czyli wreszcie widzimy je całe). To pokazuje, że czasem proste rozwiązania mogą być naprawdę fajne i wystarczy tylko CSS żeby działało. Enjoy!

PS. Nadal czekam na propozycję kolejnych tematów do poradników oraz wszelkie uwagi/sugestie co można by poprawić.
[Profil]
    [warsztat techniczny]
   Podziel się na:  
Alice Parks
[Usunięty]

Wysłany: 2017-06-07, 13:07   

Dałoby się zrobić wysuwane menu, do którego otwarcia kliknięcie jest potrzebne na fragmencie grafiki, która cały czas jest widoczna przy krawędzi ekranu? Coś podobnego widziałam na darkestnight.pl z tym, że oni mają pasek na całą wysokość okna.
 
   Podziel się na:  
Luxter



gram na
https://test-nodebb.herokuapp.com/

o sobie
Bug programowania


Wysłany: 2017-06-07, 13:45   

Oczywiście, da się praktycznie wszystko.
X: Czy można zrobić tak, żeby forum parzyło mi kawę jak je otwieram?
Ja: Jaki masz model ekspresu do kawy?
Akurat to pewnie byłby overkill, ale nic nie stoi na przeszkodzie, żeby serio to napisać.

Wzorując się na darkestnight.pl i tym co zrozumiałem z opisu chodzi o coś takiego?
Wypróbuj

Edytowałem pierwszy przykład z wysuwanym menu (bez przesuwania treści strony etc.). Nasz przycisk otwierający zamieniłem na pionową belkę o id "sidenavstrap", a wewnątrz niego właściwy przycisk z klasą "open". W CSS dodałem ich odpowiednie stylowanie:

  • sidenavstrap - przyklejamy go do lewej i górnej krawędzi poprzez "position:fixed" oraz "top" i "left" na "0". Dałem mu arbitralną szerokość i wysokość na "100%", kolor ma taki sam jak menu i czas animacji przy wysuwaniu menu jak zwykle.
  • open - ustawiamy go względem naszego dodanego bocznego paska, czyli "position:absolute", w połowie wysokości i na całą szerokość paska. Kolor tła i czcionki, żeby go było widać i pokazać ile faktycznie zajmuje (w co można kliknąć) i kursor dla szpanu.


W JavaScript wykorzystałem ten sam myk co we wcześniejszych przykładach z przesuwaniem strony głównej "main", żeby pasek przesunął się razem z menu. No i dodałem "margin-left: 50px" w "main", żeby na początku pasek go nie przysłaniał.

Oczywiście każdy z tych elementów można zamienić na obrazek (i może z minimalną modyfikacją CSS lub nawet bez) będzie śmigało.
[Profil]
    [warsztat techniczny]
   Podziel się na:  
Alice Parks
[Usunięty]

Wysłany: 2017-06-07, 16:20   

A żeby zamykało się identycznie jak się otwiera, to co trzeba zmienić?
 
   Podziel się na:  
Luxter



gram na
https://test-nodebb.herokuapp.com/

o sobie
Bug programowania


Wysłany: 2017-06-07, 16:43   

Wypróbuj

Można to zrobić na kilka sposobów (wprowadzając jakieś flagi czy już raz kliknęliśmy czy nie, trzymając funkcje w tablicach i się po nich iterując etc.). Ale ja jako walor edukacyjny proponuję przypisać funkcje do zmiennych.

Dygresyjny przykład:
Możemy mieć funkcje idź(), jedz(), śpij() etc. i możemy je wywoływać poprzez ich nazwę. Ale możemy je też przypisać do zmiennej i wtedy wywoływać je poprzez nazwę zmiennej, np. var akcja = idź; i później akcja() (to dokładnie to samo co napisanie idź()). Po co? Ano po to, że teraz można dynamicznie podmienić wartość naszej zmiennej przez inną funkcję np. akcja = jedz(); i później wywołując akcja() (dokładnie tak samo jak za pierwszym razem) wykona się zupełnie inny fragment kodu.
Mam nadzieję, że widać iż o coś takiego nam chodzi (chcemy wywoływać tę samą zmienną, która raz będzie funkcją otwierającą menu a raz zamykającą).

No i teraz po tym wyjaśnieniu kod powinien być czytelny. Pozbyłem się dodatkowego przycisku z menu oraz jego stylowania CSS. w JavaScripcie utworzyłem dwie zmienne na domyślną funkcję (tą, która ma się zadziać za pierwszym razem - czyli otwarcie menu), oraz inną (czyli zamykającą). Następnie dodałem nową funkcję switchNav(), która odpowiada za wywołanie funkcji spod zmiennej defaultFunction i zamienienie tych utworzonych dwóch zmiennych miejscami (przy użyciu zmiennej pomocniczej - mamy dwa kubełki, których zawartość trzeba zamienić, oczywiście potrzebny nam jest trzeci, pomocniczy, żeby zrobić miejsce). I to tyle.
[Profil]
    [warsztat techniczny]
   Podziel się na:  
Alice Parks
[Usunięty]

Wysłany: 2017-06-07, 18:39   

Dzięki! Właśnie o taki sposób otwierania i zamykania menu mi chodziło. Popróbuję z tym co mam u siebie i w razie problemów się odezwę tutaj. :)
 
   Podziel się na:  
Alice Parks
[Usunięty]

Wysłany: 2017-06-07, 21:36   

Ogarnęłam sobie przystosowanie do tego co mam obecnie, ale bez względu na przeglądarkę, po zamknięciu menu nie daje się go ponownie otworzyć i trzeba odświeżać stronę. Da się to jakoś poprawić?
 
   Podziel się na:  
Luxter



gram na
https://test-nodebb.herokuapp.com/

o sobie
Bug programowania


Wysłany: 2017-06-07, 22:47   

Nie bez większej ilości szczegółów. Podrzuć kod/opisz dokładniej problem.
_________________
„Common sense is so rare that it should be classified as a super power.” ~ Bill Murray.
„Where ignorance is bliss, 'tis folly to be wise.” ~ Thomas Gray.
[Profil]
    [warsztat techniczny]
   Podziel się na:  
Alice Parks
[Usunięty]

Wysłany: 2017-06-08, 08:07   

Wybacz alarm, okazało się, że coś źle skopiowałam z Twojego źródła i mu ucięło linijkę kody. Wszystko już śmiga :)
 
   Podziel się na:  
Wyświetl posty z ostatnich:   
[ ODPOWIEDZ ]
Nie możesz pisać nowych tematów
Nie możesz odpowiadać w tematach
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Nie możesz ściągać załączników na tym forum
Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  




wxv.pl - załóż forum dyskusyjne za darmo





administracja
Partnerzy
Masz tumblr z avatarami, bloga z kodami lub coś innego, co określa Twoją twórczość? Wyślij na pw administracji banner o wymiarach: 40x120px