Mouse over en dan een rij

Status
Niet open voor verdere reacties.
pilootnour5

pilootnour5

Terugkerende gebruiker
Lid geworden
22 nov 2008
Berichten
1.895
t'Is moeilijk uit te leggen, maar hoe maak ik een knop, en als ik er dan met mijn muis overheen ga. er dan een klein menutje onder komt te staan. Dat zie je heel vaak.

Groetjes

PS. ik ben tot 2 uur online op helpmij. AUB in die tijd een reactie
 
Laatst bewerkt:
Zoeken op pull-down menu.

Voorbeeld:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script language="JavaScript">
function goToURL() { history.go(-1); }
</script>
<style>
.menu
{
background-color:#FFFFC1;
border:0px solid darkred;
width:110px;
font-size:14px;
font-family:verdana;
position: absolute;
font:bold;
color: #003700;
cursor: hand;
text-align:center;
}
.item_panel
{
width:80px;
border-left:0px solid darkred;
border-right:0px solid darkred;
clip:rect(0,80,0,0);
position:absolute;
}
.item_panel a
{
text-decoration:none;
color:#FFFFC1;
cursor:hand;
}
.item
{
background-color: #003700;
width: 80px;
font-size: 15px;
font-family: verdana;
text-align:center;
}
</style>

<script language="JavaScript">
var height = 20; // Hoogte van de hoofdmenu linken
var iheight = 25; // hoogte van de menu elementen
var bgc = "#003700" // Achtergrondkleur menu element
var tc = "#003700" // text kleur van het menu element
var over_bgc = "#808080";//achtergrondkleur menu item bij mouse-over
var over_tc = "#FFFFC1"; //teskt kleur bij mouse-over
var speed = 0;
var timerID = "";
var N = (document.all) ? 0 : 1;
var width = 80;
var self_menu = new Array();
function write_menu()
{
smc = 0;
document.write("<div style='position:absolute'>");
mn = 0;
mni = 1;
start = -1;
for(i=0;i<Link.length;i++)
{
la = Link[i].split("|");
if (la[0] == "0")
{
if(start == 0)
{
document.write("</div>");
h = csmc * iheight;
tmn = mn; //-h
self_menu[smc] = new Array(tmn,h,0,-2);
smc++;
mn--;
}
csmc = 0;
document.write("<div class='menu' style='top:"+mn+";height:"+height+"' id='down"+smc+"' onclick='pull_down("+smc+","+mni+")'> "+ la[1] + "</div>");
self_menu[smc] = new Array(mn,height,0,mni);
smc++;
mni++;
mn+=height;
start = 1;
}
else
{
if(start == 1)
{
if(N)mn+=2;
document.write("<div class='item_panel' id='down"+smc+"' style='top:"+mn+"'>");
start = 0;
}

document.write("<a href='"+la[2]+"'");
if (la[3] != "") document.write(" target='" + la[3] + "' ");
document.write("><div class='item' id='d"+i+"' style='height:"+iheight);
if (N) document.write(";width:80");
document.write("' onmouseover='color(this.id)' onmouseout='uncolor(this.id)'> "+ la[1] + "</div></a>");
csmc++;
}
}
if (start == 0)
{
document.write("</div>");
h = csmc * iheight;
tmn = mn + 5; //-h
self_menu[smc] = new Array(tmn,h,0);
name = "down" + (self_menu.length-1);
obj = document.getElementById(name);
obj.style.borderBottomColor = "#FFFFC1";
obj.style.borderBottomWidth = 0;
obj.style.borderBottomStyle = "solid";
}
document.write("</div>");}
function color(obj)
{
document.getElementById(obj).style.backgroundColor = over_bgc;
document.getElementById(obj).style.color = over_tc
}

function uncolor(obj)
{
document.getElementById(obj).style.backgroundColor = bgc;
document.getElementById(obj).style.color = tc
}

function pull_down(nr,c)
{
if (timerID == "")
{
to = self_menu[nr+1][1]
begin = nr + 2;
if (timerID != "") clearTimeout(timerID);
if (self_menu[nr+1][2] == 0)
{
self_menu[nr+1][2] = 1;
if(nr == self_menu.length-2) {to++;}
epull_down(begin,to,0);
}
else
{
to = 0;
self_menu[nr+1][2] = 0;
name = "down"+(nr+2);
open_item = 0;
for(i=0;i<nr;i++)
{
if(self_menu[i][2] == 1)
{open_item += self_menu[i][1];
}
}
if (N == false) {open_item-= (c*1)};
if (nr== self_menu.length-2) {val = self_menu[self_menu.length-1][1];to=-1;}
else val = parseInt(document.getElementById(name).style.top) -(open_item)-(c*height);
epull_up(begin,to,val);
}
}
}

function epull_down(nr,to,nowv)
{
name = "down" + (nr-1);
obj = document.getElementById(name).style.clip = "rect(0,"+width+","+(nowv+1)+",0)";
for (i=nr;i<self_menu.length;i++)
{
name = "down" + i;
obj = document.getElementById(name);
obj.style.top = parseInt(obj.style.top)+1;
}
nowv++;
if(nowv < to) timerID = setTimeout("epull_down("+nr+","+to+","+nowv+")",speed);
else timerID = "";
}

function epull_up(nr,to,nowv)
{
name = "down" + (nr-1);
obj = document.getElementById(name).style.clip = "rect(0,"+width+","+nowv+",0)";
for (i=nr;i<self_menu.length;i++)
{
name = "down" + i;
obj = document.getElementById(name);
obj.style.top = parseInt(obj.style.top)-1;
}
nowv--;
if(nowv > to) timerID = setTimeout("epull_up("+nr+","+to+","+nowv+")",speed);
else timerID = "";
}

function startup(nr)
{
write_menu();
if (nr != 0)
{
for(i=0;i<self_menu.length;i++)
{
if(self_menu[i][3] == nr) pull_down(i,nr)
i==self_menu.length;
}
}
}
</script>

</head>

<body>
<body bgcolor="#003700" text="#FFFFC1">

<p>
<table width=0>
<tr>
<td>
<script language="JavaScript">
//Link[nr] = "positie [0 is menu/1 is een item],Link naam ,url,target (blank|top|frame_naam)"
// je kunt eenvoudig items toevoegen, gewoon doornummeren
var Link = new Array();
Link[0] = "0|Stamrozen";
Link[1] = "1|naam |.html";
Link[2] = "1|naam |.html";
Link[3] = "1|naam |.html";
Link[4] = "1|naam |.html";
Link[5] = "0|Struikrozen";
Link[6] = "1|naam |.html";
Link[7] = "1|naam |.html";
Link[8] = "1|naam |.html";
Link[9] = "1|naam |.html";
Link[10] = "0|Trosrozen";
Link[11] = "1|naam |.html";
Link[12] = "1|naam |.html";
Link[13] = "1|naam |.html";
Link[14] = "1|naam |.html";


startup(0);
</script>
</td>
</tr>
</table>



</body>


</html>
 
Laatst bewerkt:
Is dat de hele code?
 
Laatst bewerkt door een moderator:
Je denkt dus dat peter halve code plaatst? :rolleyes:

Vanwaar de vraag? Ik kan maar 1 reden bedenken en dat is dat het bij jou niet werkt.
 
Bij mij werkt het in alle geval prima (IE en FF) op 1 ding na:
In IE 'verdwijnen' de subitems na een mouse-over...
 
re

Tha Devil zei:
Je denkt dus dat peter halve code plaatst? :rolleyes:

Vanwaar de vraag? Ik kan maar 1 reden bedenken en dat is dat het bij jou niet werkt.
Klik om te vergroten...

Waar bent u altijd eigewijs. U mag dan wel lid zijn van helpmij. Maar dat wil niet zegge dat u alles kan en mag zegge.
 
Altijd is een groot woord...

Daarnaast zul je moeten begrijpen dat met alleen de zin "Is dat de hele code?" peter niet is geholpen. Blijkbaar schuilt er iets achter die vraag van jou.

Daarom reageer ik om er achter te komen wat dat is, dat jij het als eigenwijs opvat moet je zelf weten. Verder lijkt het me niet zo dat jij beslist wat ik wel en niet mag zeggen.

Blijkbaar heb je niet door dat de mensen hier vrijwillig voor jou aan de gang zijn. Je kunt ze op z'n minst bruikbare informatie verschaffen.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan