menu, pokaż po na jechaniu inaczej Opcje

[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

Ten post edytował noyo_pl 12.05.2015, 21:49:53

[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

Ten post edytował salfunglandyare 12.05.2015, 22:18:15

[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:

[HTML] pobierz, plaintext 
<style>
ul.lmenu {
	margin:0;
	padding:0;
	list-style:none;
}
ul.lmenu p {
	font: normal 22px Arial, Helvetica, sans-serif;
	color:#595959;
	margin: 0px 8px;
	text-align:left;
}
ul.lmenu li {
	margin:0px;
	padding:0px 0px 0px 15px;
}
ul.lmenu li a {
	font: normal 12px Arial, Helvetica, sans-serif;
	color:#666666;
	display:block;
	padding:5px 10px;
	margin-left: -10px;
 
}
ul.lmenu li a:hover {
	color:#FFFFFF;
	background:#4dabe6;
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	font-weight: bold;
	text-decoration:none;
}
</style>
 
 
<center>
<table border='0' cellpadding='0' cellspacing='0'>
<tr>
	<td width='255'>
		<ul class='lmenu'>
			<li ><a href='#'>Link odnosnik Link odnosnik Link odnosnik</a></li>
			<li ><a href='#'>Link odnosnik Link odnosnik</a></li>
			<li ><a href='#'>Link odnosnik</a></li>
			<li ><a href='#'>Link odnosnik</a></li>
			<li ><a href='#'>Link odnosnik</a></li>
	     </ul>
	</td>
	<td width='876'>
		cos tam<BR>
		cos tam<BR>
		cos tam<BR>
		cos tam<BR>
		cos tam<BR>
 
 
	</td>
</tr>
</table>
</center>
[HTML] pobierz, plaintext 

[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 )

A tak z ciekawości: po co Ci wgl ta tabelka?

Ten post edytował Comandeer 14.05.2015, 19:01:10

[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.
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ść

[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