HTML - Tworzenie stron | Odcinek video

09. Flexbox - Menu główne z wersją mobilną, czyli tzw. hamburger

MIROSŁAW ZELENT

Dzisiaj zrealizujemy z użyciem właściwości flexboxowych menu główne witryny - będzie to górna belka nawigacyjna, która pozostaje na zawsze "przyklejona" na górze serwisu. A ponadto - przy zmniejszeniu szerokości okna przeglądarki - menu zamieni się w wersję mobilną - jest to tzw. hamburger. Naszym celem jest nie tylko ukończyć ten projekt, lecz przede wszystkim w pełni zrozumieć proces tworzenia nawigacji z użyciem Flexboxa. I dlatego warto zobaczyć ten film - i go razem ze mną przepracować - zajrzymy głębiej - do mechanik, sposobów, sztuczek... oraz do całego pomyślunku i "pomysłu" w jaki sposób takie menu desktopowo/mobilne działa.

Partner odcinka

Partnerem odcinka jest WSKZ, czyli Wyższa Szkoła Kształcenia Zawodowego:

• Zobacz ofertę edukacyjną WSKZ: www.studia-online.pl

Jest to uczelnia, która od ponad 20 lat oferuje nowoczesne studia, prowadzone z wykorzystaniem metod i technik kształcenia na odległość. W ofercie znajdują się studia licencjackie, magisterskie, jednolite magisterskie i podyplomowe oraz kierunki inżynierskie – szczególnie cenione przez osoby, które chcą zdobyć kompetencje techniczne i specjalistyczne.

Studia inżynierskie to propozycja dla osób zainteresowanych naukami ścisłymi oraz rozwojem w branżach informatycznych, technicznych, przemysłowych czy związanych z najnowszymi technologiami, w tym także AI oraz uczeniem maszynowym.

Znajdź w filmie

Tutoriale posiadają tzw. timestamps (chwile czasowe) - dzięki nim łatwo odnajdziesz interesujące fragmenty wiedzy. Wystarczy kliknąć na podane w nawiasach kwadratowych momenty filmu, by przewinąć tutorial dokładnie do interesującego Cię miejsca w odcinku.

[ 00:00:00 ] Wstęp, opis plików projektu
[ 00:04:18 ] Partner odcinka: Studiuj z WSKZ!
[ 00:05:45 ] Znaczniki semantyczne w HTML
[ 00:09:29 ] Style CSS dla belki nawigacyjnej
[ 00:15:28 ] Wyśrodkuj na osi cross: align-items
[ 00:16:10 ] Linki z display:block oraz paddingiem
[ 00:18:00 ] Rozmieść na osi main: justify-content
[ 00:19:19 ] Właściwość box-sizing: border-box
[ 00:23:10 ] Belka nawigacyjna zasłania content
[ 00:23:58 ] Ustalenie progu przejścia na menu mobilne
[ 00:25:04 ] Menu mobilne - proces dodawania ikonek
[ 00:32:54 ] Rozmiar mobilny dzięki @media
[ 00:33:53 ] Pozycja nav i flex-direction:column
[ 00:36:52 ] Skrypt: otwieranie menu mobilnego
[ 00:39:28 ] Skrypt: zamykanie menu mobilnego
[ 00:42:13 ] Skrypt: resize okna przeglądarki
[ 00:48:16 ] Skrypt: zamykanie menu przy kliknięciu body
[ 00:51:26 ] Refaktoryzacja działającego skryptu
[ 00:53:19 ] Kilka słów podsumowania