Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS] Menu rozwijalne
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
zawodnik
Witam,

Chciałbym stworzyć sobie rozwijalne menu. Nie takie zwykłe (to zrobiłem), tylko takie z opóźnieniem. Czy jest możliwe, aby podczas trzymania kursora nad danym miejscem inne przesuwało się o stałą wartość aż do osiągnięcia danej pozycji, bez użycia JS, czy czegoś w stylu Flasha, po prostu w czystym CSS? Myślałem nad animation ( http://www.w3schools.com/cssref/css3_pr_keyframes.asp ) , ale to nie działa we wszystkich przeglądarkach... Z góry dzięki smile.gif
!*!
Powyższy przykład działa z operą (a w IE>10 zrobisz obejście na filtrach), tylko albo jest na tyle stary, albo robili go amatorzy, wystarczy dopisać

Cytat
-o-keyframes mymove


Poza tym, w JS przez jQuery animate();

Niedawno w dziale oceny był Temat: www Dental szablon html masz tam link do szablonu z menu w samym CSS3, obadaj źródło.
zawodnik
Niestety, taki efekt jak w tamtym szablonie ja też potrafię osiągnąć, mi chodzi o płynne "rozwijanie" się tego menu na wszystkich przeglądarkach - sprawdź sam, na IE nie działa.

Natomiast dzięki za info o jQuery, jeśli to będzie działać, to będzie idealnie smile.gif Co prawda nie animate(), ale slideDown("slow") smile.gif
!*!
Od takich animacji rozwijania jest transition w css3, zadziała na wszystkim prócz IE, ale tam stosujesz filtry do tego, a jak nie to jQuery. http://jsfiddle.net/n5XfG/751/
zawodnik
Cytat(!*! @ 28.06.2012, 23:06:00 ) *
tam stosujesz filtry do tego

A mógłbyś rozwinąć myśl? smile.gif
!*!
Nie mogę znaleźć tej strony... przykład wyżej zadziała dla IE>10, więc dla niższych stosuj po prostu komentarz warunkowy z kodem jQuery.
zawodnik
Zrobiłem sobie chwilową przerwę w tworzeniu strony, i dzisiaj wróciłem. Chciałem pokombinować z tym transition i o to co mi wyszło:
http://jsfiddle.net/Pp8RZ/1/

Dlaczego:
1. po dopiero drugim najechaniu myszą zaczyna coś się zmieniać, a nie po pierwszym?
2. Dlaczego menu zamiast się rozwijać, to się zwija?

Jakby coś, to bazowałem na tym: http://blog.marcoos.com/2009/10/21/css-tra...rzejscia-w-css/, aczkolwiek tamte przykłady działają prawidłowo smile.gif
!*!
http://jsfiddle.net/Pp8RZ/3/
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.