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

1 2 3 4 5 6 7 8 9

Üç boyutlu bir menü örneği.

<head>

function init(id)
{
obj_head = document.getElementById(id)
obj_head.style.height = obj_head.offsetHeight +10;
if(scroll)
{
obj_head.style.position = "absolute";
obj_head.style.width = obj_head.offsetWidth + 10;
obj_head.style.top = offsettop;
obj_head.style.left = offsetleft;
}
obj_head.style.visibility="visible";
}
var T1 = null;

var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0

</head>

</body>

Menünün seçenekleri tıklanıldığında yan tarafta açılır, diğer seçenekler tıklandığında geri döner ve seçtiğiniz başlığın linkleri açılır...

<SCRIPT language=JavaScript>
<!--
/*************************************
Code in this document is copyright of
Dan Steinman of Industrial Dreams 1998
Available at The Dynamic Duo
http://www.dansteinman.com/dynduo/
*************************************/

n = (document.layers) ? 1:0
ie = (document.all) ? 1:0

function init() {
	pulloutActive = 0
	if (n) {
		pullout1 = document.pulloutInterface.document.pulloutContent.document.pulloutContent1
		pullout2 = document.pulloutInterface.document.pulloutContent.document.pulloutContent2
		pullout3 = document.pulloutInterface.document.pulloutContent.document.pulloutContent3
		pullout4 = document.pulloutInterface.document.pulloutContent.document.pulloutContent4
	}
	if (ie) {
		pullout1 = pulloutContent1.style
		pullout2 = pulloutContent2.style
		pullout3 = pulloutContent3.style
		pullout4 = pulloutContent4.style
	}
	pulloutShown = pullout1		
	pulloutShown.xpos = 0
	pulloutNew = "none"			
	pulloutNew.xpos = -185
}

function pullout(which) {
	if (!pulloutActive && pulloutShown != which) {
		pulloutActive = 1 
		pulloutNew = which
		pulloutNew.xpos = -185
		pulloutLeft()
	}
}

function pulloutLeft() {
	if (pulloutShown.xpos > -185) {
		pulloutShown.xpos -= 15
		pulloutShown.left = pulloutShown.xpos
		setTimeout("pulloutLeft()",30)
	}
	else {
		hide(pulloutShown)
		show(pulloutNew)
		setTimeout("pulloutRight()",50)
	}
}

function pulloutRight() {
	if (pulloutNew.xpos < 0) {
		pulloutNew.xpos += 15
		pulloutNew.left = pulloutNew.xpos
		setTimeout("pulloutRight()",30)
	}
	else {
		pulloutShown = pulloutNew
		pulloutActive = 0  
	}
}

function show(showobj) {
	if (n) showobj.visibility = "show"
	if (ie) showobj.visibility = "visible"
}
function hide(hideobj) {
	if (n) hideobj.visibility = "hide"
	if (ie) hideobj.visibility = "hidden"
}

//-->
</SCRIPT>

<STYLE type=text/css>A {
	COLOR: #00FFFF; FONT-FAMILY: 'Arial'; FONT-SIZE: 10pt; LINE-HEIGHT: 20pt
}
STRONG {
	FONT-FAMILY: 'Arial'; FONT-SIZE: 15pt; FONT-WEIGHT: bold; LINE-HEIGHT: 25pt
}
A:link    {text-decoration: none;}
A:visited {text-decoration: none;}
A:active  {text-decoration: none;}
A:hover   {text-decoration: none;}
P {
	FONT-FAMILY: 'Arial'; FONT-SIZE: 10pt; LINE-HEIGHT: 13pt
}
#pulloutInterface {
	BACKGROUND-COLOR: #NONE; CLIP: rect(0px 305px 250px 0px); HEIGHT: 250px; LEFT: 180px; POSITION: absolute; TOP: 10px; VISIBILITY: visible; WIDTH: 400px; layer-background-color: #NONE
}
#pulloutSidebar1 {
	BACKGROUND-COLOR: #003366; CLIP: rect(0px 100px 30px 0px); HEIGHT: 30px; LEFT: 5px; POSITION: absolute; TOP: 5px; WIDTH: 100px; layer-background-color: #DEDEDE
}
#pulloutSidebar2 {
	BACKGROUND-COLOR: #003399; CLIP: rect(0px 100px 30px 0px); HEIGHT: 30px; LEFT: 5px; POSITION: absolute; TOP: 40px; WIDTH: 100px; layer-background-color: yellow
}
#pulloutSidebar3 {
	BACKGROUND-COLOR: #0033cc; CLIP: rect(0px 100px 30px 0px); HEIGHT: 30px; LEFT: 5px; POSITION: absolute; TOP: 75px; WIDTH: 100px; layer-background-color: blue
}
#pulloutSidebar4 {
	BACKGROUND-COLOR: #0033ff; CLIP: rect(0px 100px 30px 0px); HEIGHT: 30px; LEFT: 5px; POSITION: absolute; TOP: 110px; WIDTH: 100px; layer-background-color: red
}
#pulloutContent {
	BACKGROUND-COLOR: #NONE; CLIP: rect(0px 285px 240px 0px); HEIGHT: 240px; LEFT: 110px; POSITION: absolute; TOP: 5px; WIDTH: 285px; layer-background-color: #NONE
}
#pulloutContent1 {
	BACKGROUND-COLOR: #003366; CLIP: rect(0px 185px 240px 0px); HEIGHT: 240px; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: visible; WIDTH: 185px; layer-background-color: #DEDEDE
}
#pulloutContent2 {
	BACKGROUND-COLOR: #003399; CLIP: rect(0px 185px 240px 0px); HEIGHT: 240px; LEFT: -185px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 185px; layer-background-color: #C5C5C5
}
#pulloutContent3 {
	BACKGROUND-COLOR: #0033cc; CLIP: rect(0px 185px 240px 0px); HEIGHT: 240px; LEFT: -185px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 185px; layer-background-color: #A2A2A2
}
#pulloutContent4 {
	BACKGROUND-COLOR: #0033ff; CLIP: rect(0px 185px 240px 0px); HEIGHT: 240px; LEFT: -185px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 185px; layer-background-color: #7E7E7E
}
</STYLE>

</head>

<DIV align=center>
<CENTER>
<DIV id=pulloutInterface>
<DIV id=pulloutSidebar1>
<P align=center><A href="javascript:pullout(pullout1)">Başlık 1</A></P></DIV>
<DIV id=pulloutSidebar2>
<P align=center><A href="javascript:pullout(pullout2)">Başlık 2</A></P></DIV>
<DIV id=pulloutSidebar3>
<P align=center><A href="javascript:pullout(pullout3)">Başlık 3</A></P></DIV>
<DIV id=pulloutSidebar4>
<P align=center><A href="javascript:pullout(pullout4)">Başlık 4</A></P></DIV>
<DIV id=pulloutContent>
<DIV id=pulloutContent1 style="width: 185; height: 240">
<P align=center><STRONG><font color="#00FFFF">Başlık 1</font></STRONG> 
<TABLE border=0 width=275>
  <TBODY>
  <TR>
    <TD>
      <A href="http://www.gezginler.net">Link Adı<BR>
      </a>
     <A href="http://www.gezginler.net">Link Adı<BR>
      </a><A href="http://www.gezginler.net">Link Adı<BR>
      </a>
     <A href="http://www.gezginler.net">Link Adı<BR>
      </a></P></TR></TBODY></TABLE></DIV>
<DIV id=pulloutContent2>
<P align=center><STRONG><font color="#00FFFF">Başlık 2</font></STRONG> 
<TABLE border=0 width=275>
  <TBODY>
  <TR>
    <TD>
    
      <A href="http://www.gezginler.net">Link Adı<BR>
      </a>
     <A href="http://www.gezginler.net">Link Adı<BR>
      </a><A href="http://www.gezginler.net">Link Adı<BR>
      </a>
     <A href="http://www.gezginler.net">Link Adı<BR>
      </a>
     
</TD></TR></TBODY></TABLE></DIV>
<DIV id=pulloutContent3>
<P align=center><STRONG><font color="#00FFFF">Başlık 3</font></STRONG> 
<TABLE border=0 width=275>
  <TBODY>
  <TR>
    <TD>
      <A href="http://www.gezginler.net">Link Adı<BR>
      </a>
     <A href="http://www.gezginler.net">Link Adı<BR>
      </a><A href="http://www.gezginler.net">Link Adı<BR>
      </a>
     <A href="http://www.gezginler.net">Link Adı<BR>
      </a></TD></TR></TBODY></TABLE></DIV>
