|
|
Lenyíló ablak.
Mobilváltozat!
Asztali változathoz,
kattints a képre!
A lenyíló ablakokba írhatunk:
- felsorolásokat
- tetszőleges hosszúságú szöveget
- hivatkozásokat
Ha a lenyíló ablak hosszabb, mint ami a monitoron megjeleníthető.
Húzzuk az egeret a lenyíló ablakra, majd az egéren lévő görgető kerék forgatásával mozgathatjuk a teljes ablakot le és fel.
További és részletesebb tájékoztatót, lásd az asztali változatnál!
Program megírása:
Megírása XHTML fájlban:
<div id="lenyilomenu">
<script
language="javascript"
type="text/javascript"
src="java_fájl_neve.js">
</script>
<ul id="menu">
<li class="menu">
<a href="#">
Munkahely
</a>
</li>
<li class="menu">
<a href="#">
Termékek
</a>
<ul>
<li>
<a href="#">
Termék - 1
</a>
</li>
<li>
<a href="#">
Írhatunk
hosszabb
szöveget is
</a>
</li>
<li>
<a href="#">
Megjelenő ablak
szélessége,
jelenleg 150px
</a>
</li>
<li>
<a href="#">
Beírt szöveg,
az ablak
szélességét,
nem változtatja meg.
</a>
</li>
<li>
<a href="#">
Megjelenő ablak
magassága,
a beírt szöveg
hosszától és
betűméretétől függ
</a>
</li>
<li>
<a href="#">
Termék - 6
</a>
</li>
<li>
<a href="#">
Termék - 7
</a>
</li>
</ul>
</li>
<li class="menu">
<a href="#">
Támogatók
</a>
<ul>
<li>
<a href="#">
Támogatók - 1
</a>
</li>
<li>
<a href="#">
Támogatók - 2
</a>
</li>
<li>
<a href="#">
Támogatók - 3
</a>
</li>
<li>
<a href="#">
Támogatók - 4
</a>
</li>
</ul>
</li>
<li class="menu">
<a href="#">
Foglalkozások
</a>
<ul>
<li>
<a href="#">
Munka - 1
</a>
</li>
<li>
<a href="#">
Munka - 2
</a>
</li>
<li>
<a href="#">
Munka - 3
</a>
</li>
<li>
<a href="#">
Munka - 4
</a>
</li>
<li>
<a href="#">
Munka - 5
</a>
</li>
</ul>
</li>
<li class="menu">
<a href="#">
Kapcsolatok
</a>
<ul>
<li>
<a href="#">
Telefon
</a>
</li>
<li>
<a href="#">
E-mail
</a>
</li>
</ul>
</li>
</ul>
</div>
Megírása javascript (js) fájlban:
// változó az aktuális menühöz
var t = false, current;
function SetupMenu ( )
{
if ( !document.getElementsByTagName ) return;
items=document.getElementByTagName ("li") ;
for ( i=0; i<items.length; i++)
{
if (items[ i ].className !="menu") continue;
// Eseménykezelők beállítása
thelink=findChild (items [ i ], "A") ;
thelink.onmouseover=ShowMenu ;
thelink.onmouseout=StartTimer ;
// Van almenü?
if (ul=findChild (items [ i ], "UL") )
{
ul.style.display="none";
for ( j=0; jul.childNodes.length; j++)
{
ul .childNodes [ j ] .onmouseover=ResetTimer ;
ul .childNodes [ j ] .onmoueout=StartTimer;
}
}
}
}