[제나플러스] 드롭다운 메뉴 > 팁앤테크

• 목록

• 페이스북 공유
• 트위터 공유
• 

<STYLE>
<!--
th { text-align:center; cursor:pointer; border: 1px solid #000000; background-color: #D6DDC6 }
tr { text-align:center; cursor:pointer; border: 0px solid #000000; background-color: #F5F8F1; font-family:Tahoma; font-size:10pt }
a:link { font-family: Tahoma; font-size: 10pt; color: #000000; text-decoration: none }
a:hover { font-size: 10pt; font-family: Tahoma; color:#98A970 ; text-decoration: none }
a { font-family: Tahoma; font-size: 10pt; color: #000000; text-decoration: none }
-->
</STYLE>
<script type="text/javascript" language="JavaScript">
//--------------------------------------------------------------------------------------------------
// All material contained within this and associated downloaded pages is the property of 4thorder(TM)
// Copyright ?2005.  All rights reserved.
//
// Author: Michael Falatine || Authors email: [email protected]
//
// USAGE: You may use this script for commercial or personal use, however, the copyright is retained-
// by 4thorder (TM).
//
// For other free Scripts visit: http://www.4thorder.us/Scripts/
//---------------------------------------------------------------------------------------------------

// :::::::::::::::::::::::::
// :::: Global Variables :::
// :::::::::::::::::::::::::

var firstLoad=0;
var GlobalECState=0; // 0=collapsed, 1=expanded; used for inital state of ALL branches

// :::::::::::::::::::::::::
// :::: Global Functions :::
// :::::::::::::::::::::::::
window.onload=InitializePage;
function InitializePage()
{
Headers();
attachEventhandlers();
}

// Attach event handlers to all images within container
function attachEventhandlers()
{
mainTABLEElement=document.getElementById("mainTable");
TABLECollection=mainTABLEElement.getElementsByTagName("TABLE");

if (TABLECollection!=null)
        {for (l=0; l<TABLECollection.length; l++)
                {
                THCol=TABLECollection.item(l).getElementsByTagName("TH");
                THCol.item(0).onclick=onclickHandler;
                }
        }
}

function Headers()
{
        mainTABLEElement=document.getElementById("mainTable");
        TABLECollection=mainTABLEElement.getElementsByTagName("TABLE");
        
        if (TABLECollection!=null)
                {
                for (z=0; z<TABLECollection.length; z++)
                        {
                        TRCol=TABLECollection.item(z).getElementsByTagName("TR");
                        THCol=TABLECollection.item(z).getElementsByTagName("TH");
        
                        if(firstLoad==0)
                                {         // Yes: FIRST LOAD OF PAGE - set inital ECState
                                if(GlobalECState==0)
                                        {// Global ECState is COLLAPSED (+) (0)                                
                                        THCol.item(0).setAttribute("ECState",0);
                                        for (j=1; j<TRCol.length; j++)
                                                {
                                                TRCol.item(j).style.display='none';
                                                }
                                        }
                                else
                                        {// Global ECState is EXPANDED (-) (1)
                                        THCol.item(0).setAttribute("ECState",1);        
                                        for (k=1; k<TRCol.length; k++)
                                                {
                                                TRCol.item(k).style.display='block';
                                                }
                                        }
                                }
                        else          // No: FIRST LOAD OF PAGE - change ECState
                                {        // Grab ECState and expand or collapse branch
                                State=THCol.item(0).getAttribute("ECState");
                                if(State==0)
                                        {
                                        // ECState is COLLAPSED (+) (0)
                                        for (l=1; l<TRCol.length;l++)
                                                {
                                                TRCol.item(l).style.display='none';
                                                }
                                        }
                                else
                                        {
                                                // ECState is EXPANDED (-) (1)
                                                for (m=0; m<TRCol.length; m++)
                                                {
                                                TRCol.item(m).style.display='block';
                                                }
                                        }
                                }
                        }
                }
        if(firstLoad==0){firstLoad=1;}
}

// ::::::::::::::::::::::::
// :::: Event Handlers ::::
// ::::::::::::::::::::::::

function onclickHandler(e)
{
// Browser compatibility code
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;

        // Toggle ECState
        State=targ.getAttribute("ECState");
        if(State==0)
                {targ.setAttribute("ECState",1);}
        else{targ.setAttribute("ECState",0);}
Headers();
}

</script>


<TABLE id="mainTable" border="1" cellpadding="0" cellspacing="0" style="border-style: groove; border-width: 4px; border-collapse:collapse">
<TR>
<TD>
<TABLE border="1" cellpadding="0" cellspacing="0">
<TR>
<TH width="150">태그인넷 1</TH>
</TR>
<TR>
<TD width="150"><A href="DHTMLMenuExpanderOlive.htm">tagin.net a</A></TD>
</TR>
<TR>
<TD width="150"><A href="DHTMLMenuExpanderOlive.htm">tagin.net b</A></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>
<TABLE border="1" cellpadding="0" cellspacing="0">
<TR>
<TH width="150">태그인넷 2</TH>
</TR>
<TR>
<TD width="150"><A href="DHTMLMenuExpanderOlive.htm">tagin.net a</A></TD>
</TR>
<TR>
<TD width="150"><A href="DHTMLMenuExpanderOlive.htm">tagin.net b</A></TD>
</TR>
<TR>
<TD width="150"><A href="DHTMLMenuExpanderOlive.htm">tagin.net c</A></TD>
</TR>
<TR>
<TD width="150"><A href="DHTMLMenuExpanderOlive.htm">tagin.net d</A></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>
<TABLE border="1" cellpadding="0" cellspacing="0">
<TR>
<TH width="150">태그인넷 3</TH>
</TR>
<TR>
<TD width="150"><A href="DHTMLMenuExpanderOlive.htm">tagin.net a</A></TD>
</TR>
<TR>
<TD width="150"><A href="DHTMLMenuExpanderOlive.htm">tagin.net b</A></TD>
</TR>
<TR>
<TD width="150"><A href="DHTMLMenuExpanderOlive.htm">tagin.net c</A></TD>
</TR>
<TR>
<TD width="150"><A href="DHTMLMenuExpanderOlive.htm">tagin.net d</A></TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>
<TABLE border="1" cellpadding="0" cellspacing="0">
<TR>
<TH width="150">태그인넷 4</TH>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>

추천0