<DIV id=pulloutContent4>
<P align=center><STRONG><font color="#00FFFF">Başlık 4</font></STRONG> 
<TABLE border=0 width=275>
  <TBODY>
  <TR>
    <TD><A href="http://www.gezginler.net">Link Adı<BR>
      </a>
     <A href="http://www.gezginler.net">Link Adı<BR>
      </a><A href="http://www.gezginler.net">Link Adı<BR>
      </a>
     <A href="http://www.gezginler.net">Link Adı<BR>
      </a>
       
  </TR></TBODY></TABLE></CENTER></DIV></BODY></HTML>

Mouse linkin üzerine getirildiğinde, linkin altındaki kutucukda linkin açıklaması çıkıyor

<SCRIPT language=JavaScript><!--

function thetext(txt) {
   document.theform.thetext.value = txtMouse linkin üzerine getirildiğinde, linkin altındaki kutucukda linkin açıklaması çıkıyor

return true;
}

// --></SCRIPT>

<SCRIPT language=JavaScript><!--

function atext(txt) {
   document.aform.atext.value = txt
     return true;
}

// --></SCRIPT>
      <A href="http://www.mynet.com/" 
      onmouseover='thetext("             ::::::: MYNET ::::::: "); atext("mynet türkçe portalı")' 
      target=_blank>MYNET</A><BR><A href="http://www.yahoo.com/" 
      onmouseover='thetext("              ::::::: YAHOO ::::::: "); atext("Yahoo çok amaçlı portalı")' 
      target=_blank base>YAHOO</A><BR><A href="http://www.hotmail.com/" 
      onmouseover='thetext("              ::::::: HOTMAİL ::::::: "); atext("hotmail, mail kontrolü")' 
      target=_blank>HOTMAİL</A><BR><A href="http://www.inndir.com/" 
      onmouseover='thetext("        ::::::: PROGRAMLAR::::::: "); atext("Program mı arıyorsunuz? Hemen tıklayın")' 
      target=_blank>İ N N D İ R</A><BR><A  
      href="http://www.yenisafak.com/" 
      onmouseover='thetext("          ::::::: YENİŞAFAK ::::::: "); atext("Yenişafak Gazetesi")' 
      target=_blank>YENİŞAFAK</A><BR><A 
      href="http://www.microteam.net/" 
      onmouseover='thetext("   :::::::(((( MICROTEAM ))))::::::: "); atext("Microteam, Amerikadan yayın yapan Müslümanların sitesi")' 
      target=_blank>MİCROTEAM</A><BR><A 
      href="http://www.turkcell.com/webmesajg.html" 
      onmouseover='thetext("   ::::::: TURKCELL MESAJ ::::::: "); atext("turkcell telefonlarına mesaj göndermek için tıklayın. fakat turkcell hattınızın olması gerekli ")' 
      target=_blank>TURKCELL 
      MSJ</A><BR><A href="http://www.gezginler.net/" 
      onmouseover='thetext("::::::: GEZGİNLERİN MEKANI::::::: "); atext("Gezginlerin yeni mekanı!")' 
      target=_blank>GEZGİNLER.NET</A>
      <FORM name=theform>
      <P 
      style="LINE-HEIGHT: 100%; MARGIN: 0px; TEXT-INDENT: 0px; WORD-SPACING: 0px"><INPUT 
      name=thetext size=25></P></FORM>
      <FORM name=aform>
      <P 
      style="LINE-HEIGHT: 100%; MARGIN: 0px; TEXT-INDENT: 0px; WORD-SPACING: 0px"><TEXTAREA cols=22 name=atext wrap=virtual>

Link tıklandığında kategori kategori ayrılabilen, ayrılan kategorilerin de bölümlere ayrılabileceği güzel bir script

<head>
<SCRIPT LANGUAGE="VBScript">
Sub Header_onclick()
	If MainHeader.style.display = "" then
		MainHeader.style.display = "none"
	Else 
		MainHeader.style.display = ""
	End If
End Sub

Sub Header_onmouseover()
	Header.style.color= "#FF3300"
End Sub

Sub Header_onmouseout()
	Header.style.color= "#000000"
End Sub

Sub Head1_onclick()
	If TOC1.style.display = "" then
		TOC1.style.display = "none"
	Else 
		TOC1.style.display = ""
	End If
End Sub
	
Sub Head1_onmouseover()
	Head1.style.color= "#FF3300"
End Sub

Sub Head1_onmouseout()
	Head1.style.color= "#000000"
End Sub

Sub Head2_onclick()
	If TOC2.style.display = "" then
		TOC2.style.display = "none"
	Else 
		TOC2.style.display = ""
	End If
End Sub

Sub Head2_onmouseover()
	Head2.style.color= "#FF3300"
End Sub

Sub Head2_onmouseout()
	Head2.style.color= "#000000"
End Sub

Sub Head3_onclick()
	If TOC3.style.display = "" then
		TOC3.style.display = "none"
	Else 
		TOC3.style.display = ""
	End If
End Sub

Sub Head3_onmouseover()
	Head3.style.color= "#FF3300"
End Sub

Sub Head3_onmouseout()
	Head3.style.color= "#000000"
End Sub

Sub Head4_onclick()
	If TOC4.style.display = "" then
		TOC4.style.display = "none"
	Else 
		TOC4.style.display = ""
	End If
End Sub

Sub Head4_onmouseover()
	Head4.style.color= "#FF3300"
End Sub

Sub Head4_onmouseout()
	Head4.style.color= "#000000"
End Sub

</SCRIPT>

</head>
<body>

<DIV ID="MainHeader" STYLE="display:none">
	<UL>
	<DIV ID="Head1">
	<FONT SIZE=3>
	<B>ÜCRETSİZ HİZMETLER</B><BR>
	</FONT>
	<FONT SIZE=2>
	Siteniz için tamamı ücretsiz webmaster kaynakları... (1)
	</FONT>
	</DIV>
	<P>
	<DIV ID="TOC1" STYLE="display:none">
		<FONT SIZE=2>
		<UL>
		<LI TYPE=DISC><A HREF="http://www.gezginler.net/">İstatistikli Sayaç</A>
		<LI TYPE=DISC><A HREF="http://www.gezginler.net/">Ziyaretçi Defteri</A>
		<LI TYPE=DISC><A HREF="http://www.gezginler.net/">Forum</A>
		<LI TYPE=DISC><A HREF="http://www.gezginler.net/">Maillist</A>
		</UL>
		</FONT>
	</DIV>
	<P>
	<DIV ID="Head2">
	<FONT SIZE=3>
	<B>MELODİLER</B><BR>
	<FONT SIZE=2>
	Nokia-Ericsson-Panasonic-Alcatel-Siemens. (2)
	</FONT>
	</DIV>
	<P>
	<DIV ID="TOC2" STYLE="display:none">
		<FONT SIZE=2>
		<UL>
		<LI TYPE=DISC><A HREF="http://www.gezginler.net/">Nokia</A>
		<LI TYPE=DISC><A HREF="http://www.gezginler.net/">Ericsson</A>
		<LI TYPE=DISC><A HREF="http://www.gezginler.net/">Panasonic</A>
		<LI TYPE=DISC><A HREF="http://www.gezginler.net/">Alcatel</A>
		</UL>
		</FONT>
	</DIV>
	<P>
	<DIV ID="Head3">
	<FONT SIZE=3>
	<B>ONLINE OYUNLAR</B><BR>
	<FONT SIZE=2>
	Oynarken çok eğleneceğiniz oyunlar. (3)
	</FONT>
	</DIV>
	<DIV ID="TOC3" STYLE="display:none">
		<FONT SIZE=2><br>
		<UL>
		<LI TYPE=DISC><A HREF="http://www.gezginler.net/">King-Fu</A>
		<LI TYPE=DISC><A HREF="http://www.gezginler.net/">Mario</A>
		<LI TYPE=DISC><A HREF="http://www.gezginler.net/">Tetris</A>
		<LI TYPE=DISC><A HREF="http://www.gezginler.net/">Bilardo</A>
		</UL>
		</FONT>
	</DIV>

Tıklandığı zaman açılan bir menü

