[CSS] Menu rozwijalne Opcje

[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

[!*!]

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ć

-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.

Ten post edytował !*! 28.06.2012, 19:22:44

[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 Co prawda nie animate(), ale slideDown("slow")

[!*!]

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]

tam stosujesz filtry do tego

A mógłbyś rozwinąć myśl?

[!*!]

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

[!*!]

http://jsfiddle.net/Pp8RZ/3/