Lenyíló ablak elkészítése

A programhoz tartozik egy css és egy js fájl

A munkahely témakörhöz, nem készült további felsorolás, ezen témakörnél a lenyíló ablak sem jelenik meg.

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.

Program megírása:

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

#lenyilomenu {width: 800px;}

#menu {margin-left: 8px; font-size: 16px; font-weight: bold; color: black; border: none;}
#menu li {float: left; width: 120px; list-style-type: none; padding:  5px 25px 5px 5px;}
#menu li {background-color: silver;}

/* Meghatározzuk a lenyíló ablak, pozicióját, háttérszínét */
#menu li ul {position: absolute;  margin: 0px; margin-top: 5px; margin-left: -10px; padding: 0px;}
#menu li ul {background-color: silver;}

/* Meghatározzuk a lenyíló ablakban megjelenő, listas ablakok stílusát */
#menu li ul li {width: 150px;  float: none; list-style-type: none; font-size: 12px; color: black;} 
#menu li ul li {padding: 0px; margin: 0px;  background-color: #ccc;}

/* Meghatározzuk a horgony "a" megjelenési stílusát */
#lenyilomenu a { color: black; background-color: silver; display: block; padding-left: 5px;}
#lenyilomenu a:hover {font-size: 16px; color: black; background-color: #fff; padding-left: 3px; margin: 0px;}

     // változó az aktuális menühöz
var t = false, current;

function SetupMenu ( )  
{   if ( !document.getElementsByTagName ) return;
    items=document.getElementsByTagName ("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;
                                 }
                        }
      }
}