Autor Zpráva
Jay-Jay
Profil *
#1 · Zasláno: 13. 5. 2006, 12:29:05
Odpovědět Citovat
Máme tady takovýto lehký script, na kliknutí se menu zobrazí, po dalším kliknutí zmizí... :

<html>
<head>
<title></title>
<script>
function f(lol)
{
hm = document.getElementById(lol);
if(hm.style.display == "none")
hm.style.display = "block";
else
hm.style.display = "none";
}
</script>
</head>
<body>
<div onclick="f('xx1')">kjsadf</div>
<div id="xx1" style="display:none;">aaa</div>
</body>
</html>

Zajímalo by mě, jak se dělá výsuvné menu, po kliknutí nabídka vyjede, po dalším kliknutí znovu zajede... čistě přes js, flash nechci používat :)
DJ Miky
Profil
#2 · Zasláno: 13. 5. 2006, 12:40:18
Odpovědět Citovat
HotScripts.com - tam si něco můžeš najít...
Jay-Jay
Profil *
#3 · Zasláno: 14. 5. 2006, 12:24:11
Odpovědět Citovat
DJ Miky : mno něco.. jsem hledal a tam zatím nic, co jsem tady popsal :) nechceš mi hodit přímo link ;o)
Leo
Profil
#4 · Zasláno: 14. 5. 2006, 13:07:45
Odpovědět Citovat
"Zajímalo by mě, jak se dělá výsuvné menu, po kliknutí nabídka vyjede, po dalším kliknutí znovu zajede... čistě přes js :)"

No a co z toho konkretne neumite? Leo
Jay-Jay
Profil *
#5 · Zasláno: 14. 5. 2006, 13:20:12
Odpovědět Citovat
Leo : to vysouvání :)
Leo
Profil
#6 · Zasláno: 14. 5. 2006, 13:24:09
Odpovědět Citovat
A cemu rikate vysouvani? Leo
Jay-Jay
Profil *
#7 · Zasláno: 14. 5. 2006, 13:41:56
Odpovědět Citovat
Leo : mno, jak bych to vysvětlil :o) text postupně odněkud vyjede :o)

Můj odhad je, že v tom bude nějaký ten interval a pole pozic, ale nechce se mi přemýšlet :))
Leo
Profil
#8 · Zasláno: 14. 5. 2006, 13:48:51 · Upravil/a: Leo
Odpovědět Citovat
Takze skutecne plynule vyjizdeni - tak tam pak budete v setInterval(u) menit nejake cislo v CSS. Ted je otazka jake cislo - zakladem je vzdycky byt schopen vytvorit si jednotlive faze animace (muzou byt treba jen dve, rozbaleno/sbaleno, ve vasem pripade i mezifaze) ve STATICKEM CSS. Umite?

JavaScript u takovych veci dela jen posledni nezajimavou fazi - animaci, ale to je pet deset procent kodu. Nejdriv musi byt HTML a CSS.

