»
EnglishFrenchVietnamese

Print - Multilinks - JavaScriptBank.com

Full version: jsB@nk » Link » Multilinks
URL: http://www.javascriptbank.com/multilinks.html

Multilinks © JavaScriptBank.comSometimes 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.

Full version: jsB@nk » Link » Multilinks
URL: http://www.javascriptbank.com/multilinks.html



CSS
<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-->


JavaScript
<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 currentfunction 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-->


HTML
<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-->