login  Naam:   Wachtwoord: 
Registreer je!
 Forum

dropdown menu aan de zijkant (Opgelost)

Offline JeroenI - 04/03/2013 16:40 (laatste wijziging 04/03/2013 16:40)
Avatar van JeroenIPHP interesse Hallo allemaal,

Ik wil een dropdown menu maken wanneer je met je muis over een link gaat. Ik ben tot op zekere hoogte ermee klaar, maar de dropdown is letterlijk dropdown, hij laat het menu'tje zien direct onder de link, terwijl ik de dropdown naast de link wil hebben. Nu heb ik al wat geprobeerd met left en right maar is er geen eenvoudigere manier op dit op te lossen?

Code:
[code=php]
<?
echo '<div onmouseover="document.getElementById(\'tabmenu0\').style.display=\'\'" onmouseout="document.getElementById(\'tabmenu0\').style.display=\'none\'" style="display:block;">';
echo 'Link menu';
echo '<div style="clear: both;"></div>';
echo '<div id="tabmenu0" style="display:none; width:150px; background-color:#000000; float:left; position:absolute;">';
echo '<a style="color:#FFFFFF" href="#">submenu1</a><br>';
echo '<a style="color:#FFFFFF" href="#">submenu2</a><br>';
echo '<a style="color:#FFFFFF" href="#">submenu3</a><br>';
echo '<a style="color:#FFFFFF" href="#">submenu4</a><br>';
echo '<a style="color:#FFFFFF" href="#">submenu5</a><br>';
echo '<a style="color:#FFFFFF" href="#">submenu6</a><br>';
echo '</div>';
?>

Alvast bedankt!

6 antwoorden

Gesponsorde links
Offline Jointjeff - 04/03/2013 16:47 (laatste wijziging 04/03/2013 16:47)
Avatar van Jointjeff HTML interesse Wat is er niet eenvoudig aan left en right?

Je geeft de bovenliggende link een position:relative en vervolgens de submenu een position:absolute; Vervolgens kun je met de elementen left,right, top en bottom de positie van je submenu bepalen.
Offline JeroenI - 04/03/2013 16:48
Avatar van JeroenI PHP interesse Maar komt die positie bij elke schermresolutie overeen dan ?
Offline Jointjeff - 04/03/2013 16:54
Avatar van Jointjeff HTML interesse Ja als die absolute is ten opzichte van de bovenliggende link wel.

Voorbeeld: http://jsfiddle.net/7k4ps/
Bedankt door: JeroenI
Offline JeroenI - 04/03/2013 16:58 (laatste wijziging 04/03/2013 17:38)
Avatar van JeroenI PHP interesse Ik heb het nu zo maar dan is het niet gelijk aan de resolutie, die heb ik aangepast in mn windows en dan staat het ineens in het midden van het beeld, bij wijze van spreken.

php code - Bekijk de code zonder highlighting - Klap code in 
  1. <?
  2. echo '<div onmouseover="document.getElementById(\'tabmenu0\').style.display=\'\'" onmouseout="document.getElementById(\'tabmenu0\').style.display=\'none\'" style="display:block;">';
  3. echo 'Link menu';
  4. echo '<div style="clear: both;"></div>';
  5. echo '<div id="tabmenu0" style="display:none; width:150px; background-color:#4c4c1d; float:left; position:absolute; left:290px; top:380px;">';
  6. echo '<a style="color:#FFFFFF" href="#">submenu1</a><br>';
  7. echo '<a style="color:#FFFFFF" href="#">submenu2</a><br>';
  8. echo '<a style="color:#FFFFFF" href="#">submenu3</a><br>';
  9. echo '<a style="color:#FFFFFF" href="#">submenu4</a><br>';
  10. echo '<a style="color:#FFFFFF" href="#">submenu5</a><br>';
  11. echo '<a style="color:#FFFFFF" href="#">submenu6</a><br>';
  12. echo '</div>';
  13. echo '<div style="clear: both;"></div>';
  14. echo '</div>';
  15. ?>
Offline Jointjeff - 04/03/2013 18:05
Avatar van Jointjeff HTML interesse Waarom staat je code in een PHP echo? Het is gewoon HTML code wat er staat.

Als je mijn voorbeeld hebt bekeken zie je dat de submenu binnen een relatieve div of li moet staan. Vervolgens is je submenu absolute maar wel ten opzichte van de omliggende div of li.

Voorbeeld:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div style="position:relative;">
  2.  
  3.   <div style="position:absolute;">Submenu</a>
  4.  
  5. </div>


Anders is de position absolute namelijk op basis van de window/body.

Ik wil je in ieder geval aan raden te werken met list items en de hover te regelen door middel van CSS. Zie ook het eerder geplaatste voorbeeld daarvoor.
Offline JeroenI - 04/03/2013 18:25
Avatar van JeroenI PHP interesse top het werkt! Bedankt!
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.198s