anoniem Geplaatst: 28 oktober 2003 Delen Geplaatst: 28 oktober 2003 hallo allemaal, Ik heb een javascript menu wat helemaal goed werkt in internet explorer. Nou ben ik erachter gekomen dat hij niet werkt in bijvoorbeeld mozilla of netscape. Dit wil ik liever wel. Ik heb de volgende code voor m'n menu: [code:1:bf1745c8c6] <script language="javascript"> <!-- var lasttarget; lasttarget = ""; function toggle(target) { if(lasttarget!="") { obj=document.getElementById(lasttarget); obj.style.display= 'none'; } if(lasttarget!=target) { obj=document.getElementById(target); obj.style.display=(obj.style.display=='none') ? 'inline' : 'none'; lasttarget = target; } else { lasttarget = ""; } } --> </script> [/code:1:bf1745c8c6] en in mijn html gedeelte staat het volgende [code:1:bf1745c8c6] <table> <tr> <td width="10"></td> <span onClick="toggle('submenu<?=$int?>')"> <td height="21" width="100%" class=menu style="cursor:hand;" >ProductCategoryName </td> </span> </tr> <tr id="submenu<?=$int?>" style="display:none"> <td width="10"></td> <td width="*"> <table cellSpacing="0" cellPadding="0" width="100%"> <tr> <td width="10px">&</td> <td colspan="2" height="15" width="*"> <A href="producten.php?SubCategorieId=ProductSubCategoryID&submenu=submenu<?=$int?>" target="main" class=menuitem> ProductSubCategoryName</A> </td> </tr> <?}?> </table> </td> </tr> </table> [/code:1:bf1745c8c6] Het is dus een menu met categorien en subcategorien. Standaard zijn de categorien zichtbaar en als je op een categorie klikt worden de subcategorien zichtbaar. HEt probleem is dus dat dit niet werkt in Quote Link naar reactie
anoniem Geplaatst: 28 oktober 2003 Auteur Delen Geplaatst: 28 oktober 2003 Het komt doordat je die span om die td zet. Dat moet andersom: [code:1:6828d75f1f] <td width="10"></td><td height="21" width="100%" class=menu > <span onclick="toggle('submenu1')" style="cursor:pointer;"> ProductCategoryName </span></td> [/code:1:6828d75f1f] Nog wat adviezen: Ik denk dat je geen tabel nodig hebt voor wat je wil. Ik zou voor ul en li's gaan. Gebruik css zoveel mogelijk in een apart stijlblok en gebruik js zoveel mogelijk in een apart script-blok. cursor:hand, werkt alleen in ie. cursor:pointer werkt in de rest van de browsers. Een manier om het in alle browsers goed werkend te krijgen is: cursor:pointer;//cursor:hand; Quote Link naar reactie
anoniem Geplaatst: 28 oktober 2003 Auteur Delen Geplaatst: 28 oktober 2003 Het dat met die span geprobeerd en dat werkt, maar nou had ik dat niet zonder reden gedaan. Als je span om de td heen zet geld in ie de hele cel als link. Dan vind ik een stuk mooier, vooral omdat ik een achtergrond plaatje gebruik. Dat is meteen een vraag hoe kan ik dat bereiken met een ul/li en omdat je zo hulpzaam bent en gul met de tips nog een vraagje wat bedoel je met een apart stijlblok, waaraan zie je dat ik dat hier niet doe (dacht namelijk dat ik dat wel deed)? Bedankt iig voor je antwoord en ik hoop dat je hier ook op wil antwoorden StruiS Quote Link naar reactie
anoniem Geplaatst: 28 oktober 2003 Auteur Delen Geplaatst: 28 oktober 2003 [code:1:78e0113701] <html><head> <title></title> <style type="text/css"> body{ font-family:Arial; font-size:12px; } .menu { width:200px; } .menu ul{ padding:0px; margin:0px; background-color:#6699cc; } .menu li{ list-style-type:none; } .menu span { text-decoration: underline; cursor:pointer;//cursor:hand; } .menu a { display:block; width:100%; text-decoration:none; color:#990000; padding-left:20px; } .menu a:hover{ background-color: #336699; } </style> <script> function doe(){ var x=document.getElementsByTagName('div'); var menurij=new Array(); for (var i=0;i<x.length;i++){ if (x[i].className=='menu')menurij[menurij.length]=x[i]; } for (i=0;i<menurij.length;i++){ menurij[i].getElementsByTagName('span')[0].onclick=function(){ var y=this.parentNode.getElementsByTagName('ul')[0]; y.style.display=='block'?y.style.display='none':y.style.display='block'; } } } window.onload=doe; </script> </head> <body> <div class="menu"> <span>ProductCategoryName</span> <ul style="display:block"> <li> <a href="naam1">Naam 1</a> </li> <li> <a href="naam1">Naam 2</a> </li> <li> <a href="naam1">Naam 3</a> </li> </ul> </div> </body> </html> [/code:1:78e0113701] Een hele lap code, maar dit is ongeveer wat ik zou doen, als ik je probleem goed begrijp. Op internet zijn er nog wel meer en beter uitgewerkte scripts die ongeveer hetzelfde doen. Quote Link naar reactie
anoniem Geplaatst: 31 oktober 2003 Auteur Delen Geplaatst: 31 oktober 2003 Ik snap je code helemaal, alleen zit ik nog met 1 probleem, hoe zet ik een plaatje achter de tekst. Het zijn nogal veel knoppen en om voor elke knop een apart plaatje te maken zie ik niet echt zitten. HOe zou ik dit kunne oplossen met ul en li? Thnx!! Quote Link naar reactie
anoniem Geplaatst: 2 november 2003 Auteur Delen Geplaatst: 2 november 2003 Ik weet niet precies wat je bedoelt, maar met list-style-image kun je een plaatje voor elke li zetten. Als je een plaatje na elke link wil hebben zou je een background-image kunnen zetten op elke link in het menu Quote Link naar reactie
Aanbevolen berichten
Om een reactie te plaatsen, moet je eerst inloggen