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

1 2 3 4 5 6 7 8 9

Basit bir sülük menü script.

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

<span id="staticcombo" style="position:absolute;left:0;top:0;visibility:hidden">
<form name="jumpy">
<p><select name="example" size="1"STYLE="color: #000066; background-color: #ebe9d9; font-family: Verdana; text-align: Center;  font-size: 10pt; border: 1px outset #ffffcc" onChange="gone()">
<option value="http://www.linkadi.html">  Link 1  </option>
<option value="http://www.linkadi.html">  Link 2  </option>
<option value="http://www.linkadi.html">  Link 3  </option>
<option value="http://www.linkadi.html">  Link 4  </option>
</select>

function initialize(){
if (document.all){
combowidth=staticcombo.offsetWidth
comboheight=staticcombo.offsetHeight
setInterval("staticit_ie()",50)
staticcombo.style.visibility="visible"
}
else if (document.layers){
combowidth=document.staticcombo.document.width
comboheight=document.staticcombo.document.height
setInterval("staticit_ns()",50)
document.staticcombo.visibility="show"
}
}

function staticit_ie(){
staticcombo.style.pixelLeft=document.body.scrollLeft+document.body.clientWidth-combowidth-30
staticcombo.style.pixelTop=document.body.scrollTop+document.body.clientHeight-comboheight
}

function staticit_ns(){
document.staticcombo.left=pageXOffset+window.innerWidth-combowidth-30
document.staticcombo.top=pageYOffset+window.innerHeight-comboheight
}

window.onload=initialize
</script><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>

Resimli backgroundu ile dikkat çeken hoş bir menü.

<head>
</style>

function fadeObj(number, id, colOff, colOn, spdIn, spdOut, def) {
  this.number = number;
  this.id = id;
  this.colOff = [parseInt(colOff.substr(0, 2), 16), parseInt(colOff.substr(2, 2), 16), parseInt(colOff.substr(4, 2), 16)];
  this.colOn = [parseInt(colOn.substr(0, 2), 16), parseInt(colOn.substr(2, 2), 16), parseInt(colOn.substr(4, 2), 16)];
  this.colNow = [parseInt(colOff.substr(0, 2), 16), parseInt(colOff.substr(2, 2), 16), parseInt(colOff.substr(4, 2), 16)];
  this.spdIn = spdIn;
  this.spdOut = spdOut;
  this.def = def;
  this.direction = false;
  this.active = false;
  this.message = new Array();
  this.messageNow = 0;
}

function fadeCmd(number, message, direction) {
  this.number = number;
  this.message = message;
  this.direction = direction;
}

function fade(number, message, direction) {
  if (fader[number].def && fader[number].messageNow == 0 && fader[number].direction) {
    fadeQ[fadeQ.length] = new fadeCmd(number, 0, false);
    fadeQ[fadeQ.length] = new fadeCmd(number, message, direction);
    message = 0;
    direction = false;
  } else fadeQ[fadeQ.length] = new fadeCmd(number, message, direction);
  setTimeout("fadeBegin(" + number + ");", 20);
}

fader[0] = new fadeObj(0, 'fade0', 'ffff00', '0066ff', 20, 20, true);
fader[0].message[0] = "<strong>Link aciklamasi</strong>";
fader[0].message[1] = "<br><strong>Link aciklamasi</strong>";
fader[0].message[2] = "<br><br><br><strong>Link aciklamasi</strong>";
fader[0].message[3] = "<br><br><br><br><br><br><strong>Link aciklamasi</strong>";
fader[0].message[4] = "<br><br><br><br><strong>Link aciklamasi</strong>";

fader[1] = new fadeObj(1, 'fade1', 'ffff00', '000066', 20, 20, false);
fader[1].message[1] = "<br><div align=center><strong>Link aciklamasi</strong></div>";
fader[1].message[2] = "<br><br><div align=center><strong>Link aciklamasi</strong></div>";
fader[1].message[3] = "<br><br><br><div align=center><strong>Link aciklamasi</strong></div>";
fader[1].message[4] = "<br><br><br><br><br><br><div align=center><strong>Link aciklamasi</strong></div>";

</script>
  <style type="text/css">

body {
  text-align:center;
}

