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.
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:
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:
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.
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA