KASTELEKOM

www.kastelekom.com Dünya' ya Açılan Pencereniz...

JAVA UYGULAMALARI

Arkaplan Efektleri

Buton Scriptleri

Link Scriptleri

Mouse Scriptleri

Saat Scriptleri

Yazı Efektleri

Browser Efektleri

Gerekliler

Menü Scriptleri

Resim Efektleri

Statusbar Efektleri

Diğer Scriptler

RENK KODLARI

Renk Kodları -1-

Renk Kodları -2-

MENÜ -6-

1 2 3 4 5 6 7 8 9

Renkli güzel bir menü orneği

<style type="text/css">

#dhtmlgoodies_menu{	/* Menu object */
		margin:0px;
		padding:0px;
		width:150px;	/* Width of menu */
	}
	#dhtmlgoodies_menu li{
		margin-top:2px;	/* Space between each menu item */
		
		
		/* Don't change these four values */
		list-style-type:none;				
		clear:both;
		display:block;	
		overflow:auto;
	}
	
	#dhtmlgoodies_menu li a{	/* Text rules for the menu items */
		color:#000;	/* Black text color */
		text-decoration:none;	/* No underline */
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */
		letter-spacing:1px;	/* Extra space between each letter of the menu items */
		font-size:0.7em;	/* Fixed font size */
		font-weight:bold;	/* Bold font */
		float:left;
		background-color:#F1F1F1;
		padding-left:3px;
		line-height:25px;	/* Height of menu links */

}
	#dhtmlgoodies_menu li div{
		float:left;

}
	</style>
	
	<script type="text/javascript" src="color_functions.js"></script>
	<SCRIPT type="text/javascript">
	/************************************************************************************************************
	(C) www.dhtmlgoodies.com, October 2005
	
	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	Terms of use:
	You are free to use this script as long as the copyright message is kept intact. However, you may not
	redistribute, sell or repost it without our permission.
	
	Thank you!
	
	www.dhtmlgoodies.com
	Alf Magne Kalleland
	
	************************************************************************************************************/
	
	/*
	
	HOW TO DEAL WITH THE ARRAYS BELOW
	
	You can have more than one color in your menu. You define which color a menu item belongs to by specifying a class for the <a> tag
	Example: <a class="menuGroup1"> which means that this element uses color number 2 (0 = first color). btw: You don't have to specify
	<a class="menugroup0"> if a menu item uses the first color. This color is the default choice if nothing else is defined.
	
	*/
	
	var initActiveMenuItem = -1; // 	If one of the menu items should be initially highlighted.(-1 = none, 0 = first item, 1 = second...)
	var activeSmallSquareColor = ['#D60808','#08D608']; // Color of small square at the left of each menu item - only one item in the array if you only have one color
	var colorSquareWidth = 2; 	// Width of small square;
	var marginSquare = 1;
	
	
	var bgColorLinks = ["#E2EBED",'#EDE3E3'];	// Background color for menu links - one element for each menu color
	var degreesToDarkenOrLighten = [15,15]; // How many percent point to darken/lighten,or change saturation of the color above on mouse over (10-15 percent point is usually enough).
	var changeBrightnessOrSaturation = ['saturation','saturation'];	// Possible values: "saturation" and "brightness" - which one to adjust on mouseover
	
	var textColorMenuItems = ['#000000','#000000'];	/* Text color of links - one array item for each group of colors */
	/*
	You can use the color schemer at www.dhtmlgoodies.com to find your colors
	
	We use the HSB color system here, The HSB color system is based on three values
	
	* Hue = Which color, i.e. degree on color wheel
	* Saturation = Intensity of the color to use
	* Brightness = Brightness of the color
	
	
	When you use the color schemer at the site, pick a color from the palett or type it into the RGB text box(format #RRGGBB, example #E2EBED)
	Then adjust the value of brightness by typing in a new value in that text box(label "B"). 
	
	*/
	
	
	var darkenOnMouseOver = [false,false];	// Darken or Lighten on mouse over (true = darken, false = lighten) 
											// One element for each menu color. 
											// (Or more or less saturation if that is chosen in changeBrightnessOrSaturation

}
	
	function hideMenuItem()
	{
		if(this.getAttribute('initActive')=='1')return;
		if(this.initActive=='1')return;
		var obj = this.parentNode.getElementsByTagName('DIV')[0];
		obj.setAttribute('okToHide','1');
		obj.okToHide = 1;
		this.setAttribute('okToHide','1');
		this.okToHide = 1;
		obj.style.visibility = 'visible';		
		if(navigator.userAgent.indexOf('Opera')>=0){
			obj.style.visibility = 'hidden';
		}else{
			progressHideSquare(obj.id,(opacityChangePerStep*-1));	
		}		
		progressShowHideBgColor(this.id);	
	}
	
	
	function progressShowHideBgColor(inputId)
	{
		
		var obj = document.getElementById(inputId);
		var currentBgColor = obj.getAttribute('currentBgColorItem');
		if(obj.getAttribute('okToHide')=='0')return;
		if(!currentBgColor)currentBgColor = obj.currentBgColorItem;
		if(currentBgColor){
			var index = obj.className.replace(/[^\d]/g,'');
			var hsb = toHSV(currentBgColor);
			if(changeBrightnessOrSaturation[index]=='saturation'){
				var saturation = hsb[1];			
				saturation+=darkenBrightnessCounter[index];
				if((saturation>saturationLink[index] && darkenOnMouseOver[index]) || (saturation<saturationLink[index] && !darkenOnMouseOver[index]))saturation = saturationLink[index];
				var rgb = toRgb(startHue[index],saturation,startBri[index]);	
				
				obj.style.backgroundColor = rgb;
				obj.currentBgColorItem = rgb;
				obj.setAttribute('currentBgColorItem',rgb);		
				if((hsb[1]<saturation && darkenOnMouseOver[index]) || (hsb[1]>saturation && !darkenOnMouseOver[index])){
					setTimeout('progressShowHideBgColor(\'' + inputId + '\')',timeStepSwitchBgColor);				
				}else{
					var index = obj.className.replace(/[^\d]/g,'');				
					obj.style.backgroundColor = bgColorLinks[index];
				}
										
			}else{
				var brightness = hsb[2];			
				brightness+=darkenBrightnessCounter[index];
				if((brightness>brightnessLink[index] && darkenOnMouseOver[index]) || (brightness<brightnessLink[index] && !darkenOnMouseOver[index]))brightness = brightnessLink[index];
				var rgb = toRgb(startHue[index],startSat[index],brightness);
				obj.style.backgroundColor = rgb;
				obj.currentBgColorItem = rgb;
				obj.setAttribute('currentBgColorItem',rgb);		
				if((hsb[2]<brightness && darkenOnMouseOver[index]) || (hsb[2]>brightness && !darkenOnMouseOver[index])){
					setTimeout('progressShowHideBgColor(\'' + inputId + '\')',timeStepSwitchBgColor);				
				}else{
					var index = obj.className.replace(/[^\d]/g,'');				
					obj.style.backgroundColor = bgColorLinks[index];
				}
							
			}

}			
	}	
	
	function progressHideSquare(inputId,step)
	{
		
		var obj = document.getElementById(inputId);

if(obj.getAttribute('okToHide')=='0' && step<0)return;
				
		if(document.all){
			var currentOpacity = obj.style.filter.replace(/[^\d]/g,'')/1;

if(currentOpacity>=99){

}
			else if(currentOpacity==11){
				obj.style.visibility='hidden';
			}else{
				currentOpacity = currentOpacity + step;
				if(currentOpacity<1)currentOpacity=1;
				if(currentOpacity>99)currentOpacity=9;
				obj.style.filter = 'alpha(opacity=' + currentOpacity + ')';
				setTimeout('progressHideSquare("' + inputId + '",' + (step) + ')',timeStepOpacitySquare);
			}				
		}else{
			step = step / 100;
			var currentOpacity = obj.style.opacity/1;

if(currentOpacity>=0.99){

}
			else if(currentOpacity==0.01){
				obj.style.visibility='hidden';
			}else{
				currentOpacity = currentOpacity + step;

if(currentOpacity<0.01)currentOpacity=0.01;
				if(currentOpacity>0.99)currentOpacity=0.99;
				obj.style.opacity = currentOpacity;
				setTimeout('progressHideSquare("' + inputId + '",' + (step*100) + ')',timeStepOpacitySquare);
			}	
		}		
	}
	
	
	function dhtmlgoodies_initMenu()
	{
		menuObj = document.getElementById('dhtmlgoodies_menu');
		for(var no=0;no<bgColorLinks.length;no++){
			var hsbArray = toHSV(bgColorLinks[no]);
			brightnessLink.push(hsbArray[2]);
			saturationLink.push(hsbArray[1]);
			startHue.push(hsbArray[0]);
			startSat.push(hsbArray[1]);
			startBri.push(hsbArray[2]);
			if(darkenOnMouseOver[no]){
				brightnessLinkMin.push(Math.max(hsbArray[2] - (degreesToDarkenOrLighten[no]/100),0));
				saturationLinkMin.push(Math.max(hsbArray[1] - (degreesToDarkenOrLighten[no]/100),0));
				darkenBrightnessCounter.push(bgColorStep[no]/100);
			}else{
				brightnessLinkMin.push(Math.min(hsbArray[2] + (degreesToDarkenOrLighten[no]/100),1));
				saturationLinkMin.push(Math.min(hsbArray[1] + (degreesToDarkenOrLighten[no]/100),1));
				darkenBrightnessCounter.push((bgColorStep[no]/100)*-1);
			}
		}
		var listItems = menuObj.getElementsByTagName('LI');
		for(var no=0;no<listItems.length;no++){
			
	
			var menuLink = listItems[no].getElementsByTagName('A')[0];
			if(menuLink){
				if(!menuLink.className)menuLink.className = 'menuGroup0';
				var groupIndex = menuLink.className.replace(/[^\d]/g,'');
				listItems[no].id = 'listItem' + no;	
				var height = menuLink.offsetHeight;	
				menuLink.style.display='block';
				menuLink.style.height=height + 'px';
				menuLink.style.lineHeight=height + 'px';
				menuLink.onmouseover = showMenuItem;		
				menuLink.onmouseout = hideMenuItem;		
				menuLink.style.backgroundColor = bgColorLinks[groupIndex];
				menuLink.setAttribute('bgColorItem',bgColorLinks[groupIndex]);
				menuLink.bgColorItem = bgColorLinks[groupIndex];
				menuLink.setAttribute('currentBgColorItem',bgColorLinks[groupIndex]);
				menuLink.currentBgColorItem = bgColorLinks[groupIndex];
				menuLink.id = 'listLink' + no;
				menuLink.style.color = textColorMenuItems[groupIndex];
				
				
				var colorDiv = document.createElement('DIV');
				colorDiv.innerHTML = '<\/span>';
				colorDiv.style.height = height + 'px';
				colorDiv.style.width = colorSquareWidth + 'px';
				colorDiv.style.backgroundColor = activeSmallSquareColor[groupIndex];
				colorDiv.style.marginRight = marginSquare + 'px';
				colorDiv.style.visibility = 'hidden'			
				colorDiv.id = 'colorSquare' + no;
				colorDiv.style.opacity = 0.99;	// Not possible to use 1 because of JS flickering in Firefox
				colorDiv.style.filter = 'alpha(opacity=100)';
				
				if(initActiveMenuItem==no){
					colorDiv.style.visibility = 'visible';
					if(changeBrightnessOrSaturation[groupIndex]=='saturation'){
						menuLink.style.backgroundColor = toRgb(startHue[groupIndex],saturationLinkMin[groupIndex],startBri[groupIndex]);
					}else{
						menuLink.style.backgroundColor = toRgb(startHue[groupIndex],startSat[groupIndex],brightnessLinkMin[groupIndex]);
					}
					menuLink.initActive = '1';
					menuLink.setAttribute('initActive','1');
					
				}
				
				listItems[no].appendChild(colorDiv);			
				listItems[no].appendChild(menuLink);
	
				var clearDiv = document.createElement('DIV');
				clearDiv.style.clear='both';
				listItems[no].appendChild(clearDiv);
							
				var currentWidth = (listItems[no].offsetWidth - colorDiv.offsetWidth - marginSquare);
				menuLink.style.width = currentWidth + 'px';
				while(listItems[no].offsetHeight>=(menuLink.offsetHeight*2)){		
					currentWidth--;	
					menuLink.style.width = currentWidth + 'px';
					
				}
			}
		}		
	}
	window.onload = dhtmlgoodies_initMenu;
	
	</script>

<ul id="dhtmlgoodies_menu">
			<li><a href="http://www.gezginler.net">Link 1</a></li>
			<li><a href="http://www.gezginler.net">Link 2</a></li>
			<li><a href="http://www.gezginler.net">Link 3</a></li>
			<li><a href="http://www.gezginler.net">Link 4</a></li>
			<li><a href="http://www.gezginler.net">Link 5</a></li>
			<li><a class="menuGroup1" href="http://www.gezginler.net">Link 6</a></li>
			<li><a class="menuGroup1" href="http://www.gezginler.net">Link 7</a></li>	
			<li><a class="menuGroup1" href="http://www.gezginler.net">Link 8</a></li>
			<li><a class="menuGroup1" href="http://www.gezginler.net">Link 9</a></li>

</ul>
		
<script language="JavaScript">
/******(C) www.dhtmlgoodies.com***************************/

// Converts a RGB color to HSV
function toHSV(rgbColor){
rgbColor = rgbColor.replace('#','');

red = numberBaseConverter(rgbColor.substr(0,2),16,10);
green = numberBaseConverter(rgbColor.substr(2,2),16,10);
blue = numberBaseConverter(rgbColor.substr(4,2),16,10);
if(red.length==0)red=0;
if(green.length==0)green=0;
if(blue.length==0)blue=0;
red = red/255;
green = green/255;
blue = blue/255;

maxValue = Math.max(red,green,blue);
minValue = Math.min(red,green,blue);

var hue = 0;

if(maxValue==minValue){
hue = 0;
saturation=0;
}else{
if(red == maxValue){
hue = (green - blue) / (maxValue-minValue)/1;
}else if(green == maxValue){
hue = 2 + (blue - red)/1 / (maxValue-minValue)/1;
}else if(blue == maxValue){
hue = 4 + (red - green) / (maxValue-minValue)/1;
}
saturation = (maxValue-minValue) / maxValue;
}
hue = hue * 60; 
valueBrightness = maxValue;

if(valueBrightness/1<0.5){
//saturation = (maxValue - minValue) / (maxValue + minValue);
}
if(valueBrightness/1>= 0.5){
//saturation = (maxValue - minValue) / (2 - maxValue - minValue);
}

returnArray = [hue,saturation,valueBrightness];
return returnArray;
}

function toRgb(hue,saturation,valueBrightness){
Hi = Math.floor(hue / 60);
if(hue==360)Hi=0;
f = hue/60 - Hi;
p = (valueBrightness * (1- saturation)).toPrecision(2);
q = (valueBrightness * (1 - (f * saturation))).toPrecision(2);
t = (valueBrightness * (1 - ((1-f)*saturation))).toPrecision(2);

switch(Hi){
case 0:
red = valueBrightness;
green = t;
blue = p;
break;
case 1: 
red = q;
green = valueBrightness;
blue = p;
break;
case 2: 
red = q;
green = valueBrightness;
blue = t;
break;
case 3: 
red = p;
green = q;;
blue = valueBrightness;
break;
case 4:
red = t;
green = p;
blue = valueBrightness;
break;
case 5:
red = valueBrightness;
green = p;
blue = q;
break;
}

if(saturation==0){
red = valueBrightness;
green = valueBrightness;
blue = valueBrightness;
}

red*=255;
green*=255;
blue*=255;

red = Math.round(red);
green = Math.round(green);
blue = Math.round(blue);

red = numberBaseConverter(red,10,16);
green = numberBaseConverter(green,10,16);
blue = numberBaseConverter(blue,10,16);

red = red + "";
green = green + "";
blue = blue + "";

while(red.length<2){
red = "0" + red;
}
while(green.length<2){
green = "0" + green;
}
while(blue.length<2){
blue = "0" + "" + blue;
}
rgbColor = "#" + red + "" + green + "" + blue;
return rgbColor.toUpperCase();
}

