Layer over select heen plaatsen is mogelijk

Al jaren irriteert dit probleem me, je hebt een mooi menu op je pagina dat uitklapt als je over de items heen gaat. Maar dan is er een pagina waar gebruikt gemaakt wordt van de zogenaamde select box. Deze verschijnt dwars door je menu heen zoals te zien is in onderstaande afbeelding.

pulldown.gif De meeste gebruikte oplossing was het laten verdwijnen van de selectbox wanneer het menu opengeklapt staat. Dit is vaak niet een mooie oplossing en vereist ook een stukje script wat op maat gemaakt moet worden voor dit probleem. Andere oplossingen had ik tot dus toe nog niet gezien.
De oplossing blijkt echter vrij simpel te zijn: plaats een iframe in de layer die in ieder geval het gedeelte van de select bedekt. Een iframe wordt namelijk wel bovenop de selectbox gerenderd. Daar overheen plaats je dan de layer en voila: de pulldown is keurig bedekt. Een iframe staat wel toe dat er een layer overheen gezet word.

Een voorbeeld van deze oplossing heb ik in deze pagina gezet. Dit probleem is overigens niet aan de orde in Firefox, deze rendert keurig de layer over de pulldown heen zoals het hoort. Alleen Internet Explorer is hierin een spelbreker.

Click to activate social bookmarks