Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]menu rozwijane,punkty za bardzo wysuniete w prawo.
Forum PHP.pl > Forum > Przedszkole
gigzorr
witam.pokaze to na ssie:


jak sami widzicie , za bardzo wysuniete jest w prawo.probowalem to usunac marginesem , ale za to na innych przegladarkach jest zle np. na chrome to wyglada ok bez niczego , a na firefoxie jest tak wysuniete.

kod css :
  1. #jsddm
  2. { margin: 0;
  3. padding: 0}
  4.  
  5. #jsddm li
  6. { float: left;
  7. list-style: none;
  8. font: 11px Arial, Arial}
  9.  
  10. #jsddm li a
  11. { display: block;
  12. padding: 5px 12px;
  13. text-decoration: none;
  14. border-right: 1px solid white;
  15. width: 120px;
  16. z-index: 1;
  17. color: #EAFFED;
  18. white-space: nowrap}
  19.  
  20. #jsddm li a:hover
  21. { background: #24313C;
  22.  
  23.  
  24. }
  25.  
  26. #jsddm li ul
  27. { margin: 0;
  28. padding: 0;
  29. position: absolute;
  30. visibility: hidden;
  31. }
  32.  
  33. #jsddm li ul li
  34. { float: none;
  35. display: inline}
  36.  
  37. #jsddm li ul li a
  38. { width: auto;
  39. font-size: 12px;
  40. background: #A9C251;
  41. color: #24313C}
  42.  
  43. #jsddm li ul li a:hover
  44. { background: #8EA344}
  45.  


Wiem , że jest burdel jak cholera ale jeszcze nie mialem czasu tego usegregowac, pierw chce to poprawic.
Ten kawalek jest za to odpowiedzialny:
  1. #jsddm li ul li a
  2. { width: auto;
  3. font-size: 12px;
  4. background: #A9C251;
  5. color: #24313C}


Tzn. ja tak uwazam , bo jak dalem margines to szlo w lewo.
Tu jeszcze przyklad html:
  1. ul id="jsddm">
  2. <li><a href="#" style="font-size:12px;">a</a></li>
  3. <li><a href="#" style="font-size:12px;">b</a>
  4. <ul>
  5. <li><a href="wyslij-zaproszenie">e</a></li>
  6. <li><a href="znajdz-gracza">f</a></li>
  7. <li><a href="lista-uzytownikow">g</a></li>
  8. </ul>
  9. </li>
everth
Samym CSS jest ciężko zrobić ładne rozwijające się menu, lepiej zrobić to JSem. Rzucę ci tu funkcję z jednego skryptu. Nie chce mi się tego przepisywać na twoje. Poniżej masz moją funkcję opartą na jQuery (prawdopodobnie da się ją przepisać na czysty JS):
[JAVASCRIPT] pobierz, plaintext
  1. function menu_hover() {
  2. $('#menu.ui-widget-content .ui-tabs-panel > .ui-button').hover( //możesz wsadzić swoje elementy
  3. function() {
  4. $(this).addClass('ui-state-hover');
  5. elem = $(this).find('.ui-tabs-panel.nested'); //u mnie nested to podlista
  6. offset = elem.show().position(); //pobieram pozycję guzika otwierajacego
  7. elem.hide().css({position:'absolute',top:offset.top,left:offset.left}).slideDown(); //ustawiam pozycje podlista
  8. },
  9. function() {
  10. $(this).removeClass('ui-state-hover');
  11. $(this).find('.ui-tabs-panel.nested').slideUp(); //ukrywam gdy 'nie-hover' ;)
  12. });
  13. }
[JAVASCRIPT] pobierz, plaintext
gigzorr
ale ja uzywam do tego menu js+jquery smile.gif

fixed,position: absolute wystarczylo wywalic.


/edit

mam jeszcze jeden problem , jak najade POD menu to sie otwiera ;x
everth
Prawdopodobnie masz podpiętą funkcję hover pod element LI a nie element A (a LI obejmuje też zagnieżdżoną podlistę)

EDIT:
Aha, jeszcze to:
  1. #jsddm li ul
  2. { margin: 0;
  3. padding: 0;
  4. position: absolute;
  5. visibility: hidden;
  6. }

Powinno być:
  1. #jsddm li ul
  2. { margin: 0;
  3. padding: 0;
  4. position: absolute;
  5. display: none;
  6. }

Hidden ukrywa elementy - ale one dalej tam są (w sensie wymiarów i przykrywania elementów poniżej) tylko niewidoczne
gigzorr
Teraz kod wyglada tak :
  1. #jsddm {margin: 0;
  2. padding: 0;
  3. }
  4.  
  5. #jsddm li {float: left;
  6. list-style: none;
  7. font: 11px Arial, Arial;
  8. }
  9.  
  10. #jsddm li a {display: block;
  11. padding: 5px 12px;
  12. text-decoration: none;
  13. border-right: 1px solid white;
  14. width: 120px;
  15. z-index: 1;
  16. color: #EAFFED;
  17. white-space: nowrap;
  18. }
  19.  
  20. #jsddm li a:hover {background: #24313C;
  21. }
  22.  
  23. #jsddm li ul {margin: 0;
  24. padding: 0;
  25. float: left;
  26. visibility: hidden;
  27. }
  28.  
  29. #jsddm li ul li {float: none;
  30. display: block;
  31. margin: auto;
  32.  
  33.  
  34. }
  35.  
  36. #jsddm li ul li a {width: 120px;
  37. font-size: 12px;
  38. background: black;
  39. color: #CC6633;
  40. }
  41.  
  42. #jsddm li ul li a:hover {background: #FFFF99;
  43. margin: auto;
  44. }