function findColorByDegrees(rgbColor,degrees){
rgbColor = rgbColor.replace('#','');
myArray = toHSV(rgbColor);
myArray[0]+=degrees;
if(myArray[0]>=360)myArray[0]-=360;
if(myArray[0]<0)myArray[0]+=360;
return toRgb(myArray[0],myArray[1],myArray[2]);
}

function findColorByBrightness(rgbColor,brightness){

rgbColor = rgbColor.replace('#','');
myArray = toHSV(rgbColor);

myArray[2]+=brightness/100;
if(myArray[2]>1)myArray[2]=1;
if(myArray[2]<0)myArray[2]=0;

myArray[1]+=brightness/100;
if(myArray[1]>1)myArray[1]=1;
if(myArray[1]<0)myArray[1]=0;

return toRgb(myArray[0],myArray[1],myArray[2]);

}</script>

Mouse imleci bir linkin üzerine geldiği zaman ok, o linki işaret eder.

<head>
<style>
.item{
font-size:12px;
font-family:Arial;

}
.item a{
text-decoration:none;
}
.item a:hover{
background-color:none;
font-weight:bold;
}
</style>
</HEAD>
<BODY>
<script language="JavaScript1.2">
//free JavaScript examples on http://www.ScriptBreaker.com
var Link = [
["Link 1","http://www.gezginler.net","_blank"],
["Link 2","http://www.gezginler.net","_blank"],
["Link 3","http://www.gezginler.net","_blank"],
["Link 4","http://www.gezginler.net","_blank"],
["Link 5","http://www.gezginler.net","_blank"],
["Link 6","http://www.gezginler.net","_blank"],
["Link 7","http://www.gezginler.net","_blank"],
["Link 8","http://www.gezginler.net","_blank"],
["Link 9","http://www.gezginler.net","_blank"]
];

var prop=[
10, // space between the border and the items
2, // border width
"#000066", // border color                                           
"solid", // border style
100 // width of the items
]

var IE = document.all?true:false

if (!IE) document.captureEvents(Event.MOUSEMOVE)

document.onmousemove = getMouseXY;

var tempX = 0
var tempY = 0

function getMouseXY(e) {
  if (IE) {
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
  } else {
    tempX = e.pageX
    tempY = e.pageY
  }

if (tempX < 0){tempX = 0}
 if (tempY < 0){tempY = 0}
 objp.style.top = tempY-6
 return true
}

function create_menu(id,larr,parr)
{
document.write("<table >");
document.write("<tr><td class='item' onmouseover=\"objp.style.visibility ='visible';\" onmouseout=\"objp.style.visibility ='hidden';\" style='padding:0px "+parr[0]+"px 0px 0px;border-right:"+prop[1]+"px "+prop[3]+" "+prop[2]+";width:"+prop[4]+";text-align:right;'>");
for(i=0;i<larr.length;i++)
{
 document.write("<a href='"+larr[i][1]+"' target='"+larr[i][2]+"'>"+larr[i][0]+"</a> ");
}
document.write("</td></tr></table>")
}
document.write("<div style='position:absolute;top:0;visibility:hidden;left:130;' id=pointer><img src='bpointer.gif'></div>");

var objp = document.getElementById("pointer")
</script>
<script language="JavaScript">
create_menu("scriptbreaker",Link,prop);
</script>

Sayfanın herhangi bir yerinde sol tıklandığında açılan menü

<style type="text/css">
.menuFront {
	position: absolute;
	visibility: hidden;
	top: 0px;
	left: 0px;
	background-color: #C0C0C0;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #000000;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #000000;
	margin: 1px;
	cursor: default;
	z-index: 11;
}

.menuBack {
	position: absolute;
	visibility: hidden;
	top: 0px;
	left: 0px;
	background-color: #C0C0C0;
	border-right: 1px solid #000000;
	border-bottom: 1px solid #000000;
	z-index: 10;
}

.item {
	position: absolute;
	visibility: inherit;
	color: #000000;
	font-size: 9pt;
	font-family: Arial, sans-serif;
	font-weight: bold;
	left: 1px;
	height: 15px;
	padding-left : 5px;
	z-index: 11;
}

.itemSep {
	position: absolute;
	visibility: inherit;
	left: 1px;
	height: 7px;
	padding-left: 5px;
	padding-right: 5px;
	z-index: 11;
}

.sep {
	position: absolute;
	color: #FFFFFF;
	width: 100%;
	height: 1px;
	z-index: 11;
}

.arrow {
	position: absolute;
	font-size: 9pt;
	font-family: Marlett, sans-serif;
	font-weight: normal;
	margin-top: 2px;
	z-index: 11;
}

