[JS] Dropdown menu positie

[Verwijderd]

Ik heb een simpel js dropdown menu en dit wil ik graag gebruiken in een 'centered' layout. Werkt allemaal prima, maar de mouse-overs (dus dropdown) blijven altijd op hun oude plaats staan (ergens links in het scherm). Ik heb vanalles geprobeerd, ipv absolute relative, menu extern aanroepen met een include tag, allerlei css en html posities etc. het komt dus nooit recht onder de button te staan waar ik hem wil hebben en in firefox en opera komt het zelfs niet in de buurt. Heeft iemand toevallig een cross-browser oplossing? Geen frames of flash svp.

Een gestileerde versie van de code

code:

<div align="center" class="menutext"><a href="menu.html" onMouseOver="openMenu('item1')" onMouseOut="hideTimer=setTimeout('closeMenu()',250)">menuutje</a></div></td>

<div id="item1" class="menutext"
    style="position:relative; width:100px; background-color:#FF0000;visibility:hidden"
    onmouseover="clearTimeout(hideTimer)" 
    onmouseout="hideTimer=setTimeout('closeMenu()',250)"
>
optie 1<br>
optie 2<br>
</div>

[ Voor 14% gewijzigd door Verwijderd op 04-05-2005 17:27 ]

[crisp]

Zorg dat je je sub-menu's relatief tov je menu-items kan positioneren; dat betekent dat je daar dus al in je markup rekening mee moet houden. Gestileerd:

HTML:

<ul id="menu">
  <li>Menuitem
    <ul>
      <li>Submenuitem</li>
    </ul>
  </li>
</ul>

De geneste UL kan je nu makkelijk tov zijn parent positioneren.

[Verwijderd]

Bedankt Crisp, dat werkt in ieder geval al met de positie bepaling

Nu kom ik alleen bij een ander probleem en dat is dat het menu niet over de rest heengezet wordt. (zoals bijvoorbeeld wel het geval hierboven in het GOT menu). Het is uiteindelijk de bedoeling dat ik boven de website een table heb staan met 5 colums in elke colum 1 button. Bij 2 van de buttons wil een mouse-over menu dat de rest van de site overlapt en recht onder de button staat. Het laatste is al het geval Het eerste was het geval

Zoals op deze site: http://www.azentec.com/index.php

code:

<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="254" valign="top"><a href="menu.html" onMouseOver="openMenu('menuDiv1')" onMouseOut="hideTimer=setTimeout('closeMenu()',250)">menuutje</a>
<ul>
 <li>
<div id="menuDiv1" class="menutext" style="position:relative; width:100px; background-color:#FF0000;visibility:hidden" onmouseover="clearTimeout(hideTimer)" onmouseout="hideTimer=setTimeout('closeMenu()',250)"> 
optie 1<br>
optie 2
</div>
</ul>
</li></td>
<td width="246" valign="top"><a href="javascript://" onMouseOver="openMenu('menuDiv2')" onMouseOut="hideTimer=setTimeout('closeMenu()',500)">menuutje2</a>
<ul>
<li>
<div id="menuDiv2" class="menutext" style="position:relative; width:100px; background-color:#0000FF;visibility:hidden" onMouseOver="clearTimeout(hideTimer)" 
onMouseOut="hideTimer=setTimeout('closeMenu()',500)">
optie 1<br>
optie 2</div>
</li>
</ul>
</td>
</tr>
</table>

[ Voor 25% gewijzigd door Verwijderd op 04-05-2005 19:43 ]

[André]

De positie ten opzichte van elkaar kun je regelen met de z-index, dus zet je menu op 10 oid:

code:

.menu {
  z-index: 10;
}

Dit is overigens wel basic CSS materiaal, als ik jou was zou ik me daar wat meer in inlezen

[Verwijderd]

Ik weet dat de z-index dat bepaald alleen dat is niet wat ik bedoelde. Ik bedoel dat het menu wat visible wordt na een mouse-over over de rest van de pagina moet komen. Net zoals bij het tweakers menu hierboven, waarbij de mouseover de banner en de search overlapt.

[André]

Verwijderd schreef op donderdag 05 mei 2005 @ 00:25:
Ik weet dat de z-index dat bepaald alleen dat is niet wat ik bedoelde. Ik bedoel dat het menu wat visible wordt na een mouse-over over de rest van de pagina moet komen. Net zoals bij het tweakers menu hierboven, waarbij de mouseover de banner en de search overlapt.

Aha, op die manier. Daar is maar 1 oplossing voor en dat is de selectbox en iframe op hidden zetten (voor IE tenminste)

[Verwijderd]

Ik heb net even wat zitten spelen en met position absolute kan ik hem overal overheen zetten alleen staat het dan niet gecentreerd met het html gedeelte (alleen op 1 resolutie), met position relative, static of inherit staat het menu wel gecentreerd met het html gedeelte maar dan gooit hij er dus ruimte tussen. Is er geen cross-browser andere methode (ik heb niet zoveel kaas gegeten van js)?

[André]

Heb je iets online staan zodat we mee kunnen kijken? Ik snap niet helemaal wat je bedoeld

[Verwijderd]

Dit is misschien een handig artikel voor je: Dropdowns met CSS en een klein beetje javascript http://www.htmldog.com/articles/suckerfish/dropdowns/

Zou prima moeten werken in een gecentreerde layout, bijvoorbeeld:

code:

html, body {
  text-align: center;
}

#container {
  text-align: left;
  width: 500px;
  margin: auto;
}

... rest van dropdown css

code:

<html>
<head>
<title>Dropdowns</title>
</head>
<body>
<div id="container">
  <ul id="menu">
    <li>Menu Item #1
      <ul>
        <li>Optie #1</li>
        <li>Optie #2</li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

Heb je ook geen overbodige div's meer en van die nare onMouseOver onMouseOut dingetjes

[Verwijderd]

Andre > Ik zal snel iets online zetten, dat is misschien wel makkelijker

JordiR > Dat doet wat ik al kon, een dropdown menu centreren. Maar wat het moet doen is nog een stapje verder. Dropdown menu centreren EN over onderliggende elementen laten gaan.

Dit azentec.com is precies wat ik probeer te maken:
- Het dropped down (cross-browser)
- Het is gecentreerd (cross-browser)
- Het overlapt onderliggende elementen (tekst, plaatjes etc) in dit geval het hele stuk met 'your definitive eshop'.

1 en 2 samen lukt OF 1 en 3 samen lukt, nu moet ik nog richting 1,2 en 3

[Verwijderd]

Die url die ik je gaf, heb je die wel geprobeerd en gelezen? Want ik doe precies hetzelfde en centreer het menu en het overlapt de content eronder gewoon hoor. Maarja misschien snap ik niet helemaal wat je bedoelt?

Het enige wat hij niet zal overlappen is bijvoorbeeld een movie of een andere plugin zoals flash.

Mijn testje: http://jordi.w00t.nl/dump/dropdowntest.html

[ Voor 8% gewijzigd door Verwijderd op 06-05-2005 13:26 ]

[Verwijderd]

Jordi > Ik had het denk ik te snel gelezen. Maar echt super het werkt, voorzover getest ook cross-browser, laad snel, geen fratsen en gecentreerd! precies wat ik zocht. Bedankt!

Ik ga er eventjes mee spelen