Layer probleempje - Softwareontwikkeling

dinsdag 26 februari 2002 16:48

Acties:

Topicstarter

Ik heb een probleem met een menu met allemaal divjes. Ik wil met onmouseover in het menu een layer tussen de verschillende divjes laten verschijnen. Maar als je dus niet met de mouse op de link staat dat de div dan gewoon ook geen ruimte in neemt in het menu. Dit alles om een soort sub-menu te maken.

Ik heb nu deze code :

code:

<html>
<head>

<style>

div         {font-family:tahoma; font-size:8pt;}
.container  {border: 1 solid gray; background-color:#E0E0E0; padding:2; width:100px; 
 filter:progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=135, Strength=4)}
.menuItem   {border:1 solid #E0E0E0; background-color:#E0E0E0; padding:1; width:100px;}
.menuOver   {border:1 solid gray;    background-color:#D0D0D0; padding:1; width:100px;}


#onzerenners {height:30;visibility:hide;visibility:hidden;}

</style>

<script language="javascript">
var ie4 = ( document.all )            ? true : false;
var ns6 = ( !ie4 && document.getElementById ) ? true : false;
var ns4 = ( !ie4 && !ns6 && document.layers ) ? true : false;
function getStyleOf ( id )
{
   return ie4 ? document.all [ id ].style 
      : ns4 ? document.layers [ id ]
      : ns6 ? document.getElementById ( id ).style
      : null;
}

function layer ( id, onoff )
{
   theStyle = getStyleOf ( id );
   if ( theStyle != null )
    theStyle.visibility = onoff ? "visible" : "hidden";
}

function changeState(obj, how) {
    obj.className = (how)? "menuOver":"menuItem";
}


</script>

</head>
<body>
<DIV class="container">
    <DIV class="menuItem" onmouseover="changeState(this,true); 
     layer( 'onzerenners', true ); return false;" onmouseout="changeState(this); 
     layer( 'onzerenners', false ); return false;">Onze renners</DIV>
    <DIV class="menuItem" id="onzerenners">
        <tr>
        <td>test</td></tr>
        <tr><td>test2</td></tr>
    </DIV>
    <DIV class="menuItem" onmouseover="changeState(this,true)" 
     onmouseout="changeState(this)">Uitslagen</DIV>
    <DIV class="menuItem" onmouseover="changeState(this,true)" 
     onmouseout="changeState(this)">Informatie</DIV>
</DIV>


</body>
</html>

Voor de werking hier een url:
http://stormvogels.veendam.org/test2.html

Ik hoop dat iemand mij tips kan geven hoe ik dit het beste kan oplossen.

dinsdag 26 februari 2002 16:49

Acties:

Verwijderd

niet switchen tussen visibility: hidden|visible;

wél switchen tussen display: none|block;

dinsdag 26 februari 2002 19:30

Acties:

Verwijderd

Ik heb de code morgen voor je, kligt nl. op mn werk. Het is volledig cross-browser, op NS6 na..., je kunt zelfs layers groeperen, ik heb de js files van wellowell en zelf aangepast voor een menu.
Dus nog even geduld....

dinsdag 26 februari 2002 20:04

Acties:

crisp

Devver

Pixelated

Gewoon de height van de div laten switchen tussen '0px' en 'auto' werkt meestal prima...

Intentionally left blank

dinsdag 26 februari 2002 20:18

Acties:

Patrickvs

Topicstarter

Op dinsdag 26 februari 2002 19:30 schreef partyganger het volgende:
Ik heb de code morgen voor je, kligt nl. op mn werk. Het is volledig cross-browser, op NS6 na..., je kunt zelfs layers groeperen, ik heb de js files van wellowell en zelf aangepast voor een menu.
Dus nog even geduld....

Ow dat zal mooi zijn..kan ik dat ook eens proberen.. ik ben nu trouwens ook al een heel eind op weg met display: none | block .. moet toch wat expirimenteren heh

woensdag 27 februari 2002 09:19

Acties:

Verwijderd

Hij staat er hoor, klik hier

en dit is het zip filetje:
menusystem.zip.zip

Er zijn maximaal 15 groepen mogelijk, cGroup2 t/m cGroup16 moet je overslaan, omdat anders de showGroups functie in het HTML bestand niet werkt niet werkt. cNoGroup is altijd zichtbaar.
in het stukje JS code in de HTML pagina zie je ook een aantal keer addLayer(). De volgorde waarin je daar je layers add, komen ze ook op de site zichtbaar.
De functie showGroups wordt aangeroepen uit de links van het menu, beginnend bij showGroups(0), dit maakt cGroup2 zichtbaar (2e-0 --> exponentieel, heel vaag, ik weet t, maar dat is hier niet 1