Skocz do zawartości


tablety.pl
Zdjęcie
- - - - -

Wysuwane menu i zamiennik title




  • Zaloguj się, aby dodać odpowiedź
4 odpowiedzi w tym temacie

#1 barblask

barblask

    Good Rank

  • Użytkownicy +
  • 637 postów
  • Płeć:Mężczyzna
  • Lokalizacja:Skąd? Ja wiem skąd

Napisano 28 01 2006 - 08:51

Poniższe efekty można uzyskać za pomocą javascripts lub flash, ale ja lubię pod górkę zwłaszcza gdy ma mi to podwyższyć pozycje w google(wiadomo, że wyszukiwarki nie widzą JS i FLASH. Więcej o tym co lubi, a czego nie każda wyszukiwarka w dziale Punktowanie strony - pozycjonowanie Stron.

Przedstawię tu dwa sposoby na zastąpienie javascripts(bądź flash) przy wyskakującym tekście, oraz przy wysuwanym menu. Oba działają na tej samej zasadzie.
=========
Błędy są naszym najskrytszym wyborem. Wiedz błądźmy, badźmy...

#2 barblask

barblask

    Good Rank

  • Użytkownicy +
  • 637 postów
  • Płeć:Mężczyzna
  • Lokalizacja:Skąd? Ja wiem skąd

Napisano 28 01 2006 - 10:07

Dymki w css
No i mam już działające pod wszystkimi przeglądarkami :D wyskakujące teksty po najechaniu na co sobie tylko wymarzysz(czyt.ustawisz) :D Nawet nie sądziłem z początku, że w css to takie proste :D
szkielet:
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<style type="text/css">
<!--
p {position:relative;}  
p span {visibility:hidden;position:absolute;}     
p:hover span,
p.msieFix span {visibility:visible;}
fieldset p {z-index:-1}
-->
</style>
</head>
<body>
<p onmouseover="this.className='msieFix'" onmouseout="this.className=''" >jakieś badziewie<span>opis jakiegoś badziewia</span></p>
</body>
</html>

Może trochę to opiszę.
Tu użyłem <p>(akapitu), ale może to równie dobrze być np <b>(pogrubienie)-to użyłem w przykładzie niżej, obrazek, h1, div, td, tr, table...... (...) .....i co tylko sobie jeszcze chcesz :)
Jest to całkowicie edytowalne. Może wyskakiwać zarówno tekst jak i obrazek.


Zasada jest prosta, zawartość dymka jest w znaczniku <span>, a sam span obejmujemy elementem do którego się on odnosi
<p>jakieś badziewie<span>opis jakiegoś badziewia</span></p>

W stylach ustawiam zawartość <span>

p {position:relative;}
aby się nie rozlazło i nie zamazywało

p span {visibility:hidden;position:absolute;}
jako niewidoczną, oraz aby niewidzialny tekst nie rozpychał się nam (wykasujcie linijke dla testu i zobaczyce ocb.)

Teraz wystarczy ustawić, aby po najechaniu na tekst pogrubiony wyskakiwał koment. Do tego sluży :hover.
p:hover {visibility:visible;}
i powinno już być we wszystkich nie ch*jowych przeglądarkach.
Jednak bill w swoim ziebanym :D IE :D zapomniał dodać pełnej obsługi css :lol: i tylko a:hover obsługuje. Zaczyna się kombinowanie (no chyba, że chcecie takim dymkiem potraktować czystego linka to tego nie trzeba). Więc specjalnie dla jednej przeglądarki musimy dodać do naszego czyściutkiego kodu w <body> mały trik[color].
<p [color=blue]onmouseover="this.className='msieFix'" onmouseout="this.className=''"
>jakieś badziewie<span>opis jakiegoś badziewia</span></p>
Ustawiliłem klase przy onmouse (czyli pod kursorem) i nazwałem ją msieFix teraz po każdym najechaniu nada sie automatycznie klasa msieFix i zniknie klasa, gdy kursor juz nie bedzie nad naszym elementem.
teraz tą clase ustawiamy aby działała tak jak p:hover span.
Wystarczy po przecinku dopisać p:msieFix span i efektem końcowym wygląda to tak
p:hover span,
p.msieFix span {visibility:visible;}

Ustawiłem jeszcze fieldset p {z-index:-1} jest to ustawienie kolejności przykrywania się elementów. Lepiej by było jakby nasz dymek nie wyświetlał się pod tekstem strony :)

i to wszystko
Pozostało ustawienie wyglądu dymka a tu już masz wolną rękę. W stylach robisz sobie z tym co tylko ci przyjdzie do głowy. Niżej masz dość prosty przykład zastosowania takiego skryptu do pogrubionego tekstu
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<style type="text/css">
<!--
b {position:relative;}  
b span {visibility:hidden;position:absolute;}     
b:hover span,
b.msieFix span {visibility:visible;}
fieldset p {z-index:-1}
/************przykładowe ustawienia************/
span {background:#ddb;color:#0000ff;width:100px;top:15px;left:10px;}
b:hover ,
b.msieFix {color:#ff0000;}
-->
</style>
</head>
<body>
<p><b onmouseover="this.className='msieFix'" onmouseout="this.className=''" >jakies badziewie<span>opis jakiegos badziewia, który wyskakuje po najechaniu na tekst <i>jakies badziewie</i> :)</span></b> ble ble ble ble ble ble ble ble ble <b onmouseover="this.className='msieFix'" onmouseout="this.className=''" >jakies badziewie<span>opis jakiegos badziewia, który wyskakuje po najechaniu na tekst <i>jakies badziewie</i> :)</span></b></p>
<p>ble ble ble ble ble ble ble ble bleble ble ble ble ble ble ble ble ble<br>ble ble ble ble ble ble ble ble bleble ble ble ble ble ble ble ble bleble ble ble ble ble ble ble ble ble<br>ble ble ble ble ble ble ble ble bleble ble ble ble ble ble ble ble bleble ble ble ble ble ble ble ble ble<br> </p>
</body>
</html>

Oczywiście będzie potrzebna znajomość css
powodzenia ;)
=========
Błędy są naszym najskrytszym wyborem. Wiedz błądźmy, badźmy...

#3 barblask

barblask

    Good Rank

  • Użytkownicy +
  • 637 postów
  • Płeć:Mężczyzna
  • Lokalizacja:Skąd? Ja wiem skąd

Napisano 28 01 2006 - 10:07

Wysuwane menu w css
wkrótce opis...
narazie sam kod

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2">
<style type="text/css">
	<!--
	li {position:relative;}  
	li ul {visibility:hidden;position:absolute;}     
	li:hover ul,
	li.msieFix ul {visibility:visible;}
	fieldset p {z-index:-1}
  -->
</style>
</head>
<body>
    <ul>
    	<li onmouseover="this.className='msieFix'" onmouseout="this.className=''" ><a href="#">menu</a>
      	<ul>
        	<li><a href="#">link2</a></li>
        	<li><a href="#">link3</a></li>
        	<li><a href="#">link4</a></li>
        	<li><a href="#">link5</a></li>
      	</ul>
    	</li>
  	</ul>
</body>
</html>

=========
Błędy są naszym najskrytszym wyborem. Wiedz błądźmy, badźmy...

#4 arek_r1

arek_r1

    First Rank

  • Użytkownicy
  • 2 postów

Napisano 14 05 2006 - 00:34

Zacząłem się bawić tym co napisłeś o dymkach, dopisałem pare linijek i wyszło takie małe menu, jednak przy modyfikacjach twojego kodu trafiłem na kilka trudności: dotąd nie potrafię zakumać o co chodzi z tym
fieldset p {z-index:-1}
jeżeli wyrzucę samo fieldset to zawartość mojego pojemnika znika i całość przestaje działać, jeszcze nie jestem tak bardzo zaawansowany w css aby tworzyć takie bajery samemu i bez pomocy się narazie nie obejdzie.
Ze znacznikami ul li menu do wykonania jest prostrze ale lubię sobie robić problemy...


