#53. Komponent – menu

Menu w Bootstrap

W frameworku Bootstrap znajdziemy wiele komponentów dla stron internetowych. W tym momencie zobaczysz jak dodać górną nawigację,

Zobacz w poniższym przykładzie jak dodałem komponent nawigacji wyciągnięty prosto z dokumentacji.

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

floral-night-sycex

floral-night-sycex danielminschinski

Rozbudowane menu

Nadszedł czas, aby zbudować dwupoziomowe menu. Nasz navbar będzie zawierał kilka odnośników, a jeden z nich będzie miał wysuwaną listę, tzw. “dropdown”.

Posłużymy się ostatnim przykładem. Dodamy do niego do elementu ul klasy nav-justified. Dzięki niej, odnośniki będą rozciągnięte na całą szerokość strony, a napisy będą wyśrodkowane. Nie zapomnij dodać odniesienia do skryptów. Sprawdź rezultat:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

floral-night-sycex

floral-night-sycex danielminschinski

Menu w postaci fixed

Na koniec dzisiejszego materiału pokażę Wam, jak zrobić, aby menu zmieniało się w zależności od rozdzielczości. Na mniejszych ekranach jest zwinięte, inaczej “hamburger”, natomiast na większych rozdzielczościach navbar wyświetlany będzie standardowo. 

W dzisiejszych czasach jest to komponent obowiązkowy. Sprawia że nawigacja dostosowuję się na urządzenia mobilne.

Gdy komponenty zmieniają się dynamicznie, to wymaga podpięcia dodatkowych bibliotek Javascript. Obie jak ostatnio znajdziesz w kodzie z przykładem. Ważne jest, aby plik jQuary był podpięty zawsze przed plikiem JS Bootstrapa, ponieważ Bootstrap korzysta z biblioteki jQuery. Sprawdź rezultat. Zmniejszaj i powiększaj okno przeglądarki:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

gallant-sun-70sv1

gallant-sun-70sv1 danielminschinski

Najważniejsze formy prezentacji menu dzięki frameworkowi Bootstrap zobaczyłeś dzięki zaprezentowanym przykładom. Pobaw się innymi sposobami prezentacji menu – skorzystaj z dokumentacji Bootstrapa i sprawdź możliwości frameworka. 

Jak zwykle w kolejną środę o 15 zobaczysz kolejny materiał na moim blogu. Wg “Planu nauki Frontend Developera” zobaczysz jak dodawać przyciski z pomocą frameworka Bootstrapa.

Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb.

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!