Normal web browser behaviour is to switch to a new page when you click a hyperlink. Sometimes however you want a single hyperlink to lead to several pages and present a dynamic menu when clicked. This is usually done through an intermediary page.

The javascript sample on this page will provide such dynamic menus by creating an absolutely-positioned DIV tag on the fly, which will contain the list of links.

For another such concept implementation check out the Absolute Popup Box sample, which achieves similar effect but with the help of external pages in IFRAME tag.

If the javascript code snippet offered on this page doesn't suit your needs, feel free to visit other javascript navigation samples on this site.

To use the script perform the following steps:

• Insert the following code somewhere on the page:

<script type="text/javascript"><!--
/* Script by: www.jtricks.com
 * Version: 20060116
 * Latest version:
 * www.jtricks.com/javascript/navigation/multilinks.html
 */
// Moves the div object to be directly beneath an object.
function move_box(an, box)
{
    var cleft = 0;
    var ctop = 0;
    var obj = an;

    while (obj.offsetParent)
    {
        cleft += obj.offsetLeft;
        ctop += obj.offsetTop;
        obj = obj.offsetParent;
    }

    box.style.left = cleft + 'px';

    ctop += an.offsetHeight + 8;

    // Handle Internet Explorer body margins,
    // which affect normal document, but not
    // absolute-positioned stuff.
    if (document.body.currentStyle &&
        document.body.currentStyle['marginTop'])
    {
        ctop += parseInt(
            document.body.currentStyle['marginTop']);
    }

    box.style.top = ctop + 'px';
}

// Shows a box if it wasn't shown yet or is hidden
// or hides it if it is curre
function show_hide_multilink(an, width, height, className, links)
{
    var href = an.href;
    var boxdiv = document.getElementById(href);

    if (boxdiv != null)
    {
        if (boxdiv.style.display=='none')
        {
            // Show existing box, move it
            // if document changed layout
            move_box(an, boxdiv);
            boxdiv.style.display='block';
        }
        else
            // Hide currently shown box.
            boxdiv.style.display='none';
        return false;
    }

    // Create box object through DOM
    boxdiv = document.createElement('div');

    // Assign id equalling to the document it will show
    boxdiv.setAttribute('id', href);
    boxdiv.className = className;
    boxdiv.style.position = 'absolute';
    boxdiv.style.width = width + 'px';
    boxdiv.style.height = height + 'px';

    var linksarr = links.split(';');
    var liobj;
    var anchorobj;
    for (var i = 0; i < linksarr.length; i = i + 2)
    {
        liobj = document.createElement('li');
        liobj.className = className;
        anchorobj = document.createElement('a');
        anchorobj.classname=className;
        anchorobj.href = linksarr[i];
        anchorobj.target = '_top';
        anchorobj.appendChild(
            document.createTextNode(linksarr[i + 1]));
        liobj.appendChild(anchorobj);
        boxdiv.appendChild(liobj);
    }

    document.body.appendChild(boxdiv);
    move_box(an, boxdiv);

    // The script has successfully shown the box,
    // prevent hyperlink navigation.
    return false;
}
//--></script>

• Create separate page(s) for graceful degradation when javascript is not available or the browser is really old and doesn't support DOM.
• Add hyperlinks leading to your separate pages. Add onclick handler to those hyperlinks. The handler should call show_hide_multilink function with five parameters.
• The first parameter should always be this.
• The second and the third are width and height of the box respectively.
• The fourth - style class name, which will be applied to all the elements of created DIV (The DIV itself, LI and A tags). Unless the BODY of your page has background set, specify background in this style class.
• The last one is a ;-separated list of URLs and anchor texts that should apppear.

For example:

<a href="multilinks_demo.html"
onclick="return show_hide_multilink(this,200,90,'multilink',
'http://a.com;Link1;http://b.com;Link2')">
Page history
</a>

• Be sure to verify page design with the Javascript turned off.

The javascript snippet above was tested on the following user agents:

Modern	Firefox 1.5	Ok.
	Firefox 1.0.x	Ok.
	Opera 8.01	Ok.
Steam age	Internet Explorer 6.0	Ok.
Ancient stuff	Netscape Navigator 4.79	Downgrades gracefully *.
No Javascript or Javascript turned off	Any	Downgrades gracefully *.

*: Graceful degradation means the user agent navigates to web page specified in href parameter of ANCHOR tag instead of showing dynamic menu. This web page can contain small menu on its own.

If you like our script, please rate it @ hotscripts.com!

Excellent!Very GoodGoodFairPoor