[CSS/dHTML] sub-list weergeven buiten parentelement

[r0bert]

Misschien beetje onduidelijke topictitel, maar ik leg het allemaal uit.

Het gaat om een soort simpel scriptje voor een menu. Ik heb deze opgebouwd uit lijsten (UL en LI), dus de eerste laag van het menu ziet er zo uit (horizontaal)

Text output:

begin    link1>   link 2    link 3

HTML:

<ul>
   <li>begin</li>
   <li>link1 &gt;
       <ul>
            <li>sublink1</li>
            <li>sublink2</li>
            <li>sublink3</li>
      </ul>
   </li>
   <li>link2</li>
   <li>link3</li>
</ul>

Klik je op link1, dan switch de display van de sublist tussen 'block' en 'none'. Prima, maar nu heeft de eerste laag UL ook nog een background. Als de sub van link1 dus verticaal uitklapt, wordt UL van de eerste laag ook uitgerekt (logisch) en ook de background etc.

Het is echter de bedoeling dat de sublist, zoals bekend van de standaard menuscriptjes, ervoor/eronder komt. Heb wat zitten puzzelen met position: absolute; want die kant zal het wel op moeten, maar dat werkt niet.. Iemand een idee voor een CSS oplossing?

edit: ow, en als je nu op link1 klikt, verschuiven link2 en 3 ook naar rechts doordat de ruimte van de sublist wordt ingevoegd, dat is eigenlijk ook niet de bedoeling

Indien onmogelijk in CSS, dan moet maar een dHTML oplossing, maar mijn vorige scriptje die ging helemaal de parentElement doorlopen om de positie left en top te bepalen etc. Wou het nu wat makkelijker proberen te regelen

[ Voor 41% gewijzigd door r0bert op 21-04-2004 23:29 ]

[André]

Bedoel je de z-index met ervoor?

[r0bert]

Ja, maar het (parent)element moet dus ook níét (mee) uitrekken..

[André]

Zet dan de <li> waar de sub <ul> in staat op relative en die <ul> op absolute.

[r0bert]

Verrekt! Snap niet hoe het nu werkt eigenlijk, maargoed..

Alleen nu even uitzoeken hoe ik 'm er recht onder kan krijgen en over de parent heen kan laten vallen (z-index haalde niets uit)

[André]

Hmm, ik denk aan z-index plus een beetje left + top werk....maar z-index werkt niet?

[r0bert]

Heb het 'm met margin-left: -100%; er goed recht onder (ranzig?)

Nog een probleempje, had toch al dHTML in de topictitel, dus denk dat het hier wel bij kan..

Ik heb menuutje in elkaar, alleen nu wordt bij een 2e laag sub (forum > actueel) mijn onclick event 2x gefired! En ik snap werkelijk niet waarom

Op deze pagina staat 't menu bovenin

[ Voor 19% gewijzigd door r0bert op 22-04-2004 13:54 ]

[André]

Hij werkt niet in Firefox.

Ik denk dat je de onclicks verkeerd heb staan ofzo

[r0bert]

Oh ja sorry, slechte eigenschap. Ik maak het altijd eerst werkend in IE en dan ga ik naar de andere browsers

De onclick werkt wel, maar zoals je aan de alerts kan zien (IE iig) wordt het event 2x gefired..

[ Voor 18% gewijzigd door r0bert op 22-04-2004 12:16 ]

[r0bert]

Iemand enig idee hoe er 2x een onclick gefired kunnen worden op eenzelfde element terwijl ik maar 1x klik? Ik dacht, misschien wordt ie gefired op de textnode en de UL ofzo, maar dat is het ook niet. Het is 100% 2x een gefired event op de UL-node..

[BtM909]

r0bert schreef op 22 april 2004 @ 12:19:
Iemand enig idee hoe er 2x een onclick gefired kunnen worden op eenzelfde element terwijl ik maar 1x klik? Ik dacht, misschien wordt ie gefired op de textnode en de UL ofzo, maar dat is het ook niet. Het is 100% 2x een gefired event op de UL-node..

Het enige wat me nu zo 1-2-3 opvalt, is dat ik direct na de eerste alert een JS-foutmelding krijg (op regel 98)...

[r0bert]

BtM909 schreef op 22 april 2004 @ 12:25:
[...]

Het enige wat me nu zo 1-2-3 opvalt, is dat ik direct na de eerste alert een JS-foutmelding krijg (op regel 98)...

