[Javascript] Variabele breedte uitklapmenu - Softwareontwikkeling

vrijdag 30 maart 2007 22:58

Acties:

Topicstarter

Ik heb een simpel concept voor een verticaal uitklapmenu.
Het is gewoon een unordered list CSS:hover menu, zoals dat op vele sites te vinden is, maar dan met javascript om een variabele breedte en een delay toe te kunnen voegen.
Nu is mijn probleem dat de menuitems uit een database komen en dus de breedte van het menuitem niet vantevoren bekend is.
Ik heb vanalles al geprobeerd :
- absoluut gepositioneerd met javascript die de offsetWidth gebruikt
- relatief of float werkt in dit geval niet (omdat het allemaal "in" elkaar zit, dus <ul> binnen een <li>)
Nog even de code die ik gebruik :

Cascading Stylesheet:

html * { -moz-box-sizing: border-box; }  
#navL {
  position: absolute; top: 0; left: 0;
  /*width: 120px;*/ height: 100%; padding-top: 100px;
  border: 1px solid red;
}
#navL li { width: 110px; }
#navL ul { list-style: none; margin:0; padding:0; background: #AAA; }
#navL li { list-style: none; margin:0; padding:0; }
#navL li a { width: 100%; height: 100%; text-decoration: none; font: bold 12px verdana; color: #FFF; }

HTML:

<html>
<head>
  <script type="text/javascript">
function test(el) {
  var sub = el.childNodes[1];
  sub.style.position = 'absolute';
  sub.style.display = 'block';
  sub.style.top = el.offsetTop;
  sub.style.left = el.offsetWidth; //120;
}
function hideMenu(el) {
  var sub = el.childNodes[1];
  sub.style.display = 'none';
}
  </script>
</head>
<body>
  <ul id="navL">
    <li onmouseover="test(this)">Menu 1
    <ul style="display:none">
      <li onmouseover="test(this)" onmouseout="hideMenu(this)">Submenu 1
      <ul style="display:none">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li onmouseover="test(this)">Submenu 1
        <ul style="display:none">
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
        </ul></li>
      </ul></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul></li>
    <li onmouseover="test(this)" onmouseout="hideMenu(this)">Menu 2
    <ul style="display:none">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul></li>
    <li onmouseover="test(this)" onmouseout="hideMenu(this)">Menu 3
    <ul style="display:none">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul></li>
  </ul>
</body>
</html>

Iedereen wil terug naar de natuur, maar niemand wil lopend...

vrijdag 30 maart 2007 23:08

Acties:

crisp

Devver

Pixelated

Dit toevoegen:

Cascading Stylesheet:

#navL li {
    position:relative;
}
#navL li ul {
    display: none;
    position: absolute;
    top: 0;
    left: 110px;
}

en vervolgens hoef je eigenlijk alleen maar de display property te toggelen, en eventueel style.left nog aan te passen naar wens.

Intentionally left blank

zaterdag 31 maart 2007 03:09

Acties:

MichielioZ

Topicstarter

crisp schreef op vrijdag 30 maart 2007 @ 23:08:
en vervolgens hoef je eigenlijk alleen maar de display property te toggelen, en eventueel style.left nog aan te passen naar wens.

Dankje voor de nuttige toevoeging aan de CSS, maar helaas is het juist die left: 110px waar ik vanaf wil... het uitklapmenu moet direct naast het vorige menuelement uitklappen, onafhankelijk van een vooraf bepaalde breedte... de content bepaald dus de breedte.

Iedereen wil terug naar de natuur, maar niemand wil lopend...

zaterdag 31 maart 2007 16:46

Acties:

crisp

Devver

Pixelated

MichielioZ schreef op zaterdag 31 maart 2007 @ 03:09:
[...]

Dankje voor de nuttige toevoeging aan de CSS, maar helaas is het juist die left: 110px waar ik vanaf wil... het uitklapmenu moet direct naast het vorige menuelement uitklappen, onafhankelijk van een vooraf bepaalde breedte... de content bepaald dus de breedte.

left: 100% zou volgens mij ook moeten werken, en anders kan je het alsnog met javascript doen.
Ik wou alleen maar laten zien dat absolute positioning toch wel degelijk mogelijk is.

Intentionally left blank

zaterdag 31 maart 2007 23:23

Acties:

MichielioZ

Topicstarter

Crisp, je bent een geweldenaar... of, het komt iig in de buurt $_/-\o_$
left: 100% werkt inderdaad !
Na zeker een uur staren naar de code kwam ik er nog steeds niet uit

Ik kan in ieder geval weer verder met het projektje en op de topic kan denk ik wel een slotje...

Iedereen wil terug naar de natuur, maar niemand wil lopend...