Tworzymy responsywną stronę z Off-Canvas Menu — projekt

Jeśli korzystałeś z mobilnej wersji Facebooka na pewno natknąłeś się na wysuwane menu z prawej bądź lewej strony. Treść znika jakby w połowie za ekran a z boku wysuwa się menu — proste i funkcjonalne. Tym właśnie jest menu off-canvas — ukrytym poza stroną menu, które wjeżdża po aktywacji. Nie koniecznie z boku. Na przestrzeni 2 lekcji zajmiemy się stworzeniem responsywnej strony z takim właśnie menu, które pojawi się na urządzeniach mobilnych i małych tabletach. W dzisiejszej lekcji projekt strony. Serdecznie zapraszam.

Dla tych co jeszcze nie wiedzą o co chodzi, poniżej umieszczam obrazek, który zobrazuje działanie takiej strony:

Jeśli natomiast wszystko jest jasne, przejdźmy do zaprojektowania naszej strony. Ja będę pokazywał wszystko na bazie Photoshopa, jednak nic nie stoi na przeszkodzie aby wykorzystać do tego choćby Gimp’a.. Wracając do tematu, otwieramy Photoshopa i tworzymy nowy dokument o wymiarach 1600x2000 px — wysokość nie ma tu zbytniego znaczenia, jeśli dasz więcej lub mniej nic się nie stanie, chodzi o to by zmieścić to, czego potrzebujemy — oraz dodajmy 2 pionowe linie pomocnicze. Pierwsza na 200 a druga na 1400 px:

Ok, mamy już przygotówkę, teraz utwórzmy menu. Zacznijmy od stworzenia prostokąta na całą szerokość strony i wysokości 150px oraz kolorze #222222, obrys sobie darujemy. Aby mieć wszystko poukładane — porządek to podstawa dobrego projektu — zróbmy sobie dodatkowo folder header i wrzućmy nasz prostokąt tam pod nazwą header-bg.

Nasza strona będzie bardzo prosta, dlatego nie będzie posiadać zaawansowanego graficznie logo a zwykły tekst. Aby zamaskować moje lenistwo posłużę się Leonardem — “Prostota jest szczytem wyrafinowania” :). Niech nasz tytuł będzie kolorem białym o rozmiarze 36px i pisany darmową czcionką Open Sans — do pobrania tutaj. Ustawmy ją na środku oraz 35px od górnej krawędzi strony. Tytułem strony będzie książka Cutcliffe Hyne’a — Through Arctic Lapland, która jest udostępniona za darmo na tej stronie. Od razu utwórzmy drugą warstwę tekstową z przykładowymi odnośnikami — to będzie nasze menu. Je z kolei na 120px od góry. Możemy je umieścić w podfolderze, żeby było ładniej. Kolor ustawmy biały dla linku aktywnego oraz #AAAAAA dla reszty zakładek. Odstępy dałem na 7 spacji, a rozmiar czcionki na 16px.

Kolejnym krokiem będzie dodanie kresek oddzielających pozycje menu. Posłużymy się pionowymi liniami o kolorze #444444 oraz wysokości 30px. Dodajemy je po każdej pozycji, z wyjątkiem ostatniej. Kreski wrzucamy do folderu menu, żeby nam nie przeszkadzały. Header zrobiony.

Utwórzmy sobie teraz kolejną grupę warstw o nazwie Content oraz utwórzmy 2 warsty tekstowe. Oba o kolorze czarnym (#000000) oraz rozmiarach 36px bold dla tytułu, oraz 14px regular dla subline’a. Ustawmy je na środku oraz w odstępach powiedzmy takich jak na obrazku poniżej.

Mała rada: jeśli chcesz widzieć odstęp danej warstwy od drugiej zaznacz w okienku “warstwy” grupę lub warstwę względem której ma być podany wymiar (możesz zaznaczyć kilka jak ja) oraz trzymając wciśnięty CTRL najedź myszkę na warstwę, która Cię interesuje.

Teraz dodajmy trochę treści na naszej stronie. Nagłówek danego rozdziału ustawmy na 24px bold, a obszar tekstu na 16px regular oraz wcięcia z prawej i lewej po 15px, margines dla pierwszej linii na 25px oraz odstęp między akapitami na 10px. Jeśli nie nadążasz — nie martw się, na zdjęciu poniżej okienko “Akapit” w którym wpisałem podane wartości. Jeśli nie masz go włączonego przejdź do “Okno” → “Akapit”.

Treści mamy, pozostała nam stopka. Aby zachować naszą monochromię utwórzmy boxa o wymiarach 1600px x 50px oraz kolorze #222222. A następne wypełnijmy dowolnym tekstem copyright. Kolor biały, rozmiar czcionki na 14px. Zachowajmy odstępy po 15px, aby wszystko było ładnie w gridzie. Cczemu po 15px? Ponieważ aby treść nie kończyła się równo z ekranem, oraz dlatego, że Bootstrap tak naprawdę jest w gridzie 1170px a nie 1200px (15px marginesu z obu stron na oprawę).

Nasza strona jest gotowa, możemy ją zakodować i w trakcie wprowadzić wygląd na RWD, tak jest prościej i czasem się tak robi. Jednak nasz klient chce zobaczyć projekt strony mobilnej. Tak więc utwórzmy go :)

