ToweR-WeB - newjava

newjava

Kodları Denemek İçin Bu Bölümü Kullanın

Renk Kodları İçin Bu Bölümü Kullanın

Java - Menü Kodları

Sitene Sağ Tık Menüsü Kodu
 <html> <head> <meta http-equiv="Content-Language" content="en-us"> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>bbbb</title> <script language = "javascript"> var x,y; document.onclick = hide; function change_back(td_id) { document.getElementById(td_id).style.borderWidth ="0"; document.getElementById(td_id).style.backgroundColor = ""; //bgcolor } function change(td_id) { document.getElementById(td_id).style.backgroundColor = "#99B1E6"; //bgcolor document.getElementById(td_id).style.borderWidth ="1"; document.getElementById(td_id).style.borderColor = "#315FC8"; } function hide() { if (document.getElementById("Menu1").style.visibility == "visible") { if ((event.x < x-5) || (event.y < y-5) || (event.x > x+150) || (event.y > y+230)) document.getElementById("Menu1").style.visibility = "hidden"; } } document.oncontextmenu=function(){ x = event.offsetX; y = event.offsetY; x1 = event.x; y1 = event.y; window.setTimeout("click()",0); return false; } function click() { if (x1 > (screen.width - 165)) x = x - 165 if (y1 > (screen.height - 390)) y = y - 200 document.getElementById("Menu1").style.top=y; document.getElementById("Menu1").style.left=x; document.getElementById("Menu1").style.visibility = "visible"; } </script> </head> <body> <div Id="Menu1" style=" visibility:hidden; position: absolute; width: 153px; height: 236px; z-index: 1; border-style: outset; border-width: 1px; left: 27px; top: 34px; background-image: url('context_bg.gif')" > <table border="0" width="100%" id="table1" cellspacing="1" cellpadding="1"> <td id="td1" height="26" onclick="javascript:history.back(1);" style="color: #000000" mailto:yuxexes_ax@hotmail.com'" style="color: #000000" onmouseover='change("td5")' onmouseout='change_back("td5")' style="border-style: solid; border-width: 0px"> <img src="chart.gif" hspace="0" border=0 align="left"> Mail Me </td> </tr> <div style="position: absolute;top: 152px;width: 150px;"><hr size="1" width="83%" align="right"></div> <tr> <td id="td6" height="26" style="color: #000000" onmouseover='change("td6")' onmouseout='change_back("td6")' style="border-style: solid; border-width: 0px"> check2 </td> </tr> <tr> <td id="td7" height="26" style="color: #000000" onmouseover='change("td7")' onmouseout='change_back("td7")' style="border-style: solid; border-width: 0px"> check2 </td> </tr> <tr> <td id="td8" height="26" style="color: #000000" onmouseover='change("td8")' onmouseout='change_back("td8")' style="border-style: solid; border-width: 0px"> check2 </td> </tr> </table> </div> </body> <br><br><br>Right Click on this Page and you'll see a menu displayed!<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </html>

GüzeL Bir Açılır (Drop Down) Menü

/*======================================================================
  Javascript Menu 1.0
  Copyright (c) 2008 SCL Software (http://www.sclsoftware.com)
  You can use it freely as long as all copyright messages are intact.
======================================================================*/

if (typeof Scl == "undefined")
{
    var Scl = {};
}

(function()
{
    Scl.MenuItem = function(text, link, cssClass)
    {
        this.text = text;
        this.link = link;
        this.cssClass = cssClass;
    };

Scl.Menu = function(menuWidth)
	{
	    var instance = this;
	    var menuDiv;
	    var menuItems = new Array();
	    var dockElement;
	    var left = 0;
	    var top = 0;
	    var width = menuWidth ? menuWidth : 200;
	    var height = 0;
	    var hideThread;
	    var fullVisible = false;
	    var animationThread;
	    var animationStart = 0;
	    var animationEnd = 0;
	    var ANIMATION_NONE = 0;
	    var ANIMATION_VERTICAL = 1;
	    this.animationType = ANIMATION_VERTICAL;
	    this.animationSpeed = 10;
	    this.animationStep = 15;
	    this.margin = 10;
	    this.menuCssClass = 'menu';
	    this.menuItemCssClass = 'menuItem';
	    this.rightToLeft = false;
	    this.bottomToTop = false;
	    this.hideTimeOut = 120;

this.addItem = function(text, link, cssClass)
		{
		    menuItems.push(new Scl.MenuItem(text, link, cssClass));
		};

this.dockTo = function(element)
		{
	        addEvent(window, 'load', function(){ dockToElement(element); }, false);
		};

this.showAt = function(element)
		{
		    initialize();

var position = getPosition(element);
	        position.y += (instance.bottomToTop) ? (height + instance.margin) * -1 : instance.margin + element.offsetHeight;

show(position.x, position.y);
		};

this.showAtPosition = function(x, y)
		{
		    initialize();
		    show(x, y);
		};

this.hide = function()
		{
		    hideThread = setTimeout(hideMenu, instance.hideTimeOut);
		};

function dockToElement(element)
		{
		    if(typeof(element) == 'string')
            {
                element = document.getElementById(element);
            }

dockElement = element;
	        addEvent(element, 'mouseover', showAtDockElement, false);
	        addEvent(element, 'mouseout', instance.hide, false);
		};

function showAtDockElement()
		{
	        instance.showAt(dockElement);
		};

function initialize()
		{
		    if(menuDiv == null)
		    {
		        createMenu();
		    }
		};

function show(x, y)
		{
		    cancelHide();

menuDiv.style.left = x + 'px';
	        menuDiv.style.top = y + 'px';

// Asignar para la animacion
	        left = x;
	        top = y;

switch(instance.animationType)
	        {
	            case ANIMATION_NONE:
		            menuDiv.style.display = 'block';
		            break;

default:
		            startAnimation(0, height);
		            break;
	        }
		};

function createMenu()
	    {
            menuDiv = document.createElement('div');
            menuDiv.style.position = 'absolute';

var innerDiv = document.createElement('div');
            menuDiv.appendChild(innerDiv);

innerDiv.className = instance.menuCssClass;
            innerDiv.style.width = width + 'px';

addEvent(menuDiv, 'mouseover', cancelHide, false);
	        addEvent(menuDiv, 'mouseout', instance.hide, false);

// Add items
	        for(var i=0; i< menuItems.length; i++)
	        {
	            var menuItemDiv = createMenuItem(menuItems[i]);
                innerDiv.appendChild(menuItemDiv);
	        }

// Add to the document
            document.body.appendChild(menuDiv);

height = menuDiv.offsetHeight;
		};

function createMenuItem(menuItem)
	    {
            var menuItemDiv = document.createElement('div');
            menuItemDiv.className = menuItem.cssClass != null ? menuItem.cssClass : instance.menuItemCssClass;

if(menuItem.link != null)
            {
                menuItemDiv.link = menuItem.link; // Crear la propiedad con el link para cada elemento
                menuItemDiv.onclick = function(){ window.location = menuItem.link; };
                var link = document.createElement('a');
                link.setAttribute('href', menuItem.link);
                link.appendChild(document.createTextNode(menuItem.text));
                menuItemDiv.appendChild(link);
            }

return menuItemDiv;
		};

function cancelHide()
		{
		    clearTimeout(hideThread);
		    hideThread = null;
		};

function hideMenu()
		{
		    switch(instance.animationType)
	        {
	            case ANIMATION_NONE:
		            menuDiv.style.display = 'none';
		            break;

default:
		            startAnimation(parseStyle(menuDiv.style.height), 0);
		            break;
	        }
		};

function parseStyle(value)
		{
		    return parseInt(value.substring(0, value.length-2));
		};

function getPosition(element)
        {
            var posx = 0;
            var posy = 0;

if (element.offsetParent)
            {
                do
                {
                    posx += element.offsetLeft;
                    posy += element.offsetTop;

if (!element.offsetParent)
                    {
                         break;
                    }
                }
                while (element = element.offsetParent)
            }
            else if (element.x)
            {
                posx += element.x;
                posy += element.y;
            }

return {x:posx, y:posy};
        };

function startAnimation(start, end)
		{
            var showing = end > start;

if(showing & fullVisible)
		    {
		        return;
		    }

menuDiv.style.zIndex = showing ? 20 : 1;

animationStart = start;
		    animationEnd = end;
	        menuDiv.style.overflow = 'hidden';
		    menuDiv.style.display = 'block';
	        menuDiv.style.height = animationStart + 'px';

fullVisible = false;

clearInterval(animationThread);

switch(instance.animationType)
	        {
	            case ANIMATION_VERTICAL:
	                if(instance.bottomToTop)
                    {
	                    menuDiv.style.top = (top + height - menuDiv.offsetHeight) + 'px';
	                }
	                animationThread = setInterval(animateVertical, instance.animationSpeed);
		            break;
	        }
		};

function animateVertical()
        {
            var showing = animationEnd > animationStart;

var strHeight = menuDiv.style.height;
            var animationHeight = parseInt(strHeight.substring(0, strHeight.length-2));

if((showing & animationHeight >= animationEnd) || (!showing & animationHeight <= animationEnd))
            {
                clearInterval(animationThread);

if(showing)
		        {
		            fullVisible = true;
		        }
		        else
		        {
		            menuDiv.style.display = 'none';
		        }
            }
            else
            {
                animationHeight += showing ? instance.animationStep : -instance.animationStep;

if((showing & animationHeight > animationEnd) || (!showing & animationHeight < animationEnd))
                {
                    animationHeight = animationEnd;
                }

menuDiv.style.height = animationHeight + 'px';

if(instance.bottomToTop)
                {
                    menuDiv.style.top = (top + height - animationHeight) + 'px';
                }
            }
        };
	};
})();
</script>             <script type="text/javascript">
(function(){

var menu1=new Scl.Menu(130);
  menu1.addItem('Google Search','http://www.google.com');
  menu1.addItem('Yahoo Search','http://www.yahoo.com');
  menu1.addItem('MSN Live Search','http://www.live.com');
  menu1.addItem('Ask Search','http://www.ask.com');
  menu1.dockTo('demo1');

var menu2=new Scl.Menu(130);
  menu2.addItem('CNN News','http://www.cnn.com');
  menu2.addItem('Fox News','http://www.foxnews.com');
  menu2.addItem('BBC News','http://news.bbc.co.uk');
  menu2.addItem('abc News','http://abcnews.go.com');
  menu2.addItem('Google News','http://news.google.com');
  menu2.dockTo('demo2');

Hoşunuza Gidebilecek Bir Menü

/******************************************************
	Focus Slide
	version 1.0
	last revision: 12.17.2004
	steve@slayeroffice.com

Should you improve upon or
	modify this code, please let me know
	so that I can update the version hosted
	at slayeroffice.

PLEASE LEAVE THIS NOTICE INTACT!

******************************************************/

var d=document;		// shortcut reference to the document object
var activeLI = 0;		// the currently "active" list element - value represents its index in the liObj array
var zInterval = null;	// interval variable

var SLIDE_STEP = 8;	// how many pixels to move the sliding div at a time
var SLIDER_WIDTH = 74;	// the width of the sliding div. used to calculate
                        // its left based on the width and left of the active LI element

function init() {
	// bail out if this is an older browser or Opera which gets the offsets wrong
	// the opera issue is fixable by subtracting the container UL's width from the
  // offsetLefts...but I don't care enough to do it
	// this does NOT break opera, it just wont get the sliding thing

if(!document.getElementById || window.opera)return;

// create references to the LI's
	mObj = d.getElementById("mContainer");
	liObj = mObj.getElementsByTagName("li");

// set up the mouse over events
	for(i=0;i<liObj.length;i++) {
		liObj[i].xid = i;
		liObj[i].onmouseover = function() { initSlide(this.xid); }
	}

// create the slider object
	slideObj = mObj.appendChild(d.createElement("div"));
	slideObj.id = "slider";

// position the slider over the first LI
	x = liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 - SLIDER_WIDTH/3)-5;
	y = liObj[activeLI].offsetTop-3;
	slideObj.style.top = y + "px";
	slideObj.style.left = x + "px";
}

function initSlide(objIndex) {
	// return if the user is mousing over the currently active LI
	if(objIndex == activeLI)return;
	// clear the interval so we can start it over in a few lines to avoid doubling up on intervals
	clearInterval(zInterval);

// set the active list item to the object index argument
	activeLI = objIndex;
	// figure out the destination for the sliding div element
	destinationX = Math.floor(liObj[activeLI].offsetLeft + (liObj[activeLI].offsetWidth/3 - SLIDER_WIDTH/3))-5;
	// start the interval
	intervalMethod = function() { doSlide(destinationX); }
	zInterval = setInterval(intervalMethod,10);
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  init();
});
</script>             <style>             #mContainer {             position:relative;             margin:0 auto;             width:404px;             height:25px;             border-top:1px solid #638DA1;             border-bottom:1px solid #638DA1;             background-color:#F2F5F6;             padding:5px 0 0 0;             z-index:0;             }             #mContainer li {             position:relative;             display:inline;             margin:0 10px 0 12px;             font:0.8em arial,verdana;             padding:0;             z-index:20;             }             #mContainer li a {             text-decoration:none;             color:#638DA1;             }             #slider {             position:absolute;             background-color:	#98B4C1;             border:1px solid #78919B;             width:74px;             height:20px;             padding:0;             z-index:1;             }             </style>                          <ul id="mContainer">             <li><a href="#" _fcksavedurl="#" title="Item One">Item One</a></li>             <li><a href="#" _fcksavedurl="#" title="Item Two">Item Two</a></li>             <li><a href="#" _fcksavedurl="#" title="Item Three">Item Three</a></li>             <li><a href="#" _fcksavedurl="#" title="Item Four">Item Four</a></li>             <li><a href="#" _fcksavedurl="#" title="Item Five">Item Five</a></li>             </ul>

Sarı Renkli Yan Menü

var exp = 5;

function newCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  } else var expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameSG = name + "=";
  var nuller = '';
  if (document.cookie.indexOf(nameSG) == -1)
  return nuller;
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameSG) == 0) return c.substring(nameSG.length,c.length);
  }
  return null;
}

