Pokrótce o responsywnych stronach: ruchome menu
W tym wpisie opiszę to, jak tworzyć skaczące/ruchome menu w CSS-ie. To, co chcemy osiągnąć jest proste, lecz czymś, z czym się nie spotkałem - menu, które raz będzie wyświetlane z boku, a raz na górze, i to bez użycia EcmaScript.
Wprowadzenie
Pojęcie responsywne strony istnieje od dawna. Sam miałem okazje takie pisać, z użyciem Twitter Bootstrap. Ważnym elementem responsywnej strony na pewno są media queries zażyte w plikach kaskadowych arkuszy stylów(to na przykład te, które mają rozszerzenie .css, chociaż rozszerzenie tak naprawdę nic nam nie mówi o zawartości pliku, a jest jedynie wskazówką).
Do dzieła
Potrzebujemy odpowiedniego kodu strony. Oto przykładowy kod:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Moja prosta stronka</title> </head> <body> <div id="site"> <nav id="main-menu"> <ul> <li><a href="/index.html">O mnie</a></li> <li><a href="/projekty.html">Projekty</a></li> </ul> </nav>\ <div id="content"> O mnie </div> </body> </html>
Teraz potrzebujemy odpowiedniego kod CSS. Oto on:
#site { display: flex; flex-direction: row; } #main-menu li { display: block; } @media all and (max-width: 600px) { #site { flex-direction: column; } #main-menu li { display: inline; } }
Nie zrobię teraz wprowadzenia do css, ale warto zwrócić uwagę na jeden blok, z takim nagłówkiem:
@media all and (max-width: 600px)
Powoduje on, że zawarte w nim reguły zostaną uaktywnione tylko wtedy,, gdy szerokość "okna przeglądarki" będzie mniejsza bądź równa 600px. Celowo ująłem "okno przeglądarki" w cudzysłów, gdyż nie chodzi o okno przeglądarki, a obszar przeznaczony do wyrenderowania strony. W przedstawionym nagłówku użyto media queries. Należy pamiętać, że reguły w css-ie są przetwarzane od góry w dół, tak więc, w naszym przypadku, domyślnymi ustawieniami są ustawienia nad naszym nagłówkiem. Jednak teraz spójrzmy na kod css w całości. Reguła "display: flex" powoduje, że dzieci elementu o identyfikatorze site będą wyświetlone w specjalny sposób. Ich rozmiar, a także marginesy będą dobierane automatycznie. Z właściwością flex powiązanych jest sporo innych właściwości, jednak nas interesuje flex-direction. W elemencie wyświetlanym w sposób elastyczny(ang. flex) są dwie osie: oś główna i oś do niej prostopadła. Na osi głównej umieszczane są dzieci naszego elementu. Oś główną wybieramy przez flex-direction. W naszym wypadku domyślnie jest to row, czyli dzieci będą umieszczone w wierszach. Możemy także zadecydować, jak wzgldem osi prostopadłej do osi głównej będą umieszczone elementy. Służy do tego właściwość align-items. Możemy także zmienić wyjustowanie pojedyńczego elementu, poprzez właściwość align-self.
Co jednak robimy w naszym bloku warunkowym? Zmieniamy flex-direction na column i ustawiamy wyświetlanie elementów menu na liniowy, więc elementy menu nie będą wyświetlane w oddzielnych wierszach. Dzięki temu dopasowujemy układ strony do mniejszych ekranów.
Dalsze modyfikacje - wyświetlanie reklam
Możemy dodatkowo wyświetlać na stronie reklamy. Dobrze jest wyświetlać reklamy domyślnie po prawej stronie okna, czyli umieścić blok reklam po elemencie o identyfikatorze content. Jednak można użyć właściwości order dla reguł umieszczonych w media-queries, by ustawić kolejność wyświetlania elementów. Dzięki temu możemy wyświetlić reklamy pod menu, gdy okno jest dosyć małe.
To już wszystko na dzisiaj! Efekt można obejrzeć w przeglądarce Mozilla Firefox, wybierając styl flex, będąc na stronie slawek.lach.art.pl