@nintyfanPokrótce o responsywnych stronach: ruchome menu

Pokrótce o responsywnych stronach: ruchome menu

27 czerwca 2015, 10:53

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