js 내 비게 이 션 바

<!--      :     1.                       2.style.cursor = cursor;         3.visibility         4.border-right: none;         5.offsetHeight          6.offsetTop        7.absolute            --> 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>js         </title>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<meta name="description" content="" />
<meta name="keywords"    content="" />

<script type="text/javascript" >

    function at_show_aux(parent, child) {//     
        var p = document.getElementById(parent);
        var c = document.getElementById(child);

        //                
        var top = (c["at_position"] == "y") ? p.offsetHeight + 2 : 0;//     +  
        var left = (c["at_position"] == "x") ? p.offsetWidth + 2 : 0;

       
            top += p.offsetTop;//     +  +     
            left += p.offsetLeft;
        

        c.style.position = "absolute";
        c.style.top = top + 'px';
        c.style.left = left + 'px';
        c.style.visibility = "visible";
    }

    // ***** at_show *****

    function at_show() {
        var p = document.getElementById(this["at_parent"]);
        var c = document.getElementById(this["at_child"]);

        at_show_aux(p.id, c.id);
        clearTimeout(c["at_timeout"]);//     
    }

    // ***** at_hide *****

    function at_hide() {

        var c = document.getElementById(this["at_child"]);

        c["at_timeout"] = setTimeout("document.getElementById('" + c.id + "').style.visibility = 'hidden'", 100);//  100     
    }

    // ***** at_click *****



    function at_attach(parent, child,  position, cursor) {
        var p = document.getElementById(parent);//   
        var c = document.getElementById(child);//   

        p["at_parent"] = p.id;//    
        p["at_child"] = c.id;//        
        p["at_position"] = position;//    

        c["at_parent"] = p.id;//        
        c["at_child"] = c.id;//   
        c["at_position"] = position;//    

        c.style.position = "absolute";
        c.style.visibility = "hidden";//     

        if (cursor != undefined) {
            p.style.cursor = cursor;//    
            c.style.cursor = cursor;
        }


                p.onmouseover = at_show;
                p.onmouseout = at_hide;
                c.onmouseover = at_show;
                c.onmouseout = at_hide;


    }
</script>

<style type="text/css">

body { font-size: 0.7em; }
h3   { font-size: 1.6em; margin: 0px; }

a.sample_attach, div.sample_attach
{
  display: block;
  width:   100px;

  border:  1px solid black;
  padding: 2px 5px;

  background: #FFFFEE;

  text-decoration: none;
  font-family: Verdana, Sans-Sherif;
  font-weight: 900;
  font-size: 1.0em;
  color:   #008000;
  FLOAT: none;/*           left       none*/
}


a.sample_attach { border-right: none; }
div#sample_attach_menu_child             { border-right: 1px solid black; }
div#sample_attach_menu_child2             { border-right: 1px solid black; }
div#sample_attach_menu_child3             { border-right: 1px solid black; }



</style>

</head>
<body>



<div id="sample_attach_menu_parent" class="sample_attach">Main Menu</div>
<div id="sample_attach_menu_child" >
<a class="sample_attach">Item 1</a>
<a class="sample_attach">Item 2</a>
<a class="sample_attach">Item 3</a>
</div>
<div id="sample_attach_menu_parent2" class="sample_attach">Main Menu</div>
<div id="sample_attach_menu_child2" >
<a class="sample_attach">Item 1</a>
<a class="sample_attach">Item 2</a>
<a class="sample_attach">Item 3</a>
</div>

<div id="sample_attach_menu_parent3" class="sample_attach">Main Menu</div>
<div id="sample_attach_menu_child3" >
<a class="sample_attach">Item 1</a>
<a class="sample_attach">Item 2</a>
<a class="sample_attach">Item 3</a>
</div>
<script type="text/javascript">
    at_attach("sample_attach_menu_parent", "sample_attach_menu_child", "x", "pointer");//       y,    x
    at_attach("sample_attach_menu_parent2", "sample_attach_menu_child2",  "x", "pointer");
    at_attach("sample_attach_menu_parent3", "sample_attach_menu_child3",  "x", "pointer");
</script>







</body>
</html>

좋은 웹페이지 즐겨찾기