</style>
<script language="JavaScript1.2">
/*
Left Click 1.1 by Toh Zhiqiang
Homepage: http://www.tohzhiqiang.f2s.com/leftclick/index.php
Email: webmaster@tohzhiqiang.com
*/

var widthMax;
var heightMax;
var xCoor;
var yCoor;
var sWidth;
var sHeight;
var xScroll;
var widthScroll;

var menu = new Array;
var divId = new Array;

function rightClick()
{
  document.oncontextmenu = show;
  document.onclick = hideMenus;
}

function menuItem()
{
  this.item = arguments[0];
  this.hasSubMenu = arguments[1];
  this.level = arguments[2];
  this.subMenuFront = arguments[3];
  this.subMenuBack = arguments[4];
  this.subMenuOffset = arguments[5];
  this.link = arguments[6];
}

function findMenuLevel(parentId)
{
 for (i = 0; i < divId.length; i = i + 2)
 {
 if (divId[i] == (parentId + "Front"))
 {
 return divId[i + 1];
 break;
 }
 }
}

function hideMenus()
{
 for (i = 0; i < divId.length; i = i + 2)
 {
 var menuLayer = document.getElementById(divId[i]);
 menuLayer.style.visibility = "hidden";
 }
}

function popUpPos()
{
  var menuFront = document.getElementById(divId[0]);
  var menuBack = document.getElementById(divId[2]);
  widthMax = document.body.clientWidth;
  heightMax = document.body.clientHeight;
  xCoor = window.event.x;
  yCoor = window.event.y;
  sWidth = menuFront.style.posWidth;
  sHeight = menuFront.style.posHeight;
  xScroll = document.body.scrollTop;
  widthScroll = document.body.offsetWidth - widthMax;
  xWidth = xCoor + sWidth;
  yHeight = yCoor + sHeight;

if (menuFront.style.visibility == "hidden")
 {
 if (yHeight < (heightMax - 1))
 {
 menuFront.style.posTop = yCoor + xScroll;
 menuBack.style.posTop = yCoor + xScroll;
 }
 else
 {
 if (yCoor < sHeight)
 {
 menuFront.style.posTop = xScroll;
 menuBack.style.posTop = xScroll; 
 }
 else
 {
 menuFront.style.posTop = yCoor - sHeight + xScroll - 2;
 menuBack.style.posTop = yCoor - sHeight + xScroll - 2;
 if ((menuFront.style.posTop + menuFront.style.posHeight - xScroll + 2) > heightMax)
 {
 menuFront.style.posTop = heightMax - menuFront.style.posHeight + xScroll - 2;
 menuBack.style.posTop = heightMax - menuFront.style.posHeight + xScroll - 2;
 }
 }
 }

if (xWidth < widthMax - 1)
 {
 menuFront.style.posLeft = xCoor;
 menuBack.style.posLeft = xCoor;
 }
 else
 {
 if (xCoor == (widthMax + 1))
 {
 menuFront.style.posLeft = xCoor - sWidth - 3;
 menuBack.style.posLeft = xCoor - sWidth - 3;
 }
 else
 {
 if (widthMax < xCoor)
 {
 menuFront.style.posLeft = xCoor - sWidth - widthScroll - 1;
 menuBack.style.posLeft = xCoor - sWidth - widthScroll - 1;
 }
 else
 {
 menuFront.style.posLeft = xCoor - sWidth - 2;
 menuBack.style.posLeft = xCoor - sWidth - 2;
 }
 }
 }
 }
}

function popUpSubPos(xCoor, yCoor, subMenuFront, subMenuBack, offset)
{ 
  var menuFront = document.getElementById(divId[offset]);
  var menuBack = document.getElementById(divId[offset + 2]);
  widthMax = document.body.clientWidth;
  heightMax = document.body.clientHeight;
  sWidth = subMenuFront.style.posWidth;
  sHeight = subMenuFront.style.posHeight;
  xScroll = document.body.scrollTop;
  widthScroll = document.body.offsetWidth - document.body.clientWidth;
  xWidth = xCoor + sWidth;
  yHeight = yCoor + sHeight;

if (subMenuFront.style.visibility == "hidden")
 {
 if ((yHeight - xScroll) < (heightMax - 1))
 {
 subMenuFront.style.posTop = yCoor;
 subMenuBack.style.posTop = yCoor;
 }
 else
 {
 subMenuFront.style.posTop = yCoor - sHeight + 15;
 subMenuBack.style.posTop = yCoor - sHeight + 15;
 }

if (xWidth < widthMax - 1)
 {
 subMenuFront.style.posLeft = xCoor;
 subMenuBack.style.posLeft = xCoor;
 }
 else
 {
 subMenuFront.style.posLeft = xCoor - menuFront.style.posWidth - subMenuFront.style.posWidth + 5;
 subMenuBack.style.posLeft = xCoor - menuFront.style.posWidth - subMenuFront.style.posWidth + 5;
 }
 }
}

function out()
{
  var itemId = event.srcElement;
  itemId = checkElement(itemId);  
  itemId.style.backgroundColor = outBgCr;
  itemId.style.color = outCr;
}

function isIE()
{
  return (navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion >= 5))
}

if (isIE)
 {
 document.onload = hideMenus;
 document.onclick = show;
 }
</script>
<script language="JavaScript1.2">
var overBgCr = "#3333CC";
var overCr = "#FFFFFF";
var outBgCr = "#C0C0C0";
var outCr = "#000000";
var itemFont = "Arial";

function createPopUpMenu()
{
  createMenu("menu1", 150, 0); //creates the main menu layer called menu1 (with level 0)
  createItem("item1", "Link 1", "menu1", "http://www.gezginler.net", false); //add an item to menu1
  createItem("item2", "Link 2", "menu1", "http://www.gezginler.net", false); //add an item to menu1
  createItem("item3", "Link 3", "menu1", "", true); //add an item that has a sub menu
  createItem("item4", "Link 4", "menu1", "http://www.gezginler.net", false); //add an item to menu1
  createItem("item5", "Link 5", "menu1", "http://www.gezginler.net", false); //add an item to menu1

createMenu("menu2", 200, 1); //create a sub menu layer called menu2 (with level 1)
  createItem("item6", "Link 6", "menu2", "http://www.gezginler.net", false); //add an item to menu2
  createItem("item7", "Link 7", "menu2", "http://www.gezginler.net", false); //add an item to menu2
  createItem("item8", "Link 8", "menu2", "http://www.gezginler.net", false); //add an item to menu2
  createItem("item9", "Link 9", "menu2", "http://www.gezginler.net", false); //add an item to menu2

linkSubMenu("item3", "menu2"); //link menu item item3 to sub menu layer menu2
}
</script>
</head>
<body onload="createPopUpMenu();">

Sayfayı ne tarafa kaydırırsanız kaydırın, menü her zaman sayfa ile birlikte ilerler...

<style TYPE="text/css">
#slide {
 Position: Absolute;
 Left: 5;
 Top: 5;
 Visibility: Visible;
 }

A:LINK          {text-decoration: underline; color: blue;}
A:VISITED       {text-decoration: underline; color: #115585;}
A:Hover {text-decoration: underline; color: gray;}
TD              {font-family:Times;}
BODY            {font-family:Times; Margin-Left: 120; }

</style>

self.onError=null;
        
        currentX = currentY = 0;  
        whichIt = null;           
        lastScrollX = 0; lastScrollY = 0;
        
        NS = (document.layers) ? 1 : 0;
        IE = (document.all) ? 1: 0;
        
        function heartBeat() {
        
                if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; }
            if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
                
                if(diffY != lastScrollY) {
                        percent = .1 * (diffY - lastScrollY);
                        if(percent > 0) percent = Math.ceil(percent);
                        else percent = Math.floor(percent);
                                        if(IE) document.all.slide.style.pixelTop += percent;
                                        if(NS) document.slide.top += percent; 
                        lastScrollY = lastScrollY + percent;
            }
                if(diffX != lastScrollX) {
                        percent = .1 * (diffX - lastScrollX);
                        if(percent > 0) percent = Math.ceil(percent);
                        else percent = Math.floor(percent);
                        if(IE) document.all.slide.style.pixelLeft += percent;
                        if(NS) document.slide.left += percent;
                        lastScrollX = lastScrollX + percent;
                }       
        }

