<html>
<head>
<title>메뉴 & 레이어</title>
<style type="text/css">
<!--
table{border:solid 2px #ececec;}

.base
{
 font-size:10pt;
 color:black;
 background-color:white;
}

.base-turnover
{
 font-size:10pt;
 color:white;
 background-color:red;
}

div
{
 border:solid 0px #ececec;
 font-size:10pt;
 color:black;
 position:absolute;
 width:120;
 height:20;
 padding:2;
 visibility:hidden;
}
-->
</style>

<script language="javascript">
<!--
 function baseRollOver(tbl_ID,state)
 {
 document.getElementById(tbl_ID).className=(state=='on')?'base-turnover':'base';
 }

function MM_findObj(n, d) {
    var p,i,x; 
    if(!d) d = document;
    if( (p=n.indexOf("?"))>0 && parent.frames.length ) {
        d = parent.frames[n.substring(p+1)].document;
        n = n.substring(0,p);
    }
    if( !(x=d[n]) && d.all )
        x = d.all[n];
    for (i=0; !x&&i<d.forms.length; i++)
        x=d.forms[i][n];
    for(i=0; !x&&d.layers&&i<d.layers.length; i++)
        x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById)
        x=d.getElementById(n);
    return x;
}

function MM_showHideLayers() {
    var i,p,v,obj,args = MM_showHideLayers.arguments;
    for (i=0; i<(args.length-2); i+=3){
        if ( (obj=MM_findObj(args[i]))!=null ){
            v=args[i+2];
            if (obj.style) {
                obj = obj.style;
                v = (v=='show')?'visible':(v=='hide')?'hidden':v;
            }
        obj.visibility=v;
        }
    }
}
-->
</script>
</head>
<body>
 <table border=0 cellpadding=3>
 <tr>
  <th width=5></th>
  <th class="base" id="menu1" onmouseover="baseRollOver('menu1','on');MM_showHideLayers('layer1','','show','layer2','','hide','layer3','','hide','layer4','','hide');"
   onmouseout="baseRollOver('menu1','off')" style=cursor:hand;>가입</th>
  <th width=5></th>
  <th class="base" id="menu2" onmouseover="baseRollOver('menu2','on');MM_showHideLayers('layer1','','hide','layer2','','show','layer3','','show','layer4','','hide');"
   onmouseout="baseRollOver('menu2','off')" style=cursor:hand;>커뮤니티</th>
  <th width=5></th>
  <th class="base" id="menu3" onmouseover="baseRollOver('menu3','on');MM_showHideLayers('layer1','','hide','layer2','','hide','layer3','','show','layer4','','hide');"
   onmouseout="baseRollOver('menu3','off')" style=cursor:hand;>새소식</th>
  <th width=5></th>
  <th class="base" id="menu4" onmouseover="baseRollOver('menu4','on');MM_showHideLayers('layer1','','hide','layer2','','hide','layer3','','hide','layer4','','show');"
   onmouseout="baseRollOver('menu4','off')" style=cursor:hand;
   onClick="location.href='http://www.nate.com'">링크</th>
  <th width=5></th>
 </tr>
 </table>
 <div id="layer1" style="left:25px; top:50px;" onmouseover="baseRollOver('layer1','on')"
  onmouseout="baseRollOver('layer1','off')">&nbsp;가입하러가기</div>
 <div id="layer2" style="left:76px; top:50px;" onmouseover="baseRollOver('layer2','on')"
  onmouseout="baseRollOver('layer2','off')">&nbsp;Q&A게시판</div>
 <div id="layer3" style="left:150px; top:50px;" onmouseover="baseRollOver('layer3','on')"
  onmouseout="baseRollOver('layer3','off')">&nbsp;자유게시판</div>
 <div id="layer4" style="left:210px; top:50px;" onmouseover="baseRollOver('layer4','on')"
  onmouseout="baseRollOver('layer4','off')">&nbsp;공지사항</div>
</body>
</html>



'작업공간 > Web Programming' 카테고리의 다른 글

제로보드4 zb4pl8  (0) 2009.11.04
페이지 로딩 되면 이동 시키기  (0) 2009.11.03
css P 태그- 라인 한줄로  (0) 2009.09.02
스크롤 시 이동되는 퀵메뉴  (0) 2009.08.28
자바스크립트 명령어 참조  (0) 2009.05.18

+ Recent posts