I recently had a request related to a previous post title Keeping the Drop-Downs on Top asking me how to implement the method that I was showing. I have decided to post a tutorial that explains how to use this method in conjunction with a drop-down menu in order to show just how to keep drop-downs above HTML form select elements.
We will start by adding the addIframe method to a Utils object:
<script type="text/javascript">
var Utils = new Object();
Utils.addIframe = function(id, el)
{
if(document.getElementById(id) == null)
{
var _iframe = document.createElement("iframe");
_iframe.src = 'about:blank';
_iframe.scrolling = 'no';
_iframe.frameborder = '0';
_iframe.id = id;
_iframe.style.position = 'absolute';
_iframe.style.border = "none";
if(el)
{
document.getElementById(el).appendChild(_iframe);
}
else
{
document.body.appendChild(_iframe);
}
}
return document.getElementById(id);
}
</script>
Once we have the object created we can get started with our drop-down menu, this menu will not be fully-functional, as I simply want to show you how to keep it above other elements. We will start by creating the HTML:
<div><a href="#" onmouseover="Menu.show('myiframe', 'menu');" onmouseout="Menu.remove('myiframe', 'menu');">Menu Title</a></div>
<div id="menu" style="display: none;">
<a href="#">Menu option one</a>
<a href="#">Menu option two</a>
</div>
<div class="content">
<select>
<option>An Option</option>
</select>
</div>
Now we have a menu title and two menu options, this will become our drop-down once we add the Menu object that we are calling from the mouseover and mouseout of the title. Below this drop-down code is the HTML select list wrapped in a div named content. Before we create the Menu object we will need to set a few CSS properties for these elements in order to get it all to render properly:
<style type="text/css">
#menu
{
position: absolute;
z-index: 2;
border: #333 1px solid;
}
#menu a
{
display: block;
}
.content
{
position: absolute;
}
</style>
This CSS will set the positions of the menu and the content to absolute so that the drop-down does not push the content over as it would in a relative position. Next we set the z-index of the menu to a higher depth than content and we add a display of block to the menu options in order to get them to stack.
Now that this is down we will create our Menu object and see it all in action. Below is the code:
<script type="text/javascript">
var Menu = new Object();
Menu.show = function(iframeId, menuId)
{
var menu = document.getElementById(menuId);
menu.style.display = '';
var _iframe = Utils.addIframe(iframeId, menu.parentNode.id);
_iframe.style.backgroundColor = '#fff';
_iframe.style.width = menu.offsetWidth +"px";
_iframe.style.height = menu.offsetHeight +"px";
}
Menu.remove = function(iframeId, menuId)
{
var _iframe = document.getElementById(iframeId);
if(_iframe.parentNode != null)
{
_iframe.parentNode.removeChild(_iframe);
}
document.getElementById(menuId).style.display = 'none';
}
</script>
This object has two methods, show and remove, pretty self-explanatory... The show method takes a unique id for the iframe and the id of the drop-down menu that you want to display. It then calls the addIframe method, sets its background color and its width and height relative to the menu in order to keep it hidden behind it. The remove method takes the same two parameters, but removes the iframe from the document.
Labels: css, dhtml, javascript
RSS Feed
Ajax for Web Application Developers