if(NS) {
                window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
                window.onmousedown = grabIt;
                window.onmousemove = moveIt;
                window.onmouseup = dropIt;
        }
        if(IE) {
                document.onmousedown = grabIt;
                document.onmousemove = moveIt;
                document.onmouseup = dropIt;
        }
        
        
        if(NS || IE) action = window.setInterval("heartBeat()",1);

</script>

İlkine göre dahada gelişmiş başka bir sülük menü örneği...Sayfayı aşağıya doğru kaydırın.

Sayfayı aşağı doğru kaydırın...

NS6 = (document.getElementById&&!document.all)
IE = (document.all)
NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4")

tempBar='';barBuilt=0;ssmItems=new Array();

moving=setTimeout('null',1)
function moveOut() {
if ((NS6||NS)&&parseInt(ssm.left)<0 || IE && ssm.pixelLeft<0) {
clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed);slideMenu(10)}
else {clearTimeout(moving);moving=setTimeout('null',1)}};
function moveBack() {clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)}
function moveBack1() {
if ((NS6||NS) && parseInt(ssm.left)>(-menuWidth) || IE && ssm.pixelLeft>(-menuWidth)) {
clearTimeout(moving);moving = setTimeout('moveBack1()', slideSpeed);slideMenu(-5)}
else {clearTimeout(moving);moving=setTimeout('null',1)}}
function slideMenu(num){
if (IE) {ssm.pixelLeft += num;}
if (NS||NS6) {ssm.left = parseInt(ssm.left)+num;}
if (NS) {bssm.clip.right+=num;bssm2.clip.right+=num;}}

function buildBar() {
if(barText.indexOf('<IMG')>-1) {tempBar=barText}
else{for (b=0;b<barText.length;b++) {tempBar+=barText.charAt(b)+" "}}
document.write('<td align="center" rowspan="100" width="'+barWidth+'" bgcolor="'+barBGColor+'" valign="'+barVAlign+'">'+tempBar+'</TD>')}

</SCRIPT>

<SCRIPT language="JavaScript1.2"><!--

YOffset=10; // yükseklik!!
XOffset=0;
staticYOffset=100; 
slideSpeed=2 // hız!!
waitTime=100; 
menuBGColor="black";
menuIsStatic="yes"; 
menuWidth=150; // uzunluk!!
menuCols=2;
hdrFontFamily="verdana";
hdrFontSize="2";
hdrFontColor="white";
hdrBGColor="#170088";
hdrAlign="left";
hdrVAlign="center";
hdrHeight="15";
linkFontFamily="Verdana";
linkFontSize="2";
linkBGColor="gray";
linkOverBGColor="#115590";
linkTarget="_blank";
linkAlign="Left";
barBGColor="#000000";
barFontFamily="Verdana";
barFontSize="2";
barFontColor="white";
barVAlign="center";
barWidth=40; // görünen uzunluk!!
barText="<IMG src=11.gif width=82 height=292>"; // <IMG> tagını silerek imaj kullanmayabirsiniz.
//
ssmItems[0]=["MENÜ"] //Menü buraya
ssmItems[1]=["Link 1", "http://www.gezginler.net", ""]
ssmItems[2]=["Link 2", "http://www.gezginler.net",""]
ssmItems[3]=["Link 3", "http://www.gezginler.net", ""]
ssmItems[4]=["Link 4", "http://www.gezginler.net", ""]
ssmItems[5]=["Link 5", "http://www.gezginler.net", ""]
ssmItems[6]=["Link 6", "http://www.gezginler.net", ""]

ssmItems[7]=["FAQ", "http://www.gezginler.net", "", , ""] 
ssmItems[8]=["E-mail", "mailto:gezginler@gezginler.net", "",]

ssmItems[9]=["Linkleriniz", "", ""] //Linkler buraya
ssmItems[10]=["Link 1", "http://www.gezginler.net", ""]
ssmItems[11]=["Link 2", "http://www.gezginler.net", ""]
ssmItems[12]=["Link 3", "http://www.gezginler.net", ""]
ssmItems[13]=["Link 4", "http://www.gezginler.net", ""]
ssmItems[14]=["Link 5", "http://www.gezginler.net", ""]
ssmItems[15]=["Link 6", "http://www.gezginler.net", ""]
ssmItems[16]=["Link 7", "http://www.gezginler.net", ""]
buildMenu();//--></SCRIPT>

1 2 3 4 5 6 7 8 9