function eraseCookie(name) {
  newCookie(name,"",-1);
}

if (document.getElementById) {
  document.writeln('<style type="text/css">')
  document.writeln('.main {text-decoration:none; color:blue; cursor:hand; cursor:pointer}')
  document.writeln('span:hover.mainLink {text-decoration:underline; color:red}')
  document.writeln('.sublinks1 {display:none; padding-left:14px}')
  document.writeln('.link2 {text-decoration:none; color:blue}')
  document.writeln('a:hover.link2 {text-decoration:underline; color:red}')
  document.writeln('</style>') }

// Below you should add a1, a2 etc. for each main link you wish to include
    // so if you want 3 main links you should add a1, a2, a3 in the format shown
    // enclosed in double quotes
  var mainNum = new Array("a1","a2","a3");

// Below you should add b1, b2 etc. for each sub link you wish to include
    // under one main link, here the first main link. so if you want 4 sub links you
    // should add b1, b2, b3, b4 in the format shown enclosed in double quotes
  var subNum1 = new Array("b1","b2");

// Below, this is for sub links under the second main link. there are 3 sub links
    // in the given example
  var subNum2 = new Array("c1","c2","c3");

addLoadEvent(function() {
  memStatus();
});
</script>             <style>             .menu1 {             color:white;             background: #000;             font-family:arial, helvetica, sans-serif;             font-weight:bold;             font-size:12px;             }             .menu2 {             background: #ffff00;             color: blue;             font-family:arial, helvetica, sans-serif;             font-size:12px;             line-height: 19px;             }             </style>             <table border="0" width="130" bgcolor="#ffffff" cellpadding="2" cellspacing="0" style="background:#ffff00; color:#000000; border:#000000 1px solid">             <tr>             <td class="menu1">Collapsible Menu with Memory</td></tr>             <tr>             <td class="menu2">             <div onClick_fckprotectedatt="%20onClick%3D%22openClose('MN'%2CmainNum%2C'a1')%22" class="main"><span id="tick_a1">+</span> <span class="mainLink">Computing Links</span></div>             <div id="a1" class="sublinks1">                          <div onClick_fckprotectedatt="%20onClick%3D%22openClose('SB'%2CsubNum1%2C'b1')%22" class="main"><span id="tick_b1">+</span> <span class="mainLink">More Links</span></div>             <div id="b1" class="sublinks1">             <a href="http://www.thedomain.com/" _fcksavedurl="http://www.thedomain.com/" class="link2">Sub-Link 1</a><br />             <a href="http://www.thedomain.com/" _fcksavedurl="http://www.thedomain.com/" class="link2">Sub-Link 2</a><br />-------------<br />             </div>             <div onClick_fckprotectedatt="%20onClick%3D%22openClose('SB'%2CsubNum1%2C'b2')%22" class="main"><span id="tick_b2">+</span> <span class="mainLink">Few More Links</span></div>             <div id="b2" class="sublinks1">             <a href="http://www.thedomain.com/" _fcksavedurl="http://www.thedomain.com/" class="link2">Sub-Link 1</a><br />             <a href="http://www.thedomain.com" _fcksavedurl="http://www.thedomain.com" class="link2">Sub-Link 2</a><br />-------------<br />             </div>                          <a href="http://www.microsoft.com/" _fcksavedurl="http://www.microsoft.com/" class="link2">Microsoft Corp.</a><br />             <a href="http://home.netscape.com/" _fcksavedurl="http://home.netscape.com/" class="link2">Netscape Corp.</a><br />             <a href="http://www.macromedia.com" _fcksavedurl="http://www.macromedia.com" class="link2">Macromedia Inc.</a><br />             <a href="http://www.symantec.com" _fcksavedurl="http://www.symantec.com" class="link2">Symantec Corp.</a><br />------------------------<br />             </div>             <div onClick_fckprotectedatt="%20onClick%3D%22openClose('MN'%2CmainNum%2C'a2')%22" class="main"><span id="tick_a2">+</span> <span class="mainLink">JavaScript Links</span></div>             <div id="a2" class="sublinks1">                          <div onClick_fckprotectedatt="%20onClick%3D%22openClose('SB'%2CsubNum2%2C'c1')%22" class="main"><span id="tick_c1">+</span> <span class="mainLink">More Links</span></div>             <div id="c1" class="sublinks1">             <a href="http://www.thedomain.com/" _fcksavedurl="http://www.thedomain.com/" class="link2">Sub-Link 1</a><br />             <a href="http://www.thedomain.com/" _fcksavedurl="http://www.thedomain.com/" class="link2">Sub-Link 2</a><br />             <a href="http://www.thedomain.com/" _fcksavedurl="http://www.thedomain.com/" class="link2">Sub-Link 3</a><br />             <a href="http://www.thedomain.com/" _fcksavedurl="http://www.thedomain.com/" class="link2">Sub-Link 4</a><br />-------------<br />             </div>             <div onClick_fckprotectedatt="%20onClick%3D%22openClose('SB'%2CsubNum2%2C'c2')%22" class="main"><span id="tick_c2">+</span> <span class="mainLink">Few More Links</span></div>             <div id="c2" class="sublinks1">             <a href="http://www.thedomain.com/" _fcksavedurl="http://www.thedomain.com/" class="link2">Sub-Link 1</a><br />             <a href="http://www.thedomain.com/" _fcksavedurl="http://www.thedomain.com/" class="link2">Sub-Link 2</a><br />-------------<br />             </div>             <div onClick_fckprotectedatt="%20onClick%3D%22openClose('SB'%2CsubNum2%2C'c3')%22" class="main"><span id="tick_c3">+</span> <span class="mainLink">Even More Links</span></div>             <div id="c3" class="sublinks1">             <a href="http://www.thedomain.com/" _fcksavedurl="http://www.thedomain.com/" class="link2">Sub-Link 1</a><br />             <a href="http://www.thedomain.com/" _fcksavedurl="http://www.thedomain.com/" class="link2">Sub-Link 2</a><br />             <a href="http://www.thedomain.com/" _fcksavedurl="http://www.thedomain.com/" class="link2">Sub-Link 3</a><br />-------------<br />             </div>                          <a href="http://www.sivamdesign.com/scripts/" _fcksavedurl="http://www.sivamdesign.com/scripts/" class="link">The JS Page</a><br />             <a href="http://javascript.internet.com/" _fcksavedurl="http://javascript.internet.com/" class="link2">JavaScript Source</a><br />             <a href="http://www.docjs.com/" _fcksavedurl="http://www.docjs.com/" class="link">Doc JavaScript</a><br />------------------------<br />             </div>             <div onClick_fckprotectedatt="%20onClick%3D%22openClose('MN'%2CmainNum%2C'a3')%22" class="main"><span id="tick_a3">+</span> <span class="mainLink">PHP Links</span></div>             <div id="a3" class="sublinks1">             <a href="http://php.resourceindex.com/Complete_Scripts/" _fcksavedurl="http://php.resourceindex.com/Complete_Scripts/" class="link2">PHP Res. Index</a><br />             <a href="http://px.sklar.com/" _fcksavedurl="http://px.sklar.com/" class="link2">PHP Code Excng.</a><br />------------------------<br />             </div>             <div>             <a href="#" _fcksavedurl="#" class="link">Another Link 1</a><br />             <a href="#" _fcksavedurl="#" class="link">Another Link 2</a><br />             <a href="#" _fcksavedurl="#" class="link">Another Link 3</a><br />             </div>             </td></tr>             </table>             <!--
  Each collapsible link has 2 DIV tags, one is the main link that opens or closes the collapsible
  links and the other is for the collapsible links. In the first DIV tag the text
  [onClick="openClose('MN',mainNum,'a1')" class="main"] should not be changed and in the second DIV tag
  the text [id="a1" class="sublinks"] is required. As you add more collapsible links the identifier
  'a1' should be incremented for all new links in both DIV tags, for example a2 for link 2, a3 for
  link 3 etc. Also for each collapsible link there is a SPAN tag that changes the + sign to - when
  the menu is expanded. For each SPAN tag also there is text (id="tick_a1"). This identifier
  also needs to be changed by matching the identifier 'a1' to the DIV identifier.

Each group of sub-links under each main link also should have text [openClose('SB',subNum1,'b1')"
  class="main"]. The text [subNum1] should also be incremented with each main link. For
  example for the main link a1, the sub-links should be ['SB',subNum1,'b1'], ['SB',subNum1,'b2'] etc.
  and for main link a2, the sub-link should be ['SB',subNum2,'c1'], ['SB',subNum2,'c2'] etc.

Everything else can be modified as per your requirements. Lastly, you can get rid of these comments in
  your documents.
-->

Linklerin Üzerine Gelindiğinde Eklediğiniz Diğer Linkleri Gösteren Java Uygulaması

&lt;style&gt;             &lt;!--             .menuskin{             position:absolute;             width:165px;             background-color:menu;             border:2px solid black;             font:normal 12px Verdana;             line-height:18px;             z-index:100;             visibility:hidden;             }             .menuskin a{             text-decoration:none;             color:black;             padding-left:10px;             padding-right:10px;             }             #mouseoverstyle{             background-color:highlight;             }             #mouseoverstyle a{             color:white;             }             --&gt;             &lt;/style&gt;             &lt;script language="JavaScript1.2"&gt;             //Pop-it menu- By Dynamic Drive             //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com             //This credit MUST stay intact for use             var linkset=new Array()             //SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT             linkset[0]=''&lt;div class="menuitems"&gt;&lt;a href="http://dynamicdrive.com"&gt;Dynamic Drive&lt;/a&gt;&lt;/div&gt;''             linkset[0]+=''&lt;hr&gt;'' //Optional Separator             linkset[0]+=''&lt;div class="menuitems"&gt;&lt;a href="http://javascriptkit.com"&gt;JavaScript Kit&lt;/a&gt;&lt;/div&gt;''             linkset[0]+=''&lt;div class="menuitems"&gt;&lt;a href="http://freewarejava.com"&gt;Freewarejava&lt;/a&gt;&lt;/div&gt;''             linkset[1]=''&lt;div class="menuitems"&gt;&lt;a href="http://msnbc.com"&gt;MSNBC&lt;/a&gt;&lt;/div&gt;''             linkset[1]+=''&lt;div class="menuitems"&gt;&lt;a href="http://cnn.com"&gt;CNN&lt;/a&gt;&lt;/div&gt;''             linkset[1]+=''&lt;div class="menuitems"&gt;&lt;a href="http://abcnews.com"&gt;ABC News&lt;/a&gt;&lt;/div&gt;''             linkset[1]+=''&lt;hr&gt;'' //Optional Separator             linkset[1]+=''&lt;div class="menuitems"&gt;&lt;a href="http://www.washingtonpost.com"&gt;Washington Post&lt;/a&gt;&lt;/div&gt;''             ////No need to edit beyond here             var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1             var ns6=document.getElementById&&!document.all             var ns4=document.layers             function showmenu(e,which){             if (!document.all&&!document.getElementById&&!document.layers)             return             clearhidemenu()             menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : ""             menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj             if (ie4||ns6)             menuobj.innerHTML=which             else{             menuobj.document.write(''&lt;layer name=gui bgColor=#E6E6E6 width=165 onmouseover="clearhidemenu()" onmouseout="hidemenu()"&gt;''+which+''&lt;/layer&gt;'')             menuobj.document.close()             }             menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width             menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height             eventX=ie4? event.clientX : ns6? e.clientX : e.x             eventY=ie4? event.clientY : ns6? e.clientY : e.y             //Find out how close the mouse is to the corner of the window             var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX             var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY             //if the horizontal distance isn''t enough to accomodate the width of the context menu             if (rightedge&lt;menuobj.contentwidth)             //move the horizontal position of the menu to the left by it''s width             menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth             else             //position the horizontal position of the menu where the mouse was clicked             menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX : ns6? window.pageXOffset+eventX : eventX             //same concept with the vertical position             if (bottomedge&lt;menuobj.contentheight)             menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight : ns6? window.pageYOffset+eventY-menuobj.contentheight : eventY-menuobj.contentheight             else             menuobj.thestyle.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY             menuobj.thestyle.visibility="visible"             return false             }             function contains_ns6(a, b) {             //Determines if 1 element in contained in another- by Brainjar.com             while (b.parentNode)             if ((b = b.parentNode) == a)             return true;             return false;             }             function hidemenu(){             if (window.menuobj)             menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide"             }             function dynamichide(e){             if (ie4&&!menuobj.contains(e.toElement))             hidemenu()             else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))             hidemenu()             }             function delayhidemenu(){             if (ie4||ns6||ns4)             delayhide=setTimeout("hidemenu()",500)             }             function clearhidemenu(){             if (window.delayhide)             clearTimeout(delayhide)             }             function highlightmenu(e,state){             if (document.all)             source_el=event.srcElement             else if (document.getElementById)             source_el=e.target             if (source_el.className=="menuitems"){             source_el.id=(state=="on")? "mouseoverstyle" : ""             }             else{             while(source_el.id!="popmenu"){             source_el=document.getElementById? source_el.parentNode : source_el.parentElement             if (source_el.className=="menuitems"){             source_el.id=(state=="on")? "mouseoverstyle" : ""             }             }             }             }             if (ie4||ns6)             document.onclick=hidemenu             &lt;/script&gt;             &lt;div id="popmenu" class="menuskin" onMouseover="clearhidemenu();highlightmenu(event,''on'')" onMouseout="highlightmenu(event,''off'');dynamichide(event)"&gt;             &lt;/div&gt;             &lt;a href="#" onMouseover="showmenu(event,linkset[0])" onMouseout="delayhidemenu()"&gt;Webmaster Links&lt;/a&gt;&lt;br&gt;             &lt;a href="#" onMouseover="showmenu(event,linkset[1])" onMouseout="delayhidemenu()"&gt;News sites&lt;/a&gt;             &lt;p align="center"&gt;&lt;font face="Arial" size="-2"&gt;Free DHTML scripts provided by&lt;br&gt;             &lt;a href="http://www.dynamicdrive.com"&gt;Dynamic Drive&lt;/a&gt;&lt;/font&gt;&lt;/p&gt;