Hmmz die kreeg ik dus niet.. *checkt*

edit: Gewoon IE 6? Want ik krijg geen foutmelding

[ Voor 12% gewijzigd door r0bert op 22-04-2004 12:30 ]

[BtM909]

r0bert schreef op 22 april 2004 @ 12:28:
[...]

Hmmz die kreeg ik dus niet.. *checkt*

edit: Gewoon IE 6? Want ik krijg geen foutmelding

Nee niet gewoon IE6

Versie: 6.0.2800.1106.xpsp2.030422-1633
codeersterkte: 128-bits

[r0bert]

Dat is exact dezelfde browser als die ik gebruik

[André]

r0bert schreef op 22 april 2004 @ 13:09:
Dat is exact dezelfde browser als die ik gebruik

Caching probleem, ik zeg het je, caching

[r0bert]

Ik heb opnieuw opgestart, CTRL F5, IE opnieuw gestart..

of bedoel je dat niet?

[r0bert]

Nog even de relevante code:

om een menuitem aan te maken, wordt de onclick aan de LI-node gehangen:

JavaScript:

// Array structuur menu [['',''[['','',''],['','',[['','',''],['','','']]]]]
function fnInitNav(arrNavLevel)
{
    var objList = document.createElement('ul');
    
    for (var intI = 0; intI < arrNavLevel.length; intI++)
    {
        var objItem     = document.createElement('li');
        
        objItem.innerHTML   = arrNavLevel[intI][0];
        objItem.className   = 'stlMenuItem';
        objItem.onclick     = fnSwitchNav;
        
        if (typeof arrNavLevel[intI][2] == 'object')
        {
            objItem.className       = 'stlMenuParent';
            objAppended         = objItem.appendChild(fnInitNav(arrNavLevel[intI][2]));
            objAppended.style.display   = 'none';
        }
        
        objList.appendChild(objItem);
    }
    
    return objList;
}

scriptje om menu uit te vouwen:

JavaScript:

function fnSwitchNav()
{
    //alert(event.type + ' event fired @ ' + event.srcElement.childNodes.item(0).nodeValue);
    objList     = event.srcElement.childNodes.item(1);
    
    //if (objList.tagName == 'UL')
    {
        //alert('voor: display - ' + objList.style.display);
        objList.style.display = (objList.style.display == 'none')? 'block' : 'none';
        //alert('na: display - ' + objList.style.display);
    }
}

edit: url gewijzigd

[ Voor 64% gewijzigd door r0bert op 22-04-2004 13:54 ]

[BtM909]

r0bert schreef op 22 april 2004 @ 13:29:
Nog even de relevante code:

om een menuitem aan te maken, wordt de onclick aan de LI-node gehangen:

Zou je tijdelijk aan je UL een id kunnen toevoegen? Kan ik ff wat specifieker debuggen

Het lijkt er ook op dat je een geneste UL heb?

[ Voor 8% gewijzigd door BtM909 op 22-04-2004 13:57 ]

[r0bert]

Jups..

ID is nu de waarde van de tekst met 'el' ervoor

'elactueel' dus bijv (weet dat het niet netjes is met whitespaces enzo, maar die zijn nu niet nodig toch?). Is het ook nodig dat de eerste laag allemaal een ID krijgt?


edit: Hmmz, zit trouwens ook even een beetje te twijvelen. Is het zometeen wel mogelijk om setTimeouts te gaan gebruiken (zonder IDs!) ? Bijv. aan de elementen hangen. Of móét ik toch sowieso met IDs gaan werken?

[ Voor 153% gewijzigd door r0bert op 22-04-2004 14:37 ]

[BtM909]

r0bert schreef op 22 april 2004 @ 14:15:
Ik ben een hele grote Prutzor

Ben niet helemaal achter waar de oorzaak ligt, maar ik denk dat een

code:

window.event.cancelBubble = true; //IE-only

het probleem vast en zeker zal oplossen

offtopic:
Ik hou wel van je hoor

[ Voor 6% gewijzigd door BtM909 op 22-04-2004 15:14 ]

[r0bert]

Hé, het werkt!

En dat ik zei dat ik hele grote prutsor was, was omdat ik me op dat moment minder dan jou voelde omdat jij wel de oorzaak vond en ik niet.

offtopic:
en nou zal ik ook weer vriendelijk doen

[ Voor 23% gewijzigd door r0bert op 22-04-2004 15:21 ]