[CSS]Submenu |
[CSS]Submenu |
16.04.2013, 14:10:25
Post
#1
|
|
Grupa: Zarejestrowani Postów: 8 Pomógł: 0 Dołączył: 14.12.2011 Ostrzeżenie: (0%) |
Witam. W jaki sposób mogę zrobić submenu do tego: http://www.robertmendak.com/edyta2/ ?
Chodzi mi o to, że jak najadę przykładowo na "Forums" to pokażą się pod menu linki odpowiadające zakładce "Forums". Pozdrawiam |
|
|
16.04.2013, 14:18:35
Post
#2
|
|
Grupa: Zarejestrowani Postów: 360 Pomógł: 34 Dołączył: 20.08.2011 Ostrzeżenie: (0%) |
Najszybciej, najprościej nie wiem czy do końca poprawnie ?
Zobacz sobię to: http://api.jquery.com/category/effects/ Ten post edytował Mega_88 16.04.2013, 14:19:01 |
|
|
16.04.2013, 14:22:47
Post
#3
|
|
Grupa: Zarejestrowani Postów: 8 Pomógł: 0 Dołączył: 14.12.2011 Ostrzeżenie: (0%) |
Ale da się zrobić tak żeby współgrało z tym skryptem co mam? Przepraszam za moją ciemnotę, dopiero zaczynam zabawę z html.
//Edit. Zastosowałem to, lecz nie do końca zadowala mnie efekt. Chcę, żeby po samym najechaniu pojawiało się submenu, ale również jak puszczę kursor z danego elementu, żeby to submenu zostawało, ponieważ hover zostaje. http://www.robertmendak.com/edyta2/ Ten post edytował robert.mendak 16.04.2013, 14:26:56 |
|
|
16.04.2013, 14:26:11
Post
#4
|
|
Grupa: Zarejestrowani Postów: 360 Pomógł: 34 Dołączył: 20.08.2011 Ostrzeżenie: (0%) |
Nie powinno mieć to żadnego wpływu na Twój skrypt o ile dobrze przypiszesz klasy, ale podałem Ci taki przykład jak można to zrobić jednak to tego potrzebujesz jeszcze napisać CSS żeby w odpowiednim miejscu się wyświetlało i jakoś wyglądało
Jak chcesz menu rozwijalne zobacz sobie to: http://api.jquery.com/slideDown/ tam masz przykład. |
|
|
16.04.2013, 14:28:19
Post
#5
|
|
Grupa: Zarejestrowani Postów: 8 Pomógł: 0 Dołączył: 14.12.2011 Ostrzeżenie: (0%) |
Tak, wiem. CSS dopiszę na wygląd później. najpierw chcę żeby to poprawie działało, ponieważ nie ma sensu bawić się z tym skoro nie ma żądanego efektu. Przeczytaj notkę w moim poście wyżej.
|
|
|
16.04.2013, 14:33:46
Post
#6
|
|
Grupa: Zarejestrowani Postów: 360 Pomógł: 34 Dołączył: 20.08.2011 Ostrzeżenie: (0%) |
Tak, wiem. CSS dopiszę na wygląd później. najpierw chcę żeby to poprawie działało, ponieważ nie ma sensu bawić się z tym skoro nie ma żądanego efektu. Przeczytaj notkę w moim poście wyżej. Zobacz sobię tą stronę, którą podałem wcześniej tam jest sporo przykładów: http://api.jquery.com/category/effects/
Po najechaniu pokazuje ( fadeIn ) po zjechaniu z elementu zniaka ( fadeOut ), 500 to szybkość. Usuń drugą cześć skryptu ( fadeOut ) i nie będzie znikać, ale wtedy będzie cały czas. Więc wtedy ustawiesz, że na przykład po najechaniu na drugi element znika, a pojawia się submenu dla drugiego i tak dalej. Trzeba się tym trochę pobawić na stronie api.jquery jest wszystko fajnie opisane |
|
|
16.04.2013, 14:39:48
Post
#7
|
|
Grupa: Zarejestrowani Postów: 8 Pomógł: 0 Dołączył: 14.12.2011 Ostrzeżenie: (0%) |
No i niestety pojawiają się schody. http://www.robertmendak.com/edyta2/
Gdy najeżdżam na Home1 - pokazują się wszystkie rowijane. Gdy najeżdżam na Home2 - nic się nie dzieje Ten post edytował robert.mendak 16.04.2013, 14:40:58 |
|
|
16.04.2013, 14:49:02
Post
#8
|
|
Grupa: Zarejestrowani Postów: 360 Pomógł: 34 Dołączył: 20.08.2011 Ostrzeżenie: (0%) |
Nie bez powodu nazywałem je link1 i submenu1 , dla każdego elementu musisz nadac inną nazwę oraz dodać kolejną linię kodu js, czyli coś w ten deseń
I tak dla pozostałych tam 5 czy 6 Tak w skrócie postaram się opisać Ci jak to działa. Dla elementu o id 1 ( #link1 ) przypisujesz funkcję, która pokaże ( fadeIn ) przypisany do niego element o klasie ( .submenu1 ), a po zjechaniu kursorem schowa ten element ( .submenu1 ) przy uzyciu funkcji ( fadeOut ). Jeżeli chcesz wywołać podobną akcję dla innego elementu to wtedy przypisujesz w skrypcie inne id/klasy i w skrycie robisz to samo, zobacz jak to teraz zrobiłem i analogicznie robisz resztę. Ten post edytował Mega_88 16.04.2013, 14:52:34 |
|
|
16.04.2013, 14:55:43
Post
#9
|
|
Grupa: Zarejestrowani Postów: 8 Pomógł: 0 Dołączył: 14.12.2011 Ostrzeżenie: (0%) |
Faktycznie. Działa. Nie jestem dobry w JS. Kolejne schody ^^
Jak najadę na Home3, 'Rozwijane' z Home1 powinno zniknąć, lecz zostaje |
|
|
16.04.2013, 15:08:53
Post
#10
|
|
Grupa: Zarejestrowani Postów: 360 Pomógł: 34 Dołączył: 20.08.2011 Ostrzeżenie: (0%) |
Faktycznie. Działa. Nie jestem dobry w JS. Kolejne schody ^^ Jak najadę na Home3, 'Rozwijane' z Home1 powinno zniknąć, lecz zostaje Pisałem Ci o tym musisz trochę pokombinować sobie poczytać Tak na szybko
Jak działa to powyżej: Po najechaniu na link 3 ( #link3 ) pokaż submenu 3 ( .submenu3 ), a ukryj ( fadeOut ) submenu1 ( .submenu1 ) Jak ukryc dwa elementu po najechaniu na link3 ( #link3 )
Możesz to sobie przyśpieszyć pod 500 masz czas pojawiania ( fadeIn ) oraz znikania ( fadeOut ) dla znikania polecam ustawić na 100 lub 200 żeby na siebie nie nachodziły elementu. Ten post edytował Mega_88 16.04.2013, 15:18:08 |
|
|
16.04.2013, 15:17:11
Post
#11
|
|
Grupa: Zarejestrowani Postów: 8 Pomógł: 0 Dołączył: 14.12.2011 Ostrzeżenie: (0%) |
Ok, działa. Dziękuje bardzo. Ostatnie 2 pytanka mam, czy da się zrobić jedną klasę żeby ustalić pozycję tych submenu, czy trzeba każdą klasę pokolei? Jak mogę zrobić, żeby to submenu się pokazywało na dole na swoim miejscu? Bo zabrakło mi już pomysłów. Próbowałem display:none; display:block; float:left; i nic z tego.
Ten post edytował robert.mendak 16.04.2013, 15:19:31 |
|
|
16.04.2013, 15:22:45
Post
#12
|
|
Grupa: Zarejestrowani Postów: 360 Pomógł: 34 Dołączył: 20.08.2011 Ostrzeżenie: (0%) |
Ok, działa. Dziękuje bardzo. Ostatnie pytanko mam, czy da się zrobić jedną klasę żeby ustalić pozycję tych submenu, czy trzeba każdą klasę pokolei? Możesz zrobić to w ten sposób na przykładzie ostatniego kodu, ale lekko go zmodyfikować:
Zwróć uwagę, że dla submenu przypisaliśmy teraz id ( #submenu1 )w js a nie klasę ( .submenu ) jak poprzednio. Odnośnie pozycji submenu to duże ma znaczenie gdzie umieścisz ten element w kodzie html, w którym wierszu. Możesz go umieścić w stopce i tam właśnie się pojawi. Poczytaj o position:absolute choć to nie do końca może poprawnie. Nie wiem też jak to graficznie ma wyglądać jak Ty chcesz to zrobić Ten post edytował Mega_88 16.04.2013, 15:25:42 |
|
|
16.04.2013, 15:29:33
Post
#13
|
|
Grupa: Zarejestrowani Postów: 8 Pomógł: 0 Dołączył: 14.12.2011 Ostrzeżenie: (0%) |
Już rozumiem! To wszystko co chciałem wiedzieć Dziękuje Ci za pomoc. Można temat zamknąć
|
|
|
Wersja Lo-Fi | Aktualny czas: 29.03.2024 - 11:58 |