Navigáció és hero.

• a navbar felépítése és összecsukása
• lenyíló menü (dropdown) a navigációban
• színes és áttetsző navigáció
• háromféle hero szakasz

A navigációs sáv részei: a márkanév (navbar-brand), a kapcsológomb (navbar-toggler), és az összecsukható rész (collapse navbar-collapse) a menüpontokkal (navbar-nav → nav-item → nav-link). A navbar-expand-lg azt jelenti: 992 px-től kinyitva, vízszintesen látszik a menü, alatta összecsukódik, és a hamburgerikon nyitja.

A kapcsológomb a data-bs-toggle="collapse" és a data-bs-target="#…" attribútummal hivatkozik a lenyíló részre – ehhez be kell tölteni a Bootstrap JavaScriptjét, különben a gomb nem csinál semmit. A példa mobilnézetben indul: kattints a hamburgerikonra!

• navbar-expand-lg 992 px-től kinyitva
• ms-auto a menü jobbra tolva (bal margó: auto)
• active + aria-current="page" az aktuális oldal

Sötét háttér esetén a menüpontoknak világosnak kell lenniük: a Bootstrap 5.3-ban ezt a data-bs-theme="dark" attribútum intézi (a régebbi navbar-dark osztály is működik, de elavult). A lenyíló menü a dropdown elemmel és a data-bs-toggle="dropdown" attribútummal készül. A keresőmező kapjon aria-label-t, mert nincs látható címkéje.

• bg-primary háttérszín
• data-bs-theme="dark" világos menüszöveg
• me-auto a menü után minden jobbra kerül
• dropdown-menu, dropdown-item

Az „üveghatás” a backdrop-filter: blur() tulajdonságból jön: az elem mögötte lévő tartalmat mossa el. Ezért csak akkor látszik, ha a menü alatt valami mozog – itt egy háttérképes hero és a tartalom. A sticky-top a menüt görgetéskor az ablak tetején tartja. Görgess az ablakban!

A hero háttérképe elé egy félig átlátszó sötét réteg kerül (két háttérréteg: színátmenet a kép fölött), hogy a fehér szöveg bármilyen képen olvasható maradjon.

A hero az oldal első, nagy figyelemfelkeltő szakasza: egy fő állítás, egy rövid magyarázat és egy-két gomb. A Bootstrapben ehhez nincs külön komponens, utility osztályokból rakjuk össze: py-5 (függőleges belső margó), text-center, display-4 (nagy cím), lead.

A kétoszlopos hero kis képernyőn egymás alá rendezi a szöveget és a képet (col-lg-6), laptopon egymás mellé. A min-vh-100 az ablak teljes magasságát adja, a d-flex align-items-center függőlegesen középre teszi a tartalmat.

1. Készíts navbart három változatban: világos, színes (sötét témával) és áttetsző. Ellenőrizd mindhármat 375 px-en is: nyílik-e a menü?
2. Állítsd át a navbar-expand-lg-t navbar-expand-md-re: melyik szélességen változik meg a viselkedés?
3. Készíts három hero szakaszt: egyszínű/színátmenetes, háttérképes (sötétítő réteggel), és kétoszlopos képpel.
4. Tedd a navigációt a görgetéskor is láthatóvá (sticky-top), és nézd meg, mi a különbség a fixed-top-hoz képest (a fixed-top nem foglal helyet, ezért a tartalom alácsúszik).

Bővítési ötletek

• keresőmező a navigációban, mega menü (több oszlopos lenyíló rész – lásd a 9. modult), animált hero (lásd a 7. modult).