HTML #4 - "Wysuwane" menu

(c) Erenae

Hejka! Więc dziś mam dla was instrukcję na "wysuwane" menu. Użyłam tego, przy aktualnym szablonie przy popularnych postach(właściwie popularnym poście). Bawimy się tu kodem CSS oraz HTML.


Przykład poniżej:

See the Pen "wysuwane" menu by xvenom (@xveenom) on CodePen.

I. Pierwsze co to musimy utworzyć nasze menu, razem z nagłówkiem i częścią z linkami. Więc nasz kodzik HTML, który wklejamy do gadżetu HTML/JavaScript, wygląda tak:

<div id="menu">
<h2>MENU</h2>
<a class="navi" href="#">Link 1</a>
<a class="navi" href="#">Link 2</a>
<a class="navi" href="#">Link 3</a>
<a class="navi" href="#">Link 4</a>
<a class="navi" href="#">Link 5</a>
<a class="navi" href="#">Link 6</a>
<a class="navi" href="#">Link 7</a>
<a class="navi" href="#">Link 8</a>
  </div>

- menu - możecie zmienić na swój wyraz, jaki chcecie
- navi - tutaj też możecie wpisać jakiś swój wyraz, jest to klasa linków
- <h2>MENU</h2> - to jest nagłówek gadżetu, czyli nasze wyświetlone "MENU"
- # - zmieniacie na swój link
- Link 1, 2... - zmieniacie na własną nazwę linku

II. Kiedy już kod HTML mamy za sobą, przechodzimy do całej magi "wysuwania się" menu.

#menu {
  height: 55px;
  overflow: hidden;
  transition: all 1s ease-in;
-o-transition: all 1s ease-in;
-webkit-transition: all 1s ease-in;
-moz-transition: all 1s ease-in;
}

Więc tutaj co zrobiliśmy to:
- height: 55px - zmniejszyliśmy wysokość naszego menu do 55 pikseli, co pozowoli tylko na wyświetlanie samego nagłówka gadżetu,
- overflow: hidden; - ukryliśmy zawartość, która wylewała się z gadżetu po zmniejszeniu jego wysokości,
- ostatnie cztery linijki kodu to dodanie czasu "przejścia"/"animacji" do każdej przeglądarki.

III. Po wykonaniu wyglądu przed najechaniem kursorem na nasze menu, pora na "wysunięcie" naszego menu. Czyli w skrócie mówiąc, piszemy kod znowu opierający się na wysokości.

#menu:hover {
  height: 210px;
  transition: all 1s ease-out;
-o-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
}

Tutaj do #menu dodaliśmy pseudo klasę :hover, która służy za akcje wyświetlające się po najechaniu na wybrany element kursorem.
Następnie zwiększyliśmy wysokość kodem: height: 210px;, czyli wysunęliśmy menu na wysokość 210 pikseli.
I tak samo jak w poprzednim kodzie ostatnie 4 linijki kodu to czas animacji, przejścia elemntu po najechaniu na niego kursorem.

To tyle na dzisiejszą instrukcję. Jeśli macie jakieś pytania piszcie w komentarzach lub w zakładce "Pytania".