Tyle , ze tak jak mowilem , najade pod menu to sie otwiera , tutaj mozna zobaczyc efekt.
Czyli nawet nie mozna sie zalogowac.
everth
A u mnie działa. Na FF 3.6.7 i Chrome i Operze wszystko ok. Może ci się cache nie odświeżył w przeglądarce?
gigzorr
Na ff 3.6.8 jest zle, nie idzie sie nawet zalogowac.
everth
Nie mam tej wersji - ale co do poprzedniego postu to przeczytaj co napisałem o CSS visibility:hidden - prawdopodobnie to ci bruździ, a w źródle tego nie zmieniłeś
gigzorr
Cytat(everth @ 26.07.2010, 15:44:07 ) *
Nie mam tej wersji - ale co do poprzedniego postu to przeczytaj co napisałem o CSS visibility:hidden - prawdopodobnie to ci bruździ, a w źródle tego nie zmieniłeś


Zmienialem , bez tego jest jeszcze gorzej ;p

jak jest tak :
  1. #jsddm li ul {margin: 0;
  2. padding: 0;
  3. position: absolute;
  4. visibility: hidden;
  5. }


to jest ok , ale na ff3.6.8 jest za bardzo w prawo wysuniete.

jak jest float: left; zamiast absolute, to jest na ff 3.6.8 ok , ale nie idzie sie nawet zalogowac bo samo sie otwiera jak najade pod.

ok usunalem to visibility , troche jest nie tak , ale juz niech bedzie tak snitch.gif

arg bez tego to sie same menu otwiera , bez sens ;x

/edit , dobra udalo sie masz pomogl , za nakierowanie mnie.
everth
  1. #jsddm {
  2. margin: 0;
  3. padding: 0;
  4. }
  5.  
  6. #jsddm li {
  7. display:inline;
  8. list-style: none;
  9. font: 11px Arial, Arial;
  10. }
  11.  
  12. #jsddm li a {
  13. padding: 5px 12px;
  14. text-decoration: none;
  15. border-right: 1px solid white;
  16. width: 120px;
  17. z-index: 1;
  18. color: #EAFFED;
  19. white-space: nowrap;
  20. }
  21.  
  22. #jsddm li a:hover {
  23. background: #24313C;
  24. }
  25.  
  26. #jsddm li ul {
  27. margin: 0;
  28. padding: 0;
  29. display:inline;
  30. }
  31.  
  32. #jsddm li ul li {
  33. display: block;
  34. margin: auto;
  35. }
  36.  
  37. #jsddm li ul li a {
  38. width: 120px;
  39. font-size: 12px;
  40. background: black;
  41. color: #CC6633;
  42. }
  43.  
  44. #jsddm li ul li a:hover {
  45. background: #FFFF99;
  46. margin: auto;
  47. }

Edytowałem na ślepo. Podmenu jest widoczne. To skrypt powinien nadawać podmenu wartość absolute i pozycjonować ją (tak jak mój gdzieś na początku), jak wsadzisz to w css to zrobi ci się sieczka
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.