• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Rozwijające menu - przejście

VPS Starter Arubacloud
0 głosów
179 wizyt
pytanie zadane 21 lipca 2018 w HTML i CSS przez fruczka Użytkownik (570 p.)
Cześć! Chciałabym się Was poradzić, w jaki sposób można zrobić łagodne przejścia w rozwijaniu menu? Pewnie chodzi o użycie transition/transform i te sprawy w CSS, jednak... tak, jak to wygląda przykładowo na tej stronie u samej góry(Najnowsze pytania, Ostatnia aktywność, Bez odpowiedzi, Zadaj pytanie, itd.). Czy to jest jakaś forma zanikania? A raczej przeciwieństwo zanikania? Jak można coś podobnego wykombinować? :) Byłabym bardzo wdzięczna za pomoc! :)

3 odpowiedzi

+1 głos
odpowiedź 21 lipca 2018 przez thryndl Nałogowiec (30,470 p.)
edycja 21 lipca 2018 przez thryndl

tak, jak to wygląda przykładowo na tej stronie u samej góry(Najnowsze pytania, Ostatnia aktywność, Bez odpowiedzi, Zadaj pytanie, itd.). Czy to jest jakaś forma zanikania? A raczej przeciwieństwo zanikania? Jak można coś podobnego wykombinować? :)

To co jest na tej stronie w nagłówku, jest doklejane jako pseudo-element , z contentem "zasysanym" z atrybutu data-info.

Sama animacja polega na stopniowym zmniejszaniu opacity i pozycji top.

W narzędziach deweloperskich można dokładnie obejrzeć kod, natomiast wkleję Ci sam CSS dla pseudo-elementu, bo to on powinien Cię najbardziej interesować.

/** Code for hover info **/

dfn {
  font-style: normal;
  position: relative;
}
dfn::after {
  content: attr(data-info);
  display: inline;
  position: absolute;
  top: 5px; left: -5px;
  opacity: 0;
  width: 155px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5em;
  padding: 0.2em 0.1em;
  background: rgba(31,43,55,0.95);
  color: #fff;
  pointer-events: none; /* This prevents the box from apearing when hovered. */
  transition: opacity 250ms, top 250ms;
}
dfn::before {

}
dfn:hover {z-index: 2;} /* Keeps the info boxes on top of other elements */
dfn:hover::after,
dfn:hover::before {opacity: 1;}
dfn:hover::after {top: 30px;}
dfn:hover::before {top: 20px;}

Na uzupełnienie łap kod na jsfiddle'u

0 głosów
odpowiedź 21 lipca 2018 przez OdsetekGlupoty Pasjonat (15,360 p.)
jQuery animate
0 głosów
odpowiedź 21 lipca 2018 przez niezalogowany
Poczytaj o @keyframes

Podobne pytania

0 głosów
1 odpowiedź 188 wizyt
pytanie zadane 24 grudnia 2022 w HTML i CSS przez EmilB Użytkownik (980 p.)
0 głosów
2 odpowiedzi 592 wizyt
pytanie zadane 2 marca 2018 w HTML i CSS przez Qubenz Użytkownik (570 p.)
0 głosów
1 odpowiedź 229 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...