Leo
Jay-Jay
Profil *
#9 · Zasláno: 14. 5. 2006, 13:54:20
Odpovědět Citovat
Leo : co je statické a v tom případě i dynamické css :)) Jinak bych uvítal výklad pro lamy, já podle toho nemůžu zhodnotit, jestli to umím nebo ne :))
Leo
Profil
#10 · Zasláno: 14. 5. 2006, 14:02:24
Odpovědět Citovat
No CSS je staticke prakticky vzdycky :-) Proste - umite v CSS vytvorit napul vysunute podmenu? Leo
Jay-Jay
Profil *
#11 · Zasláno: 14. 5. 2006, 14:05:46
Odpovědět Citovat
Leo : zjistil bych si výšku podmenu a napozicoval bych poloviny výšky ?
Leo
Profil
#12 · Zasláno: 14. 5. 2006, 15:51:16
Odpovědět Citovat
Pozicovat muzete, ale jak schovate tu pulku aby nebyla videt? Myslite pod zakladni menu? Leo
Jay-Jay
Profil *
#13 · Zasláno: 14. 5. 2006, 16:18:23
Odpovědět Citovat
Leo : Nastavím mu nižší prioritu a nebo.... a nebo tu půlku hodím do display : block a tím nemusím ani pozicovat :)
Jay-Jay
Profil *
#14 · Zasláno: 14. 5. 2006, 16:19:03
Odpovědět Citovat
Leo : teda display:none :D:D:D
Jay Jay
Profil
#15 · Zasláno: 14. 5. 2006, 16:26:31
Odpovědět Citovat
Leo : mno dobře, tak to pozicování neodpadne.. :) ale snad jsme se posunuli o krok dál :))
Leo
Profil
#16 · Zasláno: 14. 5. 2006, 16:28:48
Odpovědět Citovat
Vysouva se to vodorovne nebo svisle? Leo
Jay Jay
Profil
#17 · Zasláno: 14. 5. 2006, 16:30:10
Odpovědět Citovat
Leo : Pokuď svisle znamená dolů, tak svisle :)
Jay Jay
Profil
#18 · Zasláno: 15. 5. 2006, 19:01:30
Odpovědět Citovat
Mno tak já se jdu ptát někam jinam mno :o)
Leo
Profil
#19 · Zasláno: 15. 5. 2006, 19:02:08
Odpovědět Citovat
Bezte, bezte :-) Leo
Big_G
Profil *
#20 · Zasláno: 17. 5. 2006, 13:29:20
Odpovědět Citovat
Lze to udělat pomocí clip.
To submenu ale musí mít pevné pozicování ve stylu (position:absolute)-tzn, že to musí být span nebo div.
Pak se scripten zjistí jeho velikost (např pomocía= document.all.objekt.height).
Pozice top se nastaví tak, aby přesně spodní hrana submenu seděla na spodní hraně menu a clip na
rect(a,šířka,výška,0);
Spustí se rutina, která postupně přičítá pozici divu submenu (např o 5px) a zároveň o stejnou hodnotu odečítá hodnotu a a mění clip (zápis:document.all.objekt.style.clip="rect("+a+" "+sirka+" "+vyska+" 0)";)
tato funkce musí být v intervalu nebo v timeout a musí se testovat jestli a==0.V tom případě rutina skončí - menu je celé vysunuto. Zasunutí je v podstatě totéž - a se přičítá a pozice top odčítá.Testuje se, jestli se a rovná výšce menu.
Big_G
Profil *
#21 · Zasláno: 17. 5. 2006, 13:32:16
Odpovědět Citovat
Ještě poslední věc. position:absolute; a clip:rect(0 0 0 0); musí být pro daný div nastaven už v CSS nebo přímo v něm pomocí zápisu style="".
Musí být rovněž nastaveno overflow:none;
Leo
Profil
#22 · Zasláno: 17. 5. 2006, 13:35:38
Odpovědět Citovat
Prave zjistovani vysky apod. JavaScriptem jsem se snazil vyhnout, ale nemel jsem vubec cas si s tim hrat. Leo
Big_G
Profil *
#23 · Zasláno: 17. 5. 2006, 13:55:46
Odpovědět Citovat
Skutečně nejde o nic jiného než o a=document.GetElementById["xx1"].style.height;
b=document.GetElementById["xx1].style.width;
Popřípadě bez toho style.

Napíšu menší ukázku: 

function roll(a)

{

if(a<=36)

{

document.all.menu1.style.top=a;

i=a*(-1);

h=i+36;

j="rect("+h+" 112 369 0)";

document.all.menu1.style.clip=j;

a=a+7;

setTimeout("roll("+a+");",5);

}

else

{

document.all.menu1.style.top=36;

j="rect(0 112 369 0)";

document.all.menu1.style.clip=j;

}

}


Přičemž mám v html objekt 


<div id="menu1"><a id="l1" class="menulc" OnMouseOver="document.hov.Play();" OnClick="blick(1);this.className='menulc';" href="inf.html">O 

  firmě</a><br>

  <a id="l2" class="menul" OnMouseOver="document.hov.Play();" OnClick="blick(2);this.className='menulc';" href="tisk.html">Tisk</a><br>

  <a id="l3" class="menul" OnMouseOver="document.hov.Play();" OnClick="blick(3);this.className='menulc';" href="www.html">webdesign</a><br>

  <a id="l4" class="menul" OnMouseOver="document.hov.Play();" OnClick="blick(4);this.className='menulc';" href="poc.html">Počítače</a><br>

  <a id="l5" class="menul" OnMouseOver="document.hov.Play();" OnClick="blick(5);this.className='menulc';" href="serv.html">Servis</a><br>

  <a id="l6" class="menul" OnMouseOver="document.hov.Play();" OnClick="blick(6);this.className='menulc';" href="dalsi.html">Další</a><br>

  <a id="l49" class="menul" OnMouseOver="document.hov.Play();" OnClick="blick(49);this.className='menulc';" href="kon.html">Kontakty</a><br>

  <a id="l50" class="menul" OnMouseOver="document.hov.Play();" OnClick="blick(50);this.className='menulc';" href="vztah.html">EULA</a><br>

  <img style="margin-top:5px;" src="./images/down.gif"></div>


Funkce se spouští po nahrání stránky přímo z tagu <body> 


<body id="b1" background="./images/leftdown2.gif" onload="roll(-297);">


U našeho případu se ale nespustí přímo roll, ale jiná funkce, která nejdříve do globálních proměnných načte rozměry divu.Tak pak zajistí spuštění roll.
Big_G
Profil *
#24 · Zasláno: 17. 5. 2006, 14:00:31
Odpovědět Citovat
V tomhle příkladu je navíc potřeba definovat class menul a menulc.
Navíc je obsažena funkce blick, které pouze pro všechny odkazy nastaví class na menul a spustí zvuk cli. 

function blick(a)

{

document.all.l1.className="menul";

document.all.l2.className="menul";

document.all.l3.className="menul";

document.all.l4.className="menul";

document.all.l5.className="menul";

document.all.l6.className="menul";

document.all.l49.className="menul";

document.all.l50.className="menul";

document.cli.Play();

}



Zvyky jsou na téže stránce jako activeX komponenty umístěné ve skrytém spanu. 


<span style="visibility:hidden;"><object ID="hov" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"

TYPE="application/x-oleobject" WIDTH="0" HEIGHT="0">

  <param name="FileName" value="hover.wav">

  <param name="AutoStart" value="0">

  <param name="AutoRewind" value="true">

  <param name="SelectionStart" value="0">

  <param name="ShowControls" value="0">

  <param name="ShowStatusBar" value="0">

  <param name="ShowDisplay" value="0">

</object>

<object ID="cli" classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"

TYPE="application/x-oleobject" WIDTH="0" HEIGHT="0">

  <param name="FileName" value="click.wav">

  <param name="AutoStart" value="0">

  <param name="AutoRewind" value="true">

  <param name="SelectionStart" value="0">

  <param name="ShowControls" value="0">

  <param name="ShowStatusBar" value="0">

  <param name="ShowDisplay" value="0">

</object></span>
Časová prodleva: 12 dní
Jay Jay
Profil
#25 · Zasláno: 29. 5. 2006, 17:47:11
Odpovědět Citovat
Big_G : wow, moc dík, až budu mít trochu čas, tak se v tom zkusím pohrabat :))
Časová prodleva: 18 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0