Menü icinde menü acmak

<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>
<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: 185px; height: 240px">
<p align="center"><strong><font color="#00ffff">Başlık 1</font></strong>
<table width="275" border="0">
    <tbody>
        <tr>
            <td><a href="http://url buraya">Link Adı<br />
            </a><a href="http://url buraya">Link Adı<br />
            </a><a href="http://url buraya">Link Adı<br />
            </a><a href="http://url buraya">Link Adı<br />
            </a>
            <p>&nbsp;</p>
            </td>
        </tr>
    </tbody>
</table>
</p>
</div>
<div id="pulloutContent2">
<p align="center"><strong><font color="#00ffff">Başlık 2</font></strong>
<table width="275" border="0">
    <tbody>
        <tr>
            <td><a href="http://url buraya">Link Adı<br />
            </a><a href="http://url buraya">Link Adı<br />
            </a><a href="http://url buraya">Link Adı<br />
            </a><a href="http://url buraya">Link Adı<br />
            </a></td>
        </tr>
    </tbody>
</table>
</p>
</div>
<div id="pulloutContent3">
<p align="center"><strong><font color="#be0f0f">Başlık 3</font></strong>
<table width="275" border="0">
    <tbody>
        <tr>
            <td><a href="http://url buraya">Link Adı<br />
            </a><a href="http://url buraya">Link Adı<br />
            </a><a href="http://url buraya">Link Adı<br />
            </a><a href="http://url buraya">Link Adı<br />
            </a></td>
        </tr>
    </tbody>
</table>
</p>
</div>
<div id="pulloutContent4">
<p align="center"><strong><font color="#be0f0f">Başlık 4</font></strong>
<table width="275" border="0">
    <tbody>
        <tr>
            <td><a href="http://url buraya">Link Adı<br />
            </a><a href="http://url buraya">Link Adı<br />
            </a><a href="http://url buraya">Link Adı<br />
            </a><a href="http://url buraya">Link Adı<br />
            </a></td>
        </tr>
    </tbody>
</table>
</p>
</div>
</div>
</div>
</center></div>