| ||
|
|
| |
| ||
| ||
| Inside Technique : Div Menu This is a very simple implementation of a drop-down menu. The code uses DIV elements to hold the drop-down, uses a simple function to position the menu, and changes the visibility of the menu element by switching the display style. This demo requires Internet Explorer 4.0 or later We are now going to walk you through the HTML code to create this menu. First you need to define the stylesheet for the menu. The menu class defines the appearance of the top-level menu-item. The submenu class defines the appearance of the pop-up menu. The only required CSS properties is "position:absolute;width:200" on the submenu class. All other rules are optional.
<STYLE>
.menu {background-color:darkred;width:100; color: white; text-align: center}
.submenu {position:absolute;background-color:#77AADD;width:200}
</STYLE>
Next we look at the script that hides and shows the menu. This script is very simple. Whenever the mouse moves over a menu element, the child menu is displayed by calling the show function. This function displays the child and hides any other menu that may be displayed. We track the currently displayed menu in the cm variable. In addition, we add a simple onclick event handler. Whenever the mouse is clicked, we hide any displayed menus. This makes it easy to dismiss a menu.
<SCRIPT>
var cm=null;
document.onclick = new Function("show(null)")
function getPos(el,sProp) {
var iPos = 0
while (el!=null) {
iPos+=el["offset" + sProp]
el = el.offsetParent
}
return iPos
}
function show(el,m) {
if (m) {
m.style.display='';
m.style.pixelLeft = getPos(el,"Left")
m.style.pixelTop = getPos(el,"Top") + el.offsetHeight
}
if ((m!=cm) && (cm)) cm.style.display='none'
cm=m
}
</SCRIPT>
Now we need to define the actual menus. For each top-level menu item, you need to add the onmouseover event handler. This handler calls the show function passing in the menu element plus the ID of the sub-menu to display. The menu element is required to help automatically position the sub-menu. <BODY> <DIV ID="d1" onmouseover="show(this,ds1);" class="menu">JavaScript</DIV> <DIV ID="d2" onmouseover="show(this,ds2);" class="menu">XML</DIV> <DIV ID="d3" onmouseover="show(this,ds3);" class="menu">Other</DIV> After defining the menus, you need to create the pop-ups. For each pop-up make sure you give the proper submenu class, an ID that matches the show function calls above, and intially set the display: none. <DIV ID="ds1" CLASS="submenu" STYLE="display:none"> <A HREF="http:\\www.siteexperts.com">Site Experts</A> <BR> <A HREF="http:\\www.webtools.com">Web Tools</A> <BR> <A HREF="http:\\www.webdevelopersjournal.com">Web Developers Journal</A> </DIV> <DIV ID="ds2" CLASS="submenu" STYLE="display:none"> <A HREF="http:\\www.xml101.com">XML 101</A> <BR> <A HREF="http:\\www.xmlsoftware.com">XML Software</A> <BR> <A HREF="http:\\www.xml.com">XML.com</A> </DIV> <DIV ID="ds3" CLASS="submenu" STYLE="display:none"> <A HREF="http:\\www.microsoft.com">Microsoft</A> <BR> <A HREF="http:\\www.amazon.com">Amazon</A> <BR> <A HREF="http:\\www.users.globalnet.co.uk/~perry">JP's DHTML Web Site</A> </DIV> That's it!. You now have seen how to create simple pop-up menus. You can find lots more menuing and pop-up techniques in our Menus/ Popups Inside Techniques directory. Jon Perry is a freelance Author and Programmer from England. |