[CSS/HTML] dropdownmenu met onmouseover van kop

[Theske]

Goede middag,

Het is misschien een niet geheel duidelijke titel van mn topic, maar kon het even niet goed bewoorden in de ruimte
Maargoed, ik heb een dropdownmenu gemaakt met de suckerfish methode en het werkt allemaal.
Wat ik er nu nog bij zou willen is dat bij een onmouseover over mn menukopjes (dat zijn gifjes) het gifje veranderd (dat werkt allemaal) ennnnnn dat deze gehele SwapImage() net zolang blijft totdat ik ook met mn muis uit het uitgeklapte menu (de <li> )ben gegaan... Nu switch hij alweer (dmv onMouseOut='MM_swapImgRestore() ) terug naar het 'oorspronkelijke' gifje wanneer ik met mn muis uit het plaatje ga. Ik heb de onMouseOut al op verschillende plekken geprobeerd te zetten... in de verschillende <ul>'s en <li>'s, maar het had allemaal niet het gewenste resultaat. In het gifje zit een variabele (namelijk de taal), dus ik weet niet of het echt makkelijk is om die ook in css te zetten.
Ik hoop dat het allemaal duidelijk is... en hierbij nog even de code::

code:

<ul id="nav">
        <script>
        startList = function() {
        if (document.all&&document.getElementById) {
        navRoot = document.getElementById("nav");
        for (i=0; i<navRoot.childNodes.length; i++) {
        node = navRoot.childNodes[i];
        if (node.nodeName=="LI") {
        node.onmouseover=function() {
        this.className+=" over";
          }
          node.onmouseout=function() {
          this.className=this.className.replace(" over", "");
           }
           }
          }
         }
        }
        window.onload=startList;
        </script>   

        <li style="width:97px;" class="li">
            [img]"img/<?[/img]/menu_hetbureau_w.gif" width="97" name="bureau" onMouseOut='MM_swapImgRestore()' onMouseOver="MM_swapImage('bureau','','img/<? echo $lang; ?>/menu_hetbureau_k.gif',1)">
          <ul id="dropmenudiv1">
        <? 
                $sql= "SELECT DISTINCT SUBSTRING(submenu_id,1,1) AS submenu_id, sub_naam FROM content WHERE menu_id = '1' AND lang = '$lang' ORDER BY submenu_id ";
                $query = mysql_query($sql) or die(mysql_error()); 
                  while ($obj = mysql_fetch_object($query)) 
                     {
                     $s = $obj->submenu_id;
                     $sub_naam = $obj->sub_naam;
                     echo "<li><a href='index.php?m=1&s=".$s."&lang=".$lang."'>".$sub_naam."</a></li>";
                     }          
        ?>
          </ul>
        </li>
<!-- enz.... hier dus nog verder ook de andere koppen op dezelfde methode maar dat met een ander menu_id -->

Cascading Stylesheet:

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  }  
li {
    float: left;
    position: relative;
    width: 10em;
}
#nav .li{
  border-right: 1px solid #929496;  
}
li ul {
    display: none;
    position: absolute;
    top: 2.5em;
    left: 0;
}
li > ul {
  top: auto;
  left: auto;
  top: 2.5em;
    }   
li:hover ul, li.over ul{ display: block; }

[Pelle]

We zijn hier geen suckerfish support forum hoor

En je PHP code hier plakken zuigt. HTML output is wat we hier willen zien.

[Theske]

nee, ik snap dat jullie geen zuigvis support afdeling zijn, maar melde het er alleen maar even bij
ik neem aan dat je geen kennis van suckerfish (niet dat je er veel kennis van kan hebben) hoeft te hebben om de code te begrijpen.
de code die ik er neer heb gezet is mijn html en css code (en dus de suckerfish methode )... alleen dat stuk php wat erin zit is voor het ophalen van de inhoud voor de submenu's

[André]

Waarom gebruik je een extra Dreamweaver code ('MM_swapImgRestore()') terwijl de hover/onmouseover al in de sucherfish CSS en JS staat? Gebruik die er gewoon voor.

[Theske]

dus met behulp van CSS van JS die image swappen... maar hoe zorg ik er dan precies voor dat hij blijft staan totdat je ook uit het uitgeklapte menu gaat.... is daar een code voor in css ofso?

edit:: gezien het dus ook om een variabel gifje gaat, de directory is afhankelijk van de taal

[ Voor 21% gewijzigd door Theske op 01-12-2005 13:11 ]