« »

Sometimes you want a single hyperlink to lead to several pages and present a dynamic JavaScript menu when clicked. This is usually done through an intermediary page. This JavaScript will provide a dynamic JavaScript menu by creating an absolutely-positioned DIV tag on the fly, which will contain the list of links.

Label: Multilinks

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style>
DIV.multilink {
  padding: 16px;
  background: #FFFFFF;
  border: 2px solid #2266AA;
}

LI.multilink {
  list-style-position: inside;
}
</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script>
/*
	Created by: www.jtricks.com 
	Web Site: 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 current
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>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<a href="www.javascriptbank.com" onclick="return show_hide_multilink(this,200,90,'multilink', '#;JavaScript Forum;#;The JavaScript Diaries')">
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->