table {
  margin:20px auto;
  text-align:left;
  border:3px outset #ccffdd;
  background:transparent url(http://www.gezginler.net/modules/javascripts/ornek/menu/beyazitkulesi1900.jpg) no-repeat scroll center center;
  font-size:90%;
}
table tr td {
  width:81px;
  height:46px;
  border:2px outset #ccffdd;
  text-align:center;
  cursor:pointer;
}

#fade0 {
  width:130px;
  height:190px;
  text-align:left;
  padding:5px 20px 5px 10px;
  border:0px none transparent;
}
#fade1 {
  width:130px;
  height:190px;
  text-align:right;
  padding:5px 10px 5px 20px;
  border:0px none transparent;
}
.footer {
  text-align:left;
  margin:0px;
}

</style>
  </head>
  <BODY onload="fade(0, 0, true);">
  <table cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td rowspan="4" id="fade0"> </td>
    <td onmouseover="fade(0, 1, true);" onmouseout="fade(0, 1, false);"><a href="http://www.gezginler.net" target="_blank">Link 1</a></td>
    <td onmouseover="fade(1, 1, true);" onmouseout="fade(1, 1, false);"><a href="http://www.gezginler.net" target="_blank">Link 2</a></td>
    <td rowspan="4" id="fade1"> </td>
  </tr>
  <tr>
    <td onmouseover="fade(0, 2, true);" onmouseout="fade(0, 2, false);"><a href="http://www.gezginler.net" target="_blank">Link 3</a></td>
    <td onmouseover="fade(1, 2, true);" onmouseout="fade(1, 2, false);"><a href="http://www.gezginler.net" target="_blank">Link 4</a></td>
  </tr>
  <tr>
    <td onmouseover="fade(0, 3, true);" onmouseout="fade(0, 3, false);"><a href="http://www.gezginler.net" target="_blank">Link 5</a></td>
    <td onmouseover="fade(1, 3, true);" onmouseout="fade(1, 3, false);"><a href="http://www.gezginler.net" target="_blank">Link 6</a></td>
  </tr>
  <tr>
    <td onmouseover="fade(0, 4, true);" onmouseout="fade(0, 4, false);"><a href="http://www.gezginler.net" target="_blank" target="_blank">Link 7</a></td>
    <td onmouseover="fade(1, 4, true);" onmouseout="fade(1, 4, false);"><a href="http://www.gezginler.net" target="_blank">Link 8</a></td>
  </tr>
</table>
  </body>

Menü linki tıklandığında altında linkleri açılıyor. Görsel anlamda gerçekten güzel bir script...

<style>
</style>
</head>
<body>
<ilayer id="coffeemenu01" height=35px>
<layer id="coffeemenu02" visibility=show>
<span id="wrapper">
<span id="wrapper2" onClick="dropit2();event.cancelBubble=true;return false">
<font face="Verdana"><b><a href="notthisbrowser.html"><font color="#000066">              MENÜ                </a></b></font>
</span>
</span>
</layer>
</ilayer>
<script language="JavaScript1.2">
var enableeffect=true
var selection=new Array()
selection[0]='<font face="Verdana"><a href="http://www.gezginler.net"target="_blank"><font color="#00FFFF">Link 0</a><br>'
selection[1]='<a href="http://www.gezginler.net" target="_blank"><font color="#00FFFF">Link 1</a><br>'
selection[2]='<a href="http://www.gezginler.net"target="_blank"><font color="#00FFFF">Link 2</a><br>'
selection[3]='<a href="http://www.gezginler.net"target="_blank"><font color="#00FFFF">Link 3</a><br>'
selection[4]='<a href="http://www.gezginler.net"target="_blank"><font color="#00FFFF">Link 4</a><br></font>'
if (document.layers)
document.coffeemenu01.document.coffeemenu02.visibility='show'
function dropit2(){
if (document.all){
coffeemenu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX
coffeemenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
if (coffeemenu03.style.visibility=="hidden"){
if (enableeffect)
coffeemenu03.filters.revealTrans.apply()
coffeemenu03.style.visibility="visible"
if (enableeffect)
coffeemenu03.filters.revealTrans.play()
}
else{
hidemenu()
}
}
}
function dropit(e){
if (document.coffeemenu03.visibility=="hide")
document.coffeemenu03.visibility="show"
else
document.coffeemenu03.visibility="hide"
document.coffeemenu03.left=e.pageX-e.layerX
document.coffeemenu03.top=e.pageY-e.layerY+19
return false
}
function hidemenu(){
if (enableeffect)
coffeemenu03.filters.revealTrans.stop()
coffeemenu03.style.visibility="hidden"
}
function hidemenu2(){
document.coffeemenu03.visibility="hide"
}
if (document.layers){
document.coffeemenu01.document.coffeemenu02.captureEvents(Event.CLICK)
document.coffeemenu01.document.coffeemenu02.onclick=dropit
}
else if (document.all)
document.body.onclick=hidemenu
</script>
<div id="coffeemenu03" style="position:absolute;left:0;top:0;layer-background-color:#red;background-color:#115585;width:200;visibility:hidden;border:3px solid black;padding:0px">
<script language="JavaScript1.2">
if (document.all)
coffeemenu03.style.padding='4px'
for (i=0;i<selection.length;i++)
document.write(selection[i])
</script>
</div>
<script language="JavaScript1.2">
if (document.layers){
document.coffeemenu03.captureEvents(Event.CLICK)
document.coffeemenu03.onclick=hidemenu2
}
</script>

