menu (uitbreiding)

Status
Niet open voor verdere reacties.
JB'tje

JB'tje

Gebruiker
Lid geworden
31 mei 2004
Berichten
556
Hallo,

Als er op een "hoofdmenu" gedrukt wordt op mijn site (www.jbtje.com) dan krijg je daar een aantal submenu's onder, deze kun je weer "weghalen" door nog een keer op het hoofdmenu te drukken.
Versimpelde versie is hier te vinden: http://www.jbtje.com/test.html

Nu is het zo, dat als de submenu's komen, dit in een keer gaat, in een niet echt "vloeiende" beweging...

Hoe kan ik ervoor zorgen dat:
Er langzaam een ruimte wordt gemaakt tussen 2 hoofdmenus (onder diegene waar je op geklikt hebt) en dat dan langzaam de submenu's tevoorschijn komen, b.v. doordat ze eerst 100% doorzichtbaar zijn, en daarna (na 2 sec.) 0% doorzichtig.

Ik had al wel iets gevonden voor het doorzichtig worden enz, maar werkt niet in IE7... (wel in mozilla)
HTML: 
percent = '50';

	document.getElementById("submenu").style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + percent + ")";
	document.getElementById("submenu").style.MozOpacity = percent / 100;
	document.getElementById("submenu").style.opacity = percent / 100;

Gegroet,
JBtje

p.s. Ik gebruik dus de javascript code/html code die in het bestand: http://www.jbtje.com/test.html te vinden is !
 
Ik heb de code van test.html aangepast, dat was wat makkelijker dan de website zelf. Het menu schuift nu in en uit en tijdens het in- en uitschuiven vervaagt het submenu ook. Als je het anders bedoelde moet je dat maar even zeggen.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TEST - by JBtje</title>
</head>

<body>

<div style="visibility: visible; position: relative; border: #FF0000 2px solid; width: 137px; cursor: pointer;" onclick="linken('1')">Hoofdmenu 1</div>
<div id="1" style="visibility:hidden; height:0px; width:137px; border:#000000 1px solid; overflow: hidden;"></div>


<div style="visibility: visible; position: relative; border: #FF0000 2px solid; width: 137px; cursor: pointer;" onclick="linken('2')">Hoofdmenu 2</div>
<div id="2" style="visibility:hidden; height:0px; width:137px; border:#000000 1px solid; overflow: hidden;"></div>

<div id="content_1" style="left:1px; top:1px; position:absolute; visibility:hidden; width:10px; height:10px; overflow:hidden;">
  <a href="www.google.com">Google.com</a><br><br> <a href="www.jbtje.com">JBtje.com</a><br><br> <a href="www.wikipedia.org">Wikipedia.org</a>
</div>

<div id="content_2" style="left:1px; top:1px; position:absolute; visibility:hidden; width:10px; height:10px; overflow:hidden;">
  <a href="www.google.com">Google.com - 2</a><br><br> <a href="www.jbtje.com">JBtje.com - 2</a><br><br> <a href="www.wikipedia.org">Wikipedia.org - 2</a>
</div>

<script language="javascript" type="text/javascript">
<!--

var slidetimeout = new Array();
var closing = new Array();

function linken(id)
{
  if(closing[id])
  {
  	closing[id] = false;
  	clearTimeout(slidetimeout[id]);
	makelower(id, document.getElementById(id).offsetHeight, document.getElementById(id).offsetHeight);
  }else{
  	closing[id] = true;
  	clearTimeout(slidetimeout[id]);
    document.getElementById(id).style.visibility = 'visible';
    document.getElementById(id).innerHTML = document.getElementById('content_'+id).innerHTML;
	oldheight = document.getElementById(id).offsetHeight;
    document.getElementById(id).style.height = 'auto';
	height = document.getElementById(id).offsetHeight;
    document.getElementById(id).style.height = oldheight + 'px';
	makehigher(id, oldheight, height)
  }
}

function makehigher(id, setto, maximum){
	percent = setto / maximum * 100;
	document.getElementById(id).style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + percent + ")";
	document.getElementById(id).style.MozOpacity = percent / 100;
	document.getElementById(id).style.opacity = percent / 100;
	document.getElementById(id).style.height = setto + "px";
	if(setto < maximum){
		slidetimeout[id] = setTimeout("makehigher('" + id + "', " + (setto + 2) + ", " + maximum + ")", 10);
	};
};

function makelower(id, setto, maximum){
	percent = setto / maximum * 100;
	document.getElementById(id).style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + percent + ")";
	document.getElementById(id).style.MozOpacity = percent / 100;
	document.getElementById(id).style.opacity = percent / 100;
	document.getElementById(id).style.height = setto + "px";
	if(setto > 0){
		slidetimeout[id] = setTimeout("makelower('" + id + "', " + (setto - 2) + ", " + maximum + ")", 10);
	} else {
  	  document.getElementById(id).style.visibility = 'hidden';
	};
};

-->
</script>
</body>
</html>
 
Super !!! dit is dus exact wat is wou hebben :D

eneeh... volgens mij mag je jezelf nu echt wel "webprogrameur" noemen :D

Gegroet en HEEL erg bedankt !
JBtje
 
@jeroen...

Ik heb wat tijd (0:26 sochtends...) gevonden om het scriptje door te kijken... en ben eeen klein ding tegengekomen :D

Als je de snelheid wilt aapassen, dan vervang je de 2 in "setto + 2" of "setto - 2" voor een andere waarde.... maar wat gebeurt er nou als je divbox maximaal 131 pixels hoog is?

goed gezien... bij het openen zal deze dan 132 pixels hoog worden, en bij het sluiten geeft hij een error omdat 131 niet door 2 gedeelt kan worden, en er dus uiteindelijk -1 voor setto uitkomt !!!

ik d8... laat ik dit maar ff zeggen, en een "oplossing" erbij zeteen voor wie het wil gaan gebruiken :D

Code: 
var open_speed = 4
var close_speed = 10

function makehigher(id, setto, maximum){
	if( (maximum-setto) < open_speed){ speed = maximum-setto; }else{ speed = open_speed; }
	percent = setto / maximum * 100;
	document.getElementById(id).style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + percent + ")";
	document.getElementById(id).style.MozOpacity = percent / 100;
	document.getElementById(id).style.opacity = percent / 100;
	document.getElementById(id).style.height = setto + "px";
	if(setto < maximum){
		slidetimeout[id] = setTimeout("makehigher('" + id + "', " + (setto + speed) + ", " + maximum + ")", 10);
	};
};

function makelower(id, setto, maximum){
  if(setto < close_speed){ speed = setto; }else{ speed = close_speed; }
	percent = setto / maximum * 100;
	document.getElementById(id).style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + percent + ")";
	document.getElementById(id).style.MozOpacity = percent / 100;
	document.getElementById(id).style.opacity = percent / 100;
	document.getElementById(id).style.height = setto + "px";
	if(setto > 0){
		slidetimeout[id] = setTimeout("makelower('" + id + "', " + (setto - speed) + ", " + maximum + ")", 10);
	} else {
  	  document.getElementById(id).style.visibility = 'hidden';
	};
};

Het gaat uiteraard om de if-jes bovenaan in de functies :D

Gegroet,
JBtje


=============================
Edit: wat is:http://www.vg-systems.com/ voor een site en wrrm krijg ik m'n activatie mail niet (binnen 30 min :S) :D
 
Laatst bewerkt:
Ja, dat klopt. Ik zat er ook al naar te kijken tijdens het scripten, maar ik had het maar even zo gelaten. Goed opgelost. :thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan