Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS][Java][HTML]Menu rozwijane ul li po kliknięciu
Forum PHP.pl > Forum > Przedszkole
PonuryGreg
Witam,
mam problem z menu rozwijanym, a mianowicie mam menu w formie <ul> <li> i jest ono rozwijane po najechaniu, a chciałbym aby było rozwinięte po kliknięciu.
Szukałem w google ale znalazłem rozwiązania tylko dla divów a nie dla ul li. Wiem, że w CSSach podobno nie da rady tego zrobić a z JS jestem noga. Czy ktoś wie jak to rozwiązać albo zna stronę gdzie takie rozwiązanie będzie opisane?
Turson
elmozaur
pokaż jakis kod.
PonuryGreg
  1. /* MENU GŁÓWNE */
  2.  
  3. .navipro ul li {
  4. list-style-type: none;
  5. display:block;
  6.  
  7. }
  8. .navipro ul li a {
  9. color: #000;
  10. font-family: Arial;
  11. text-decoration: none;
  12. font-weight: 300;
  13. text-transform: uppercase;
  14. display: block;
  15. height: 40px;
  16. line-height: 40px;
  17. max-width: 300px;
  18. border-bottom: 1px solid #000;
  19. transition: all 0.5s ease 0s;
  20. }
  21. .navipro ul li a:hover {
  22. color: #0a53a0;
  23. }
  24. /* PODMENU GŁÓWNE */
  25. .navipro ul > li > ul {
  26. display: none;
  27. width: 990px;
  28. }
  29. .navipro ul > li:hover > ul {
  30. display: block;
  31. }
  32. .navipro ul > li > ul a {
  33. text-transform: uppercase;
  34. }
  35. .navipro ul > li > ul a:hover {
  36. color: #0a53a0;
  37. }
  38.  
  39.  
  40. <div class="navipro">
  41.  
  42. <ul>
  43. <li><a href="#">produkty</a>
  44. <ul>
  45. <li><a href="#">pro 1</a></li>
  46. <li><a href="#">pro 2</a></li>
  47. <li><a href="#">pro 3</a></li>
  48. <li><a href="#">pro 4</a></li>
  49. <li><a href="#">pro 5</a></li>
  50. </ul>
  51. </li>
  52. </ul>
  53.  
  54. </div> <!-- #navipro -->
  55.  
  56.  
Comandeer
A jeśli Ci powiem, że w CSS się da i to nawet na dwa sposoby? wink.gif patrz: :target i :checked

Co do JS - wystarczy przy kliku przełączać np. klasę .open przy pomocy choćby elem.classList.toggle. Oczywiście tej klasie dodajesz obecne style z :hover
PonuryGreg
wow, tylko gdzie :target mam dać bo zmiana na
  1. .navipro ul > li:target > ul {
  2. display: block;
  3. }

nic nie dała facepalmxd.gif
Comandeer
Wypadałoby najpierw poczytać co to wgl robi i jak działa… musiałbyś dorobić odpowiedni link w menu. Lepiej to zrobić w js
martex
szukaj w guglu jquery ul li click function toggle
jest masa gotowców i przykładów które tylko zobaczysz i bedziesz wiedział o co kaman
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.