<style type="text/css">
	html{
		height:100%;
	}
	body{
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
		font-size:0.8em;
		margin:0px;
		padding:0px;

background-color:#EBE2D3;
		height:100%;
		text-align:center;
	}
	.clear{
		clear:both;
	}
	
	#mainContainer{
		width:760px;
		text-align:left;
		margin:0 auto;
		background-color: #EBE2D3;
		border-left:1px solid #000;
		border-right:1px solid #000;
		height:100%;
	}
	
	#topBar{
		width:760px;
		height:100px;
	}
	#leftMenu{
		width:200px;
		padding-left:10px;
		padding-right:10px;
		float:left;
	}
	#mainContent{
		width: 520px;
		padding-right:10px;	
		float:left;
	}
	/*
	General rules
	*/

#dhtmlgoodies_slidedown_menu li{
		list-style-type:none;
		position:relative;
	}
	#dhtmlgoodies_slidedown_menu ul{
		margin:0px;
		padding:0px;
		position:relative;

}

#dhtmlgoodies_slidedown_menu div{
		margin:0px;
		padding:0px;
	}
	/* 	Layout CSS */
	#dhtmlgoodies_slidedown_menu{		
		width:205px;	
	}

/* All A tags - i.e menu items. */
	#dhtmlgoodies_slidedown_menu a{
		color: #000;
		text-decoration:none;	
		display:block;
		clear:both;
		width:170px;	
		padding-left:2px;

}
	
	/*
	A tags 
	*/
	#dhtmlgoodies_slidedown_menu .slMenuItem_depth1{	/* Main menu items */
		margin-top:1px;
		border-bottom:1px solid #000;
		font-weight:bold;
	}	
	#dhtmlgoodies_slidedown_menu .slMenuItem_depth2{	/* Sub menu items */
		margin-top:1px;
	}	
	#dhtmlgoodies_slidedown_menu .slMenuItem_depth3{	/* Sub menu items */
		margin-top:1px;
		font-style:italic;
		color:blue;
	}	
	#dhtmlgoodies_slidedown_menu .slMenuItem_depth4{	/* Sub menu items */
		margin-top:1px;
		color:red;
	}	
	#dhtmlgoodies_slidedown_menu .slMenuItem_depth5{	/* Sub menu items */
		margin-top:1px;
	}

/* UL tags, i.e group of menu utems. 
	It's important to add style to the UL if you're specifying margins. If not, assign the style directly
	to the parent DIV, i.e. 
	
	#dhtmlgoodies_slidedown_menu .slideMenuDiv1
	
	instead of 
	
	#dhtmlgoodies_slidedown_menu .slideMenuDiv1 ul
	*/
	
	#dhtmlgoodies_slidedown_menu .slideMenuDiv1 ul{
		padding:1px;
	}
	#dhtmlgoodies_slidedown_menu .slideMenuDiv2 ul{
		margin-left:5px;
		padding:1px;
	}
	#dhtmlgoodies_slidedown_menu .slideMenuDiv3 ul{
		margin-left:10px;
		padding:1px;
	}
	#dhtmlgoodies_slidedown_menu .slMenuItem_depth4 ul{
		margin-left:15px;
		padding:1px;
	}
	
	</style>
	<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
	
	************************************************************************************************************/	
	var expandFirstItemAutomatically = 1;
	
	var dhtmlgoodies_slmenuObj;
	var divToScroll = false;
	var ulToScroll = false;	
	var divCounter = 1;
	var otherDivsToScroll = new Array();
	var divToHide = false;
	var parentDivToHide = new Array();
	var ulToHide = false;
	var offsetOpera = 0;
	if(navigator.userAgent.indexOf('Opera')>=0)offsetOpera=1;	
	var slideMenuHeightOfCurrentBox = 0;
		
	function popMenusToShow()
	{
		var obj = divToScroll;
		var endArray = new Array();
		while(obj && obj.tagName!='BODY'){
			if(obj.tagName=='DIV' && obj.id.indexOf('slideDiv')>=0){
				var objFound = -1;
				for(var no=0;no<otherDivsToScroll.length;no++){
					if(otherDivsToScroll[no]==obj){
						objFound = no;		
					}					
				}	
				if(objFound>=0){
					otherDivsToScroll.splice(objFound,1);	
				}		
			}	
			obj = obj.parentNode;
		}	
	}

1 2 3 4 5 6 7 8 9