Nie zamykaj tego projektu, może się przydać do kopiowania treści, co przyśpieszy nam pracę nad projektem. Utwórzmy zatem drugi dokument, tym razem o szerokości 500px i wysokości 800px. Tak wiem, że strony mobilne mają 320px, jednak nasza strona będzie wyglądać tak samo od 320 do 768px więc aby było nam łatwiej operować na liczbach posłużymy się właśnie liczbą 500. Dlaczego dowiesz się już niebawem.

Przydadzą się też linie pomocnicze, więc aby już nie bawić się w ostępy obszarów tekstowych ustawmy je po 15px z prawej i lewej strony. I znów utwórzmy katalog header a wnim prostokąt tym razem o wymiarach 500x75 px. Oraz wstawmy od razu tytuł. Tym razem o rozmiarze czcionki 24px.

Dodajmy teraz ikonkę menu. Zrobimy ją z trzech małych białych prostokątów o wymiarach 25x3 px oraz odległości 5px od siebie. Wyrównajmy je też do środka prostokąta.

Porada: Aby wyrównać obiekt względem drugiego możemy zaznaczyć je oba a następne z górnego menu wybrać “Wyrównaj środki” w pionie lub w poziomie. To te ikonki:

Przenieśmy trochę treści z poprzedniego pliku. Dla tytułu ustawiłem czcionkę na 22px, subline na 12px. Tytuł rozdziału ma rozmiar 18px a treści 14px oraz rozmiar linii 22px. Grubość oraz kolory bez zmian. Prezentuje się to następująco:

Do tego projektu jak widać nie importowałem pierwszego działu (lub drugiego zależy jak liczyć). Ponieważ nie jest nam potrzebny do zobrazowania treści. Zajmijmy się teraz stopką, która też będzie trochę zmodyfikowana. Możemy to zrobić na 2 sposoby. Pierwszy obejmuje pozostawienie wszystkich treści. Drugi polega na pozostawieniu najważniejszej informacji. Różnią się one wysokością stopki. Pokażę to na zdjęciu:

Jak widać oba sposoby prezentują się nieźle. Ja aby Zachować minimalizm pozostanę przy tym drugim. Czyli stopka na 30px wysokości. Pierwsza ma tyle ile miała, czyli 50px. W obu przypadkach font-size na 10px. Kolor oczywiście biały.

Dobrze, mamy już wygląd strony, ale chyba o czymś zapomnieliśmy — o menu… Aby nie tracić układu oraz aby mieć łatwy dostęp do obu treści — ponieważ klient chce zobaczyć menu schowane i wysunięte — musimy zastosować mały trick. Wszystkie warstwy pakujemy do jednego katalogu o wyrafinowanej nazwie Menu-Close oraz duplikujemy grupę kombinacją klawiszy CTRL+J a następnie klikamy prawym przyciskiem na kopię naszej grupy i z menu wybieramy opcję Scal Grupę. Po wykonaniu wszystkich akcji powinno to wyglądać mniej więcej tak:

Teraz utwórzmy kolejną grupę o zaskakującej nazwie Menu-Open i wrzućmy tam nasz obrazek. Zmieńmy mu nazwę na Content. Następnie wyłączmy grupę Menu-Close i działamy dalej…

Zacznijmy od utworzenia prostokąta o wymiarach 350 x 800px i kolorze #1d1d1d. Aby zachować delikatną różnicę w kolorach. Wyrównaj ją do lewej a warstwę Content ustaw zaraz obok, uzyskamy teraz efekt otwartego menu :)

Przyszła pora na dodanie pozycji oraz przycisku zamknij do naszego menu. Przenieśmy wiec nasze pozycje i ustawmy im wysokość linii na 44px. Dodajmy przed i po poziome kreski o kolorze #444444 w odstępach 44px od siebie. Całość wyrównajmy do krawędzi Headera. Oraz 15px od lewej — możemy się posłużyć linią pomocniczą.

Zróbmy teraz jakiś ładny przycisk zamknięcia. Tutaj znowu posłużymy się prostokącikami… Utwórzmy 2 o wymiarach 25x3 px. Pierwszy obracamy o 45 stopni drugi o -45 stopni. Wyrównujemy i mamy naszą prostą i schludną ikonkę :)

Na koniec utwórzmy dodatkową warstwę o nazwie background i wypełnijmy ją kolorem biały. Następnie na sam dół grupy Menu-Open i zablokujmy ją. Teraz włączmy grupę Menu-Close i teraz mamy bardzo prosty podgląd obu stanów. Wystarczy włączyć i wyłączyć warstwę Menu-Open :). Całość prezentuje się tak:

I oczywiście wersja desktop-owa:

W kolejnej lekcji zajmiemy się kodowaniem strony oraz naszego menu Off-Canvas. Na koniec mały bonusik — PSD projektów, dla leniwych :)

[wpdm_package id=’2712' template=”link-template-default-wdc”]

[wpdm_package id=’2711' template=”link-template-default-wdc”]