Background Image

Google National Park inspired navigation using flexbox

Przez — w kategorii Poradniki w dniu 10 października, 2016

Tagi:

Dzięki CSS flexbox możemy stworzyć kilka naprawdę atrakcyjnych i nowoczesnych układów treści ze względną łatwością. W dzisiejszym poradniku przyjrzymy się interfejsowi Google Natural Parks i pokażę wam jak stworzyć taką nawigację przy użyciu CSS Flexbox.

Jak zawsze zanim zaczniemy, spójrzmy na to, co będziemy robić – większa wersja (desktopowa) dostępna po kliknięciu w przycisk poniżej

See the Pen wzmQzb by Wojciech (@wojtek1150) on CodePen.0

Na wersji powyżej wyświetlona jest wersja mobilna nawigacji.

Przygotowanie

Zacznijmy od utworzenia struktury HTML naszej nawigacji. Tworzymy div z pięcioma linkami wewnątrz (możesz użyć tyle elementów ile chcesz). Każdy link posiada wewnątrz  2 divy, pierwszy z klasą overlay który będzie odpowiadał za przyciemnienie tła, a drugi z klasą inner, w której znajduje się opis pozycji. Poniżej struktura

Wstępne style CSS

Mając gotową strukturę przejdźmy do dodania kilku wstępnych styli, a konkretnie:

  • Ustawimy główny kontener jako flex oraz nadamy minimalną wysokość (dla wsparcia mobilnych urzadzeń) oraz stałą wysokość wynoszącą 100vh czyli 100% wysokości okna przeglądarki
  • Ustawiamy stałą szerokość dla wszystkich linków. Do tego posłuży nam atrybut flex: 1. Dodatkowo ustawimy podstawowy kolor na biały oraz skonfigurujemy płynne przejście i parametry tła
  • Po najechaniu link będzie 3 razy większy od innych (szerszy)
  • Ustawimy tła dla każdego linku

Do tej pory udało nam się osiągnąć taki oto efekt:

See the Pen Google National Park inspired navigation using flexbox / STEP #1 by Wojciech (@wojtek1150) on CodePen.0

Stylizacja linków

Zajmijmy się teraz wyglądem poszczególnych elementów. Domyślnie chcemy mieć wyświetlany tylko tytuł z kategorią. A opis niech pojawia się po najechaniu. Dodamy też lekki efekt opóźnienia dla smaku. Jeśli usuniesz efekt opóźnienia zrozumiesz co mam na myśli. Ponadto efekt wykonamy przy użyciu translate3d aby uzyskać tzw. efekt slajdu. Aby zapobiec efektowi migotania w niektórych przeglądarkach dodamy transform-style: preserve-3d; 

Oto nasz styl CSS:

Zobaczmy co nam to dało:

See the Pen Google National Park inspired navigation using flexbox / STEP #2 by Wojciech (@wojtek1150) on CodePen.0

Dodajemy RWD

Strona wygląda już całkiem nieźle na dużych ekranach, ale na telefonach i tabletach już nie jest tak kolorowo. Będziemy musieli dla mniejszych rozdzielczości wprowadzić kilka zmian.

  • Zmienić kierunek ułożenia elementów na wertykalny za pomocą flex-direction: column. W ten sposób będziemy mieli linki jeden pod drugim.
  • Zapobiec wyświetlaniu opisu linki, bo nie mamy na niego miejsca. Elementy zostają z domyślnym układem
  • Zmniejszyć rozmiar krojów czcionki dla mniejszych ekranów

 

Dodatkowe efekty

Dodajmy jeszcze wyciemnienie dla elementów, które nie są aktualnie podświetlane. Oraz powiększenie tytułu dla aktualnie zaznaczonej pozycji. Jeśli pomyślałeś o javascripcie to jest to jakieś rozwiązanie, dla wszystkich elementów tylko nie dla aktualnego dodajemy jakąś klasę. Proste i skuteczne. Ale wymyśliłem pewną małą sztuczkę, dzięki której zrobimy to przy pomocy samego CSS’a. Tak, wiem, że nie ma selektora który daje nam taką możliwość, mamy tylko następny element i wszystkie pomiędzy jakąś grupą. Ale można zrobić taki oto trik:

Da się? Da 🙂

Jeszcze dodajmy nasz efekt powiększenia tekstu. Do h2 trzeba dodać transition, a następnie dodać na efekt hover większy font-size. Dodajmy jeszcze fixa dla RWD:

Wsparcie dla innych przeglądarek

Demo działa na wszystkich najnowszych przeglądarkach obsługujących schemat flexbox. Wsparcie dla tego elementu jest bardzo dobre. Ciekawszych szerszych informacji odsyłam tutaj: http://caniuse.com/#feat=flexbox

 

Pozdrawiam, W.

Dodaj komentarz