Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: menu, pokaż po na jechaniu inaczej
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
noyo_pl
Ma ktos może jakiś przykład jak zrobić w jquery menu na stronie które pokazuje część tekstu odnośnia, a po najechaniu na niego tak jakby pokazuje dalszą cześć, ale żeby nie zawijało, tylko jakby nachodziło na treść strony.
Chodzi o strone dwu kolumnowe, po lewej menu a po prawej streść odnośników.

Troche jak tu https://api.jquery.com/hover/ wyświetlanie gwiazdek, tylko jak użyje tego to gwiazdki są u dołu i nie wiem jak zmienić gwiazdki na ciąg dalszy odnośnika.

Dzięki
Comandeer
Koniecznie musi być w jQuery? Bardzo prosto machnąć to po prostu w CSS przy pomocy :hover + operowania na overflow.
PoC: http://jsfiddle.net/Comandeer/toc3ojvw/
salfunglandyare
Kurcze, napisz o co Ci dokładniej chodzi, masz np menu:
Cośtam Cośtam Coś
Coś jeszcze innego
Coś więcej
i Jeszcze coś innego

chcesz, żeby pokazywało Ci się:
Cośtam Cośta...
Coś jeszcze i...
Coś więcej
i Jeszcze coś...

a po najechaniu pełne wersje?
Jeśli tak, to w css: text-overflow: ellipsis; overflow: hidden; white-space: nowrap,
a na :hover: text-overflow: clip; overflow: visible

//edit: comandeer mnie uprzedzil i pokazal na jsfiddle biggrin.gif
noyo_pl
Nawet lepiej że to CSS, próbowałem jakoś to dopisać do mojego kodu to co podał @Comandeer, ale coś mi nie wychodziło.

Chciałbym żeby odnośnik który jest krótszy niż szerokość 255px wyświetlał się cały i podświetlenie było na szerokość 255px, natomiast jeśli jest coś dłuższe niż szerokość 255px skracało się do szerokość 255px, a ja najedzie się na niego pokazywało się całe z szerokością jaką ma tekst i aby pod nim była treść strony po prawej.


Mam coś takiego:
  1. ul.lmenu {
  2. margin:0;
  3. padding:0;
  4. list-style:none;
  5. }
  6. ul.lmenu p {
  7. font: normal 22px Arial, Helvetica, sans-serif;
  8. color:#595959;
  9. margin: 0px 8px;
  10. text-align:left;
  11. }
  12. ul.lmenu li {
  13. margin:0px;
  14. padding:0px 0px 0px 15px;
  15. }
  16. ul.lmenu li a {
  17. font: normal 12px Arial, Helvetica, sans-serif;
  18. color:#666666;
  19. display:block;
  20. padding:5px 10px;
  21. margin-left: -10px;
  22.  
  23. }
  24. ul.lmenu li a:hover {
  25. color:#FFFFFF;
  26. background:#4dabe6;
  27. border-radius: 4px;
  28. -moz-border-radius: 4px;
  29. -webkit-border-radius: 4px;
  30. font-weight: bold;
  31. text-decoration:none;
  32. }
  33.  
  34.  
  35. <table border='0' cellpadding='0' cellspacing='0'>
  36. <tr>
  37. <td width='255'>
  38. <ul class='lmenu'>
  39. <li ><a href='#'>Link odnosnik Link odnosnik Link odnosnik</a></li>
  40. <li ><a href='#'>Link odnosnik Link odnosnik</a></li>
  41. <li ><a href='#'>Link odnosnik</a></li>
  42. <li ><a href='#'>Link odnosnik</a></li>
  43. <li ><a href='#'>Link odnosnik</a></li>
  44. </ul>
  45. </td>
  46. <td width='876'>
  47. cos tam<BR>
  48. cos tam<BR>
  49. cos tam<BR>
  50. cos tam<BR>
  51. cos tam<BR>
  52.  
  53.  
  54. </td>
  55. </tr>
Comandeer
Dla ul.lmenu należy określić szerokość, dla ul.lmenu li należy dostawić
Kod
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

dla
ul.lmenu li:hover trzeba przywrócić domyślne overflow i na koniec zmienić ul.lmenu li a wyświetlanie na liniowo-blokowe - wówczas powinno działać

A jak już jesteśmy przy CSS: wersje własności z prefiksami dajemy zawsze przed wersję bez prefiksu. Ta druga oznacza bowiem implementację zgodną ze standardem, a prefiksowa niekoniecznie (słynne -moz-border-radius). Co więcej - w tym wypadku prefiksów nie trzeba stosować od lat. Od sprawdzania takich rzeczy polecam http://caniuse.com albo po prostu maszynkę typu Autoprefixer
noyo_pl
troche ni jak mi to wychodzi, dorzuciłem position: absolute; do ul.lmenu li:hover bo odnośnik chował się pod tekst "cos tam", ale teraz jak najerzdzam na któryś link to chowa się jego poprzednik, chyba pod tego na którego najechalem.
Comandeer
Ja bym zamiast pozycjonowaniem absolutnym pobawił się z-index całej lewej strony tabelki
noyo_pl
dodawałem do ul.lmenu li:hover z-index: 2; ale zero reakcji
Comandeer
Łap: http://jsfiddle.net/Comandeer/ocytja6g/
z-index działa tylko jeśli element, któremu go nadamy ma pozycjonowanie inne od domyślnego (czyt: daj mu position: relative wink.gif)

A tak z ciekawości: po co Ci wgl ta tabelka?
noyo_pl
Jeszcze tam troche kombinuje, ale to jest to, dzięki
Ja jakoś tak od poczatu wole tworzyć strone na podstawie tabeli niż divów, nie rozlatuje mi się. Może to żle, ale nie jestem po szkole, a jestem samoukiem. wink.gif
dzięki jeszcze raz.
Comandeer
Z divów da się zrobić tabelki - obadaj choćby display: table-cell z CSS - to tak na przyszłość wink.gif
noyo_pl
A czemu divy? są "szybsze" w wyświetlaniu?
Comandeer
http://web.archive.org/web/20130902063810/...ki.net/tabelki/ + choćby kwestie dostępności (np. dla osób niewidomych tego typu tabelki są praktycznie niezgryźliwe)

Używa się tych elementów, które mają w danym miejscu sens semantyczny - co jest widoczne zwłaszcza w HTML5
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.