Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS]Submenu
robert.mendak
post 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
Go to the top of the page
+Quote Post
Mega_88
post 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 smile.gif ?

  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $("#link1").hover(function() { $(".submenu1").fadeIn(500); }, function() { $(".submenu1").fadeOut(500); });
  4. });
  5.  
  6.  
  7. <div id="link1">Link 1</div>
  8. <div class="submenu1" style="display:none">Rozwijane</div>


Zobacz sobię to: http://api.jquery.com/category/effects/

Ten post edytował Mega_88 16.04.2013, 14:19:01
Go to the top of the page
+Quote Post
robert.mendak
post 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
Go to the top of the page
+Quote Post
Mega_88
post 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.
Go to the top of the page
+Quote Post
robert.mendak
post 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.
Go to the top of the page
+Quote Post
Mega_88
post 16.04.2013, 14:33:46
Post #6





Grupa: Zarejestrowani
Postów: 360
Pomógł: 34
Dołączył: 20.08.2011

Ostrzeżenie: (0%)
-----


Cytat(robert.mendak @ 16.04.2013, 15:28:19 ) *
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/

  1. $(document).ready(function() {
  2. $("#link1").hover(function() { $(".submenu1").fadeIn(500); }, function() { $(".submenu1").fadeOut(500); });
  3. });


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



Go to the top of the page
+Quote Post
robert.mendak
post 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/

  1. <ul id="gooeymenu4" class="framemenu">
  2. <!-- 1 -->
  3. <li><a href="http://www.dynamicdrive.com/">
  4. <div id="link1">Home</div></a>
  5. <div class="submenu1" style="display:none">Rozwijane</div>
  6. </li>
  7.  
  8. <!-- 2 -->
  9. <li><a href="http://www.dynamicdrive.com/">
  10. <div id="link1">Home3</div></a>
  11. <div class="submenu1" style="display:none">Rozwijane</div>
  12. </li>
  13.  
  14. <!-- 3 -->
  15. <li><a href="http://www.dynamicdrive.com/">
  16. <div id="link1">Home4</div></a>
  17. <div class="submenu1" style="display:none">Rozwijane</div>
  18. </li>
  19. </ul>


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
Go to the top of the page
+Quote Post
Mega_88
post 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 smile.gif , dla każdego elementu musisz nadac inną nazwę oraz dodać kolejną linię kodu js, czyli coś w ten deseń

  1. <div id="link1">Home</div></a>
  2.  
  3. <div class="submenu1" style="display:none">Rozwijane</div>
  4.  
  5. <div id="link2">Home</div></a>
  6.  
  7. <div class="submenu2" style="display:none">Rozwijane</div>
  8.  
  9.  
  10. $(document).ready(function() {
  11.  
  12. $("#link1").hover(function() { $(".submenu1").fadeIn(500); }, function() { $(".submenu1").fadeOut(500); });
  13. $("#link2").hover(function() { $(".submenu2").fadeIn(500); }, function() { $(".submenu1").fadeOut(500); });
  14.  
  15. });


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
Go to the top of the page
+Quote Post
robert.mendak
post 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 sad.gif
Go to the top of the page
+Quote Post
Mega_88
post 16.04.2013, 15:08:53
Post #10





Grupa: Zarejestrowani
Postów: 360
Pomógł: 34
Dołączył: 20.08.2011

Ostrzeżenie: (0%)
-----


Cytat(robert.mendak @ 16.04.2013, 15:55:43 ) *
Faktycznie. Działa. Nie jestem dobry w JS. Kolejne schody ^^
Jak najadę na Home3, 'Rozwijane' z Home1 powinno zniknąć, lecz zostaje sad.gif


Pisałem Ci o tym musisz trochę pokombinować sobie poczytać smile.gif Tak na szybko

  1. $("#link3").hover(function() { $(".submenu3").fadeIn(500); $(".submenu1").fadeOut(500) });


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 )

  1. $("#link3").hover(function() { $(".submenu3").fadeIn(500); $(".submenu1, .submenu2").fadeOut(500) });



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
Go to the top of the page
+Quote Post
robert.mendak
post 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
Go to the top of the page
+Quote Post
Mega_88
post 16.04.2013, 15:22:45
Post #12





Grupa: Zarejestrowani
Postów: 360
Pomógł: 34
Dołączył: 20.08.2011

Ostrzeżenie: (0%)
-----


Cytat(robert.mendak @ 16.04.2013, 16:17:11 ) *
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ć:

  1. <div id="link1">Home</div></a>
  2.  
  3. <div id="submenu1" class="dlawszystkichsubmenu" style="display:none">Rozwijane</div>
  4.  
  5. <div id="link2">Home</div></a>
  6.  
  7. <div id="submenu2" class="dlawszystkichsubmenu" style="display:none">Rozwijane</div>
  8.  
  9. $(document).ready(function() {
  10. $("#link1").hover(function() { $("#submenu1").fadeIn(500); }, function() { $("#submenu1").fadeOut(500); });
  11. $("#link2").hover(function() { $("#submenu2").fadeIn(500); }, function() { $("#submenu1").fadeOut(500); });
  12. });
  13.  
  14.  
  15. //css
  16.  
  17. .dlawszystkichsubmenu { float:left; ... lub co tam wstawisz }
  18.  
  19. #submenu 1 { tutaj możesz dla każdego submenu oddzielnie }
  20. #submenu 2 { tutaj możesz dla każdego submenu oddzielnie }
  21.  


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ć smile.gif

Ten post edytował Mega_88 16.04.2013, 15:25:42
Go to the top of the page
+Quote Post
robert.mendak
post 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ć smile.gif Dziękuje Ci za pomoc. Można temat zamknąć
Go to the top of the page
+Quote Post

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 



RSS Wersja Lo-Fi Aktualny czas: 29.03.2024 - 11:58