Menü açık olduğu zaman, yanındaki resim, yazı vb. gibi objelerin üzerini kapatmıyor.

<STYLE TYPE="text/css">

.ae	{ font: 9px verdana; color: #c8d3e0; margin: 0; text-align: center }
.ea	{ font: 9px verdana; color: #7f98b7; margin: 0; filter: fliph flipv; text-align: center }

a.top		{ font:bold 10px ms sans serif; text-decoration:none; width:100px; text-align:center; height:14px; margin:0 ; padding:2 0; background-color:#000; letter-spacing:1px; color:#fff }

a.top:link, a.top:visited	{ border:1px solid #000; filter:Alpha(opacity=60) }

a.top:hover, a.top:active	{ border:1px solid #fff; filter:Alpha(opacity=90) }

a.one		{ font:bold 10px ms sans serif; text-decoration:none; width:100%; text-align:center; height:14px; margin:0 ; padding:2 0; background-color:#600; letter-spacing:1px; color:#fff }

a.one:link, a.one:visited	{ border:1px solid #600; filter:Alpha(opacity=60) }

a.one:hover, a.one:active	{ border:1px solid #fff; filter:Alpha(opacity=90) }

a.two		{ font:bold 10px ms sans serif; text-decoration:none; width:100%; text-align:center; height:14px; margin:0 ; padding:2 0; background-color:#060; letter-spacing:1px; color:#fff }

a.two:link, a.two:visited	{ border:1px solid #060; filter:Alpha(opacity=60) }

a.two:hover, a.two:active	{ border:1px solid #fff; filter:Alpha(opacity=90) }

a.three		{ font:bold 10px ms sans serif; text-decoration:none; width:100%; text-align:center; height:14px; margin:0 ; padding:2 0; background-color:#006; letter-spacing:1px; color:#fff }

a.three:link, a.three:visited	{ border:1px solid #006; filter:Alpha(opacity=60) }

a.three:hover, a.three:active	{ border:1px solid #fff; filter:Alpha(opacity=90) }

a.four		{ font:bold 10px ms sans serif; text-decoration:none; width:100%; text-align:center; height:14px; margin:0 ; padding:2 0; background-color:#660; letter-spacing:1px; color:#fff }

a.four:link, a.four:visited	{ border:1px solid #660; filter:Alpha(opacity=60) }

a.four:hover, a.four:active	{ border:1px solid #fff; filter:Alpha(opacity=90) }

a.five		{ font:bold 10px ms sans serif; text-decoration:none; width:100%; text-align:center; height:14px; margin:0 ; padding:2 0; background-color:#606; letter-spacing:1px; color:#fff }

a.five:link, a.five:visited	{ border:1px solid #606; filter:Alpha(opacity=60) }

a.five:hover, a.five:active	{ border:1px solid #fff; filter:Alpha(opacity=90) }

.tabsha	{ border-width:0 1 1 0; border-style:solid; height:97px; width:100px }
.wech	{ visibility:hidden }

#men1	{ top:150px; left:130px; z-index:6; width:100px; position:absolute; border:1px outset #fff }  
#sha1	{ top:150px; left:130px; z-index:1; height:120px; width:105px; position:absolute; border:none; filter:shadow(color=#666666, direction=135, strength=5) }

#men2	{ top:175px; left:130px; z-index:7; width:100px; position:absolute; border:1px outset #ccc }  
#sha2	{ top:175px; left:130px; z-index:2; height:120px; width:105px; position:absolute; border:none; filter:shadow(color=#666666, direction=135, strength=5) }

#men3	{ top:200px; left:130px; z-index:8; width:100px; position:absolute; border:1px outset #ccc }  
#sha3	{ top:200px; left:130px; z-index:3; height:120px; width:105px; position:absolute; border:none; filter:shadow(color=#666666, direction=135, strength=5) }

#men4	{ top:225px; left:130px; z-index:9; width:100px; position:absolute; border:1px outset #ccc }  
#sha4	{ top:225px; left:130px; z-index:4; height:120px; width:105px; position:absolute; border:none;filter:shadow(color=#666666, direction=135, strength=5) }

#men5	{ top:250px; left:130px; z-index:10; width:100px; position:absolute; border:1px outset #fff }  
#sha5	{ top:250px; left:130px; z-index:5; height:120px; width:105px; position:absolute; border:none; filter:shadow(color=#666666, direction=135, strength=5) }

</style>

/************************************************************
Script made by Erguen Adatepe © 1997-2002 http://www.adatepe.de
This script may be used and changed freely as long as this msg is intact
For any reason feel free to drop me a mail: erguen@adatepe.de
************************************************************/

if( top.parent.frames.length > 0)
top.parent.location.href=self.location.href;

function doit(id,what)
{
document.getElementById(id).style.visibility = what;
}

</script>

</HEAD>
<body onclick="doit('men1','hidden'); doit('sha1','hidden'); doit('men2','hidden'); doit('sha2','hidden'); doit('men3','hidden'); doit('sha3','hidden'); doit('men4','hidden'); doit('sha4','hidden'); doit('men5','hidden'); doit('sha5','hidden')">

<div style="top:90px; left:140px; z-index:-1; width:40%; position:absolute; text-align:justify"><b><font size="+1">Beni Yanlışsız Sakla</font></b><br>
<font size="2" color="#000066"><strong>Saate baktım yirmibeş yaşındayım <br>
Geç kalmadım tanrım yeniden inanmaya <br>
Aşka geç kalmadım <br>
<br>
Ardında yıkık şehirler ve leylaklar bırakan <br>
Bir cümle dudaklarımı geçip beni ihlâl etti <br>
Saate baktım müthiş bir yenilme vaktindeyim <br>
Sevgilim <br>
Ben nerede yağmur yağarsa orada şemsiye kırmanın kitabıyım <br>
Ve en güzel cümlen sensin <br>
<br>
Saate baktım buzlar ve çiçekler arasındayım <br>
Gömleğim asyaya düşerken <br>
Beni yanlışsız sakla bu son görünüşüm</strong></font><br><b><div align="center">Mevlana İdris Zengin</div></b> </div>

Menü, altında kalan objelerin üzerini kapatmıyor...

<STYLE>
DIV {
	CURSOR: hand; TEXT-DECORATION: none
}
.a {
	BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; FONT-SIZE: 11px; Z-INDEX: 10; BACKGROUND: #fee; LEFT: 12px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ccc 1px solid; WIDTH: 150px; COLOR: #000; LINE-HEIGHT: normal; PADDING-TOP: 5px; BORDER-BOTTOM: #ccc 1px solid; FONT-STYLE: normal; POSITION: absolute; TOP: 50px; HEIGHT: 40px; FONT-VARIANT: normal
}
.b {
	BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; FONT-SIZE: 11px; Z-INDEX: 9; BACKGROUND: #eef; LEFT: 12px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ccc 1px solid; WIDTH: 150px; COLOR: #000; LINE-HEIGHT: normal; PADDING-TOP: 5px; BORDER-BOTTOM: #ccc 1px solid; FONT-STYLE: normal; POSITION: absolute; TOP: 95px; HEIGHT: 40px; FONT-VARIANT: normal
}
.c {
	BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; FONT-SIZE: 11px; Z-INDEX: 8; BACKGROUND: #eff; LEFT: 12px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ccc 1px solid; WIDTH: 150px; COLOR: #000; LINE-HEIGHT: normal; PADDING-TOP: 5px; BORDER-BOTTOM: #ccc 1px solid; FONT-STYLE: normal; POSITION: absolute; TOP: 140px; HEIGHT: 40px; FONT-VARIANT: normal
}
.d {
	BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; FONT-SIZE: 11px; Z-INDEX: 7; BACKGROUND: #ffe; LEFT: 12px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ccc 1px solid; WIDTH: 150px; COLOR: #000; LINE-HEIGHT: normal; PADDING-TOP: 5px; BORDER-BOTTOM: #ccc 1px solid; FONT-STYLE: normal; POSITION: absolute; TOP: 185px; HEIGHT: 40px; FONT-VARIANT: normal
}
.e {
	BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; FONT-SIZE: 11px; Z-INDEX: 6; BACKGROUND: #fef; LEFT: 12px; PADDING-BOTTOM: 5px; BORDER-LEFT: #ccc 1px solid; WIDTH: 150px; COLOR: #000; LINE-HEIGHT: normal; PADDING-TOP: 5px; BORDER-BOTTOM: #ccc 1px solid; FONT-STYLE: normal; POSITION: absolute; TOP: 230px; HEIGHT: 40px; FONT-VARIANT: normal
}
.g {
	BORDER-RIGHT: 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: 2px solid; PADDING-LEFT: 5px; FONT-WEIGHT: normal; FONT-SIZE: 11px; Z-INDEX: 1; BACKGROUND: #ffefef; LEFT: 350px; PADDING-BOTTOM: 5px; BORDER-LEFT: 2px solid; WIDTH: 265px; COLOR: #000; LINE-HEIGHT: normal; PADDING-TOP: 5px; BORDER-BOTTOM: 2px solid; FONT-STYLE: normal; POSITION: absolute; TOP: 35px; HEIGHT: 235px; FONT-VARIANT: normal; align: right
}

</STYLE>


<img src="http://www.gezginler.net/modules/javascripts/ornek/menu/balik1.jpg" width="285" height="185" border="0" alt="">
<A href="http://www.gezginler.net">
<DIV class=a id=1 onmouseover=st1(20,1) onmouseout=st2(80,1)>Menü 1</DIV></A>
<DIV class=as id=a1><TABEL><TR><TD></TABLE></DIV><A 
href="http://www.gezginler.net">
<DIV class=b id=2 onmouseover=st1(20,2) onmouseout=st2(80,2)>Menü 2</DIV></A>
<DIV class=bs id=a2><TABEL><TR height="100%" 
width="100%"><TD></TR></TD></TABLE></DIV><A 
href="http://www.gezginler.net">
<DIV class=c id=3 onmouseover=st1(20,3) onmouseout=st2(80,3)>Menü 3</DIV></A>
<DIV class=bs id=a2><TABEL><TR><TD></TABLE></DIV><A 
href="http://www.gezginler.net">
<DIV class=d id=4 onmouseover=st1(20,4) onmouseout=st2(80,4)>Menü 4</DIV></A>
<DIV class=bs id=a2><TABEL><TR><TD></TABLE></DIV><A 
href="http://www.gezginler.net">
<DIV class=e id=5 onmouseover=st1(20,5) onmouseout=st2(80,5)>Menü 5</DIV></A>
<DIV class=bs id=a2><TABEL><TR><TD></TABLE></DIV>
<SCRIPT>
/*this script is (c) by oktay oeztueter 2002, please contact me before u you this script commercial. it's free for testing purposes and for private use when you sign my guestbook with your webpage url and email address :-)*/

aus();
function st1(a,id){
i=a;i+=19;
document.getElementById(id).style.letterSpacing=i/9;
document.getElementById(id).style.filter='alpha(opacity='+i+')';
if (i<90){setTimeout('st1('+i+','+id+')',1)}return(i)}

function st2(a,id){
i=a;i-=5;
document.getElementById(id).style.letterSpacing=i/13
document.getElementById(id).style.filter='alpha(opacity='+i+')';

if (i>50){setTimeout('st2('+i+','+id+')',1)}}
function aus(){
for (z=1;z<=5;z++){
document.getElementById(z).style.filter='alpha(opacity=70)';
document.getElementById(z).style.letterSpacing=2;
document.getElementById(z).style.filter='progid:DXImageTransform.Microsoft.Shadow(direction=130,color=gray,strength=5)'}
}
</SCRIPT>

1 2 3 4 5 6 7 8 9