oto moja przeróbka - trochę mały bałagan ale to tylko testy i co ważne w miarę zadowalająco działa:
<style>
body	{ background-color: #555; }
.m	{ display: block; padding-left: 20px;
					text-decoration: none;
					background-color: #333;
					border: #fff 0px solid; }
span, div, p, .m:hover, .m	{ height: 15px; }
span, .m, .m:hover	{ font-family: Tahoma, Verdana; 
					font-size: 10px; font-weight: bold; }

.m	{ color: #222; background-image: url('menu.gif'); 
					background-repeat: repeat-x; }
.m:hover	{ color: #ddd; background-color: #000;
					background-image: url('kropa.gif'); 
					background-repeat: no-repeat; 
					background-position: top left; }		

span, div, p	{ position: relative; width: 80px; color: #aaa; }
span	{ left: 80px; top: 4px; z-index: 6; }
div, p	{ margin: 0px; }

div span	{ visibility: hidden; position: absolute; }
div:hover span,
div.msieFix span { visibility: visible; }
fieldset div	{ z-index: 5; }

p span.pod  { visibility: hidden; position: absolute; }	 
p:hover span.pod,
p.msieFix span.pod { visibility: visible; }
fieldset p	{ z-index: 5; }
</style>


<div onmouseover="this.className='msieFix'" onmouseout="this.className=''" >
	<a href="#" class=m>link 0</a>
<span><p onmouseover="this.className='msieFix'" onmouseout="this.className=''" >
		<a href="#" class=m>link 1.1</a>
		<span class=pod>
			<a href="#" class=m>link 2.1</a>
			<a href="#" class=m>link 2.2</a>
		</span>
	 </p>
	<a href="#" class=m>link 1.2</a>
	<a href="#" class=m>link 1.3</a>
	<a href="#" class=m>link 1.4</a>
</span>
</div>
<div onmouseover="this.className='msieFix'" onmouseout="this.className=''" >
	<a href="#" class=m>link 0</a>
<span><p onmouseover="this.className='msieFix'" onmouseout="this.className=''" >
		<a href="#" class=m>link 1.1</a>
		<span class=pod>
			<a href="#" class=m>link 2.1</a>
			<a href="#" class=m>link 2.2</a>
		</span>
	 </p>
	<a href="#" class=m>link 1.2</a>
	<a href="#" class=m>link 1.3</a>
	<a href="#" class=m>link 1.4</a>
</span>
</div>


Jeszcze jeden problem:
Jeżeli zmienię pozycję span { left: 80px;...} na mniejszą od szerokości głównego "pojemnika" w pier... ie przykrywa rozwiniętą pozycję, reszta przeglądarek jest ok (FF, Opera), czy to czasem nie jest związane z tym fildset i czy można to jakoś inaczej rozwiązać stosując warstwy, czy może trzecia opcja jak to dotąd bywa msieFix..?

#5 barblask

barblask

    Good Rank

  • Użytkownicy +
  • 637 postów
  • Płeć:Mężczyzna
  • Lokalizacja:Skąd? Ja wiem skąd

Napisano 10 08 2006 - 13:50

fieldset p {z-index:-1}

ustawia tekst w <p> o jedna warstwe nizej. Inaczej swoje menu nie masz nad tekstem a pod i dlatego jest niewidoczny.

Co do tej mniejszej odleglosci od glownego pojemnika to wlasnie z tym jest to zwiazane. Ustaw co ma byc wyzej, co nizej i juz.

sry, ze tak pozno
=========
Błędy są naszym najskrytszym wyborem. Wiedz błądźmy, badźmy...




Użytkownicy przeglądający ten temat: 0

0 użytkowników, 0 gości, 0 anonimowych