uitklapmenu heeft kinderziektes na aanmaken hyperlinks

[degroot]

Hallo,

Ik ben bezig met een test websiteje te maken.
Let straks ook maar niet op de template , want die is tijdelijk (en gedownload )

Nu heb ik met javascript een uitklapmenu gemaakt.
Als je met de muis erover gaat , dan komt het , waar mogelijk natuurlijk , een submenu te voorschijn.

Toen ik hier nog geen hyperlinks van gemaakt had , ging dit allemaal perfect.
Als ik met mijn muis over de submenu's scrollde , werkte alles netjes naar behoren , ook de submenus kwamen tevoorschijn en er waren geen kinderziektes.

Nu heb ik in dat uitklapmenu hyperlinks toegevoegd.
Alleen zodra ik over mijn menu scroll , gaat dat in principe ook nog alllemaal goed.
Totdat mijn muis over "fournituren" gaat , en ik dit menu weer verlaat.
Dan verdwijnt het menu "fournituren" .
Het is nu niet meer zichtbaar , maar als ik dan met mijn muis over de bovenliggende en onderliggende menus blader , dan komt het weer voor een seconde tevoorschijn!!

Mijn uitleg is zeer onduidelijk , maar als je naar die testpagina blader , en je probeert er even overheen te scrollen , is dat duidelijker dan mijn uitleg van 1000(onbegrijpelijke) woorden.
Het maakt trouwens niets uit of je nu FireFox of IE hebt , in beide is het hetzelfde geval

De url is http://80.126.102.105/godefroy/template.php

Als jullie de broncode in het topic willen , dan zet ik hem wel even weg, maar anders kunnen jullie hem natuurlijk altijd uit de paginabron vinden!!

Hopelijk kunnen jullie mij een beetje verder helpen met mijn probleem

[XWB]

Waarom maak je geen uitklapmenu met css?
http://www.alistapart.com/articles/dropdowns/

[degroot]

Zoals je in mijn broncode gezien hebt...
Bestaat mijn dropdownmenu uit CSS.

En dat had ik toevallig ook van die site vandaan!!

[XWB]

Nou:

Nu heb ik met javascript een uitklapmenu gemaakt.

Wees iets duidelijker dan

Wat ik bedoelde is dat het uitklappen gewoon met css kan en je daar geen javascript voor nodig hebt (op een kleine functie voor IE6 na, want die ondersteunt het hover element niet).

[ Voor 6% gewijzigd door XWB op 11-06-2006 20:02 ]

[degroot]

Sorry het is ook allemaal een beetje onduidelijk uitgelegd....
Maar daarvoor had ik ook een link naar het voorbeeldje gezet, om mijn vage uitleg te verduidelijken!!!
MAar het is dus in CSS gemaakt, er zit (zoals je in de broncode kunt zien) wel javascript aan het menu vast!!

[XWB]

Hier een paar linkjes waar je zeker wat met kan doen:

http://therealcrisp.xs4all.nl/upload/menu_hori.html
http://www.howtocreate.co.uk/tutorials/testMenu.html

[degroot]

De links zijn inderdaad wel handing!
Mooie menutjes ook!

Maar het punt is dat ik gewoon dit menu zo wil aanhouden , past verder ook mooi in de layout.
En het werkte ook allemaal perfect , de overige onderdelen in het menu werken ook perfect, alleen bij "Fournituren" zit er een kleine kinderziekte in.
De rest van het menu werkt allemaal perfect, dus een totaal ander menu zou ik niet willen.

Het feit is dat ik nu dus wil weten wat de fout.
waarom het fout is en hoe ik het kan oplossen.

Dan heb ik dus ook gewoon een compleet werkend menu!

[degroot]

Ok de fout is inmiddels gevonden.
Het zat dus wel in JAVASCRIPt
om precies te zijn in mijn doHide functie, die is nu als volgt.

code:

function doHide(doNode)
{
   for (i in doNode.childNodes)
   {
      if (doNode.childNodes[i].nodeType==1)
      {
                if (!doNode.childNodes[i].href) { // childNodes met een href (a-tags dus) niet hiden.
                    doNode.childNodes[i].style.display='none';
                }
      }
   }
}

Alleen er is nog 1 kinderziekte (die was er van te voren ook al , dus dat heeft niets met de doHide te maken).
En dat is een verschil aan tussenruimte in IE en FF.
Als je de site in FF opent , zie je dat de submenu's mooi aansluiten op de hoofdmenu's.
Maar open je de site in IE , dan zie je dus dat die afstand tussen de submenu's en hoofdmenu's gewoon meer dan een tab aan ruimte overlaat , wat dus lelijk is.

Kan iemand mij hier een beeje mee opweg helpen om deze ziekte eruit te halen???

[Verwijderd]

Hacku schreef op zondag 11 juni 2006 @ 20:01:

(op een kleine functie voor IE6 na, want die ondersteunt het hover element niet).

Kleine correctie: jawel, maar niet op deze manier:

Cascading Stylesheet:

li:hover ul {
  display: block;
}

[degroot]

Verwijderd schreef op maandag 12 juni 2006 @ 21:40:
[...]

Kleine correctie: jawel, maar niet op deze manier:

Cascading Stylesheet:

li:hover ul {
  display: block;
}

Ok zo zou het natuurlijk ook kunnen , maar dat probleem is allemaal al opgelost , het enigste nu nog is dat de ruimte tussen hoofdmenu en submenu te groot is in alleen IE.
Zoals je 2 posts hierboven kunt lezen(uitgebreidere uitleg)

[hamsteg]

Cascading Stylesheet:

table.xxxx {
border-collapse: collapse;
}

[degroot]

hamsteggot schreef op dinsdag 13 juni 2006 @ 09:28:

Cascading Stylesheet:

table.xxxx {
border-collapse: collapse;
}

Deze oplossing heb ik in mijn css toegepast alleen dit werkt niet echt....
Klein vraagje.....
er staat table.xxxx

op de plaats van .xxxx moet daar natuurlijk de tabelnaam komen te staan?

[hamsteg]

yep! Kunt eerst ook de ".xxxx"weglaten, geldt het voor alle tabellen.

[degroot]

Ik heb dus gewoon .xxxx weggelaten.
Dit omdat ik dan zeker weet dat het voor alle tabellen geld.

Alleen in IE is het probleem hiermee nog steeds niet verholpen.
De ruimtes tussen de menu's blijven helaas even groot

[Verwijderd]

Met alle respect: je bent inmiddels meer tijd kwijt met debuggen van je tabellen dan met het opnieuw opbouwen van het menu als puur CSS. Ik zou het nog eens overwegen als ik jou was.

[degroot]

Daar heb je gelijk in.
Maar nu ben ik eenmaal zover , en echt geen zin om overnieuw te beginnen.

En het enigste kleine foutje tot nu toe is alleen maar dat de submenu's te ver van de hoofdmenu's staan.
En dat is ook alleen nog maar in IE , niet in FF.

Daarom wil ik liever alleen dit kleine foutje eruithebben dan een hele nieuwe menustructuur te maken

[degroot]

Iemand die mij een oplossing voor de grote ruimtes tussen de menu's kan geven?

[BtM909]

Volgens mij is het geen display bug ala The IE Three Pixel Text-Jog

Maar met zo'n troep als source-code ga ik niet eens moeite doen om verder te onderzoeken. Zet alle style en javascript bij elkaar. Je hoeft voor dit design geen tabel te gebruiken en om het probleem ook zelf beter in zicht te krijgen, maak even een simpele testcase met alleen je menu. Heb je het probleem dan ook nog steeds?

Standaard debuggen heet dat, maar om eerlijk te zijn zou ik eerder opnieuw kunnen beginnen. Dat jij er geen zin in hebt is een tweede, maar je hebt geen spectulair design (code-wise) dus moet het makkelijk binnen een uurtje (of sneller ) in elkaar gezet kunnen worden op de methode zoals het zou moeten.