Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

Javascript menu crossbrowser

hulpje
5 antwoorden
  • 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
  • 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;
  • 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
  • [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.
  • 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!!

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.