Ik heb een template voor een site
Ik heb de volgende navigatieknoppen:
Home – Wie zijn wij – Hobby's – Foto's – Links – Contact
Ik wil van Hobby's en Foto's een dropdown menu maken en de naam van de knoppen wijzigen Hobby's >Kaart 1-6 En Foto's>Kaart 7-12 Kaart 1-6 werkt nog wel onder de knop hobby's, Maar bij Foto's krijg ik geen dropdownmenu. Kan iemand mij hulp bieden en uitleggen welke codes ik moet veranderen?
bekijk mijn site www.mijnfietstochten.nlhttp://www.mijnfietstochten.nl
<!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" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>kaart 1-6</title>
<meta name="keywords" content="keyword 1, keyword 2, kewyord 3" />
<meta name="description" content="Type hier een beschrijving van deze pagina" />
<link rel="stylesheet" type="text/css" href="basis.css" />
<style type="text/css">
#dropmenudiv{
position:absolute;
background-color: #FFFFFF;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}
#dropmenudiv a:hover{ /*hover background color*/
background-color: #FAAC58;
}
/* Sample CSS definition for the example list. Remove if desired */
.navlist li {
list-style-type: square;
width: 135px;
background-color: #FFFFB9;
}
</style>
<script type="text/javascript">
/***********************************************
* AnyLink Vertical Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="kaart1.htm">kaart 1</a>'
menu1[1]='<a href="kaart2.htm">kaart 2</a>'
menu1[2]='<a href="kaart3.htm">kaart 3</a>'
menu1[3]='<a href="kaart4.htm">kaart 4</a>'
menu1[4]='<a href="kaart5.htm">kaart 5</a>'
menu1[5]='<a href="kaart6.htm">kaart 6</a>'
//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="kaart7.htm">kaart 7</a>'
menu2[1]='<a href="kaart8.htm">kaart 8</a>'
menu2[2]='<a href="kaart9.htm">kaart 9</a>'
menu2[3]='<a href="kaart10.htm">kaart 10</a>'
menu2[4]='<a href="kaart11.htm">kaart 11</a>'
menu2[5]='<a href="kaart12.htm">kaart 12</a>'
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var horizontaloffset=-94 //horizontal offset of menu from default location. (0-5 is a good value)
/////No further editting needed
var ie4=document.all
var ns6=document.getElementById&&!document.all
if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width: 160px" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function clearbrowseredge(obj, whichedge){
var edgeoffset=-28
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up?
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then)
edgeoffset=dropmenuobj.y
}
}
return edgeoffset
}
function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}
function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)
if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
}
return clickreturnvalue()
}
function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}
function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}
function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}
function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
</script>
</head>
<body>
<div id="top">
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="wiezijnwij.html">Wie zijn wij</a></li>
<li><a href="hobbys.html" onMouseover="dropdownmenu(this, event, menu1, '165px')" onMouseout="delayhidemenu()">Hobby's</a></li>
<li><a href="fotos.html">Foto's</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="kop">
<div id="koptekst"><br />Jouw eigen website</div>
</div>
<div id="hoofdvak">
<h1>Hobby's</h1>
<h2>Duis consectus</h2>
<p>Duis consectus et gravida ut, aucibus.
In nisse pede, eu, tor sollicies laorem ipsum sapibulus nunc malesuada tincidunt purus.
Praesent mollis, eger sit anterdiet feugiat ultriciti sem.
Quis ornar vitae, justo. In trices antegestie. Praesentesque convallis nisl. Curaesent anterdum dapien.
Maecenatibus dictus.
Vestibulum pretium laoreet. Alique.
</p>
<h2>Maurisqu</h2>
<p>Maurisqu a sagittitor, posuer id, sus vatis nec libendimentum venean est malesuada.
Donectus volutpat in enim. Sed in, tur commod ero. Classa sit ametuere id, eget, convallis maurisque dui.
Proin dui elis. Mauris nisse sed dui trices augue gravida conummy id, ultrices leo.
</p>
<h2>Cras ligula magna</h2>
<p>Cras ligula magna, adipit, sus imper at, augue.
Vivamus element consequat commod met molliciti sodalesuada. Quis magna.
Duisque, lor, libendimentum sed dignisse place varius, mi quat.
Cum quam at et luctus, purus et dui. Proin feugiat amet, consequent enim dolor vitae luctus,
imper in mattis, pellent purus. Morbi aliquam mi quis volutpat. Nam temportorta anteger au qu adipis dignisl. </p>
<h2>Nam ipsum</h2>
<p><img alt="roos" src="roos.gif" height="50" width="50" align="left" />Nam ipsum antesque habiturpis portor vestibulum pede turpis dignisl, dolorem rhoncus fringillam at, gravida at ametuere.
Maurisque phare quis neque bibero, fring metuere id, dapien.
</p>
</div>
<div id="voet">
<a href="http://www.mijn-eigen-website.nl" target="_blank">© www.mijn-eigen-website.nl (design)</a>
</div>
</body>
</html>
Ik heb de volgende navigatieknoppen:
Home – Wie zijn wij – Hobby's – Foto's – Links – Contact
Ik wil van Hobby's en Foto's een dropdown menu maken en de naam van de knoppen wijzigen Hobby's >Kaart 1-6 En Foto's>Kaart 7-12 Kaart 1-6 werkt nog wel onder de knop hobby's, Maar bij Foto's krijg ik geen dropdownmenu. Kan iemand mij hulp bieden en uitleggen welke codes ik moet veranderen?
bekijk mijn site www.mijnfietstochten.nlhttp://www.mijnfietstochten.nl
<!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" xml:lang="nl" lang="nl">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>kaart 1-6</title>
<meta name="keywords" content="keyword 1, keyword 2, kewyord 3" />
<meta name="description" content="Type hier een beschrijving van deze pagina" />
<link rel="stylesheet" type="text/css" href="basis.css" />
<style type="text/css">
#dropmenudiv{
position:absolute;
background-color: #FFFFFF;
border:1px solid black;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}
#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}
#dropmenudiv a:hover{ /*hover background color*/
background-color: #FAAC58;
}
/* Sample CSS definition for the example list. Remove if desired */
.navlist li {
list-style-type: square;
width: 135px;
background-color: #FFFFB9;
}
</style>
<script type="text/javascript">
/***********************************************
* AnyLink Vertical Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
//Contents for menu 1
var menu1=new Array()
menu1[0]='<a href="kaart1.htm">kaart 1</a>'
menu1[1]='<a href="kaart2.htm">kaart 2</a>'
menu1[2]='<a href="kaart3.htm">kaart 3</a>'
menu1[3]='<a href="kaart4.htm">kaart 4</a>'
menu1[4]='<a href="kaart5.htm">kaart 5</a>'
menu1[5]='<a href="kaart6.htm">kaart 6</a>'
//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="kaart7.htm">kaart 7</a>'
menu2[1]='<a href="kaart8.htm">kaart 8</a>'
menu2[2]='<a href="kaart9.htm">kaart 9</a>'
menu2[3]='<a href="kaart10.htm">kaart 10</a>'
menu2[4]='<a href="kaart11.htm">kaart 11</a>'
menu2[5]='<a href="kaart12.htm">kaart 12</a>'
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var horizontaloffset=-94 //horizontal offset of menu from default location. (0-5 is a good value)
/////No further editting needed
var ie4=document.all
var ns6=document.getElementById&&!document.all
if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width: 160px" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')
function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}
function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top=-500
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function clearbrowseredge(obj, whichedge){
var edgeoffset=-28
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x-obj.offsetWidth < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move menu up?
edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either? (position at top of viewable window then)
edgeoffset=dropmenuobj.y
}
}
return edgeoffset
}
function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}
function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)
if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+horizontaloffset+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px"
}
return clickreturnvalue()
}
function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}
function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}
function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}
function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}
function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}
function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}
</script>
</head>
<body>
<div id="top">
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="wiezijnwij.html">Wie zijn wij</a></li>
<li><a href="hobbys.html" onMouseover="dropdownmenu(this, event, menu1, '165px')" onMouseout="delayhidemenu()">Hobby's</a></li>
<li><a href="fotos.html">Foto's</a></li>
<li><a href="links.html">Links</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
<div id="kop">
<div id="koptekst"><br />Jouw eigen website</div>
</div>
<div id="hoofdvak">
<h1>Hobby's</h1>
<h2>Duis consectus</h2>
<p>Duis consectus et gravida ut, aucibus.
In nisse pede, eu, tor sollicies laorem ipsum sapibulus nunc malesuada tincidunt purus.
Praesent mollis, eger sit anterdiet feugiat ultriciti sem.
Quis ornar vitae, justo. In trices antegestie. Praesentesque convallis nisl. Curaesent anterdum dapien.
Maecenatibus dictus.
Vestibulum pretium laoreet. Alique.
</p>
<h2>Maurisqu</h2>
<p>Maurisqu a sagittitor, posuer id, sus vatis nec libendimentum venean est malesuada.
Donectus volutpat in enim. Sed in, tur commod ero. Classa sit ametuere id, eget, convallis maurisque dui.
Proin dui elis. Mauris nisse sed dui trices augue gravida conummy id, ultrices leo.
</p>
<h2>Cras ligula magna</h2>
<p>Cras ligula magna, adipit, sus imper at, augue.
Vivamus element consequat commod met molliciti sodalesuada. Quis magna.
Duisque, lor, libendimentum sed dignisse place varius, mi quat.
Cum quam at et luctus, purus et dui. Proin feugiat amet, consequent enim dolor vitae luctus,
imper in mattis, pellent purus. Morbi aliquam mi quis volutpat. Nam temportorta anteger au qu adipis dignisl. </p>
<h2>Nam ipsum</h2>
<p><img alt="roos" src="roos.gif" height="50" width="50" align="left" />Nam ipsum antesque habiturpis portor vestibulum pede turpis dignisl, dolorem rhoncus fringillam at, gravida at ametuere.
Maurisque phare quis neque bibero, fring metuere id, dapien.
</p>
</div>
<div id="voet">
<a href="http://www.mijn-eigen-website.nl" target="_blank">© www.mijn-eigen-website.nl (design)</a>
</div>
</body>
</html>